Results 1 to 15 of 15

Thread: VB6-2D Side Scrolling

Threaded View

  1. #1

    Thread Starter
    Hyperactive Member metalmidget's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia
    Posts
    342

    VB6-2D Side Scrolling

    2D Side Scrolling
    OK, so I've seen a couple of people ask this, and it's actually pretty simple to do, so here's how to implement lovely Mario-style side-scrolling in VB6. This should be pretty easy to port to another language too. (Don't be put off by the length of this tutorial, there's not actually that much code.)

    What you should know first
    This tutorial is going to use one API- bitblt. If you've never used it before, I recommend this tutorial for an in-depth description, or read on and I'll give a crash course when we get to it. In the interests of keeping this basic, there are a few things in this tutorial that could be done in better ways, but I'll leave them as simple as possible. I will, however, make a note in red where something could be improved on.

    Setting up the form
    We need 3 controls to make this happen. One timer, which will cycle through events for each frame, one picturebox to hold our background picture, and one image control, which will be the player. (Ideally the player would be a UDT or a class, and instead of an image control you would use a second picturebox, which you blit the player from. Also a proper game loop is preferable to a timer, but a timer will do for something this simple.)
    (I should mention that the finished version of this tutorial is attached at the bottom of this post. So if you want a couple of pictures to work with, download the zip, which has all the files that I used in it.)
    OK, so the timer we'll call tmrGameTimer, give it an interval of 10, and make sure it's enabled. The picturebox, call picBackGround, set Autosize to True, AutoRedraw to true, and visible to false. The image control should be called imgPlayer, and make sure visible is true and stretch is false. Now load the background picture into picBackGround. Because it's set to autosize it will now probably be a lot longer than your form, or else you wouldn't need it to scroll. That doesn't matter, just let it stretch off into infinity. Load the picture of your player into imgPlayer. Set your form's "scale mode" value to 3-pixel. You should always work in pixels when designing games. Twips are evil, and were abolished for VB.net. Now resize the form so that its height is roughly the same as the height of whatever picture you are using for your scrolling background, and set the width to whatever you like. In my example, the height is 230 pixels, and the width is about 700 pixels, which will still read as 3450X10440 twips in the IDE. Also, the form's AutoRedraw property should be set to True, like the picturebox. The reason for this will be explained later.

    Declarations and Form_Load
    We need to declare a few things to work with. Firstly, you'll need to declare bitblt. This needs to be done in a code module, so add one to your project if you haven't already. Now copy-paste this into the module
    VB Code:
    1. Public Declare Function BitBlt Lib "gdi32" _
    2. (ByVal hDestDC As Long, ByVal X As Long, ByVal Y As Long, _
    3. ByVal nwidth As Long, ByVal nheight As Long, _
    4. ByVal hSrcDC As Long, ByVal xSrc As Long, ByVal ySrc As Long, _
    5. ByVal dwRop As Long) As Long
    (If you copy-paste this it will probably come out as all one long line. Just put line breaks after every underscore. The underscores let us write one long line of code along multiple lines.)
    It looks complicated but it's not really. This function is bitblt, and you can use it to draw stuff onto the form. A quick rundown of the parameters:
    hDestDC- the DC of where you're drawing to. A DC is kind of like an address, which windows uses to refer to things. Not all objects have DCs, but forms and pictureboxes do.
    X- The X coordinate of the spot we want to blit to. (Like .left)
    Y- The Y coordinate of the spot we want to blit to. (Like .top)
    nwidth- The width of the picture we want to draw.
    nheight- The height of the picture we want to draw.
    hSrcDC- The DC of the place we are getting the picture from.
    xSrc and ySrc- These are the important ones for this project. These 2 parameters specify where on the source image we want the function to start reading from. So if we had an image 100X100 pixels, but for whatever reason we only wanted to draw the 10X10 square from the bottom right hand corner, we would set both xSrc and ySrc to 90. This is great for creating a 'camera' over a certain spot on a larger image.
    dwRop- This is the method of drawing you want bitblt to use. For this project we will always use VBSrcCopy for this parameter, which just copies the picture as is.
    Right, now that's done, we need some variables, which we will also declare in the module. This means they need to be public, so we can access them from the form.
    VB Code:
    1. Public KeyArray(39) as Boolean
    2. Public BGCut as Integer
    KeyArray is a whole bunch of Boolean values to remember what keys are being held down. We will only really use 2 of the elements of this array- 37 and 39, but as a general rule arrays should be left 0 based. BGCut is important. It will tell us which part of the background image we are drawing. Because we will always use this as the argument for the bitblt parameter xSrc, by increasing this variable our image appears to scroll left, and vice-versa.
    Form_Load is simple, all we are going to do is move the player to his starting position:
    VB Code:
    1. Private Sub Form_Load()
    2.     'set player starting position
    3.     imgPlayer.Left = 100
    4.     imgPlayer.Top = 100
    5. End Sub

    Getting player input
    This method is stolen from NoteMe's tutorial. We will use the form's keydown and keyup events to modify the values of our boolean array 'KeyArray'. It's done like this:
    VB Code:
    1. Private Sub Form_KeyDown(KeyCode As Integer, Shift As Integer)
    2.     If KeyCode < 40 Then keyarray(KeyCode) = True 'remember the key is down
    3. End Sub
    4.  
    5. Private Sub Form_KeyUp(KeyCode As Integer, Shift As Integer)
    6.     If KeyCode < 40 Then keyarray(KeyCode) = False 'remember the key is up
    7. End Sub
    The left arrow key has a keycode of 37, and right is 39. So we can now access the values of KeyArray(37) or KeyArray(39) at any time, to tell us whether or not these keys are being held.
    <<Continued in next post>>
    Last edited by metalmidget; Dec 23rd, 2007 at 06:56 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width