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:

Public Declare Function BitBlt Lib "gdi32" _
(ByVal hDestDC As Long, ByVal X As Long, ByVal Y As Long, _
ByVal nwidth As Long, ByVal nheight As Long, _
ByVal hSrcDC As Long, ByVal xSrc As Long, ByVal ySrc As Long, _
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:

Public KeyArray(39) as Boolean
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:

Private Sub Form_Load()
    'set player starting position
    imgPlayer.Left = 100
    imgPlayer.Top = 100
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:

Private Sub Form_KeyDown(KeyCode As Integer, Shift As Integer)
    If KeyCode < 40 Then keyarray(KeyCode) = True 'remember the key is down
End Sub
 
Private Sub Form_KeyUp(KeyCode As Integer, Shift As Integer)
    If KeyCode < 40 Then keyarray(KeyCode) = False 'remember the key is up
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>>

The timer
This is the fun bit, but also the most complicated. We need to do a few things here, and we'll have to use a nested If or 2. (Remember that this would ideally be a game loop, which would call the methods of the player class, such as player.move and player.draw.)
Drawing the Background
First I should explain that when we set the value of AutoRedraw to True for our form, there was a purpose to it. What this does is it creates a sort of 'invisible' version of our form, called a buffer, or backbuffer, which we can draw stuff to. This means that for every frame, rather than drawing the background onto the form, then, say, some objects on top of that, then sprites on top of that etc, we do all that stuff to some other area that we can't see. Then we take that entire image and copy it into the visible area of the form, which is what our user sees. This prevents flickering and keeps our FPS up. So our timer needs to first clear the backbuffer, then draw everything to it, then update our screen to look like the backbuffer. In our case we are only drawing one thing- the background, but we'll still use this method.
So this is the first bit of the timer:

VB Code:

Me.cls

This clears the back buffer for us, so we have a clean slate. This code is written 'inside' Form1, so any references to 'Me.Something' are the same as 'Form1.Something'.
Next we draw the background, using this:

VB Code:

BitBlt Me.hDC, 0, 0, Me.Width, Me.Height, picBackground.hDC, BGCut, 0, vbSrcCopy

'BitBlt' is the name of the function that we are calling. 'Me.hDC' tells the function to draw onto this form, where .hDC refers to the 'address' of the form, so that windows knows what we're on about. If you try to just use 'Form1' as this argument, you'll get nowhere. If you asked for my address and I gave you my name you'd be confused, wouldn't you? 0 and 0 mean that we want to draw our picture starting from the top left of the form, not in the middle of it somewhere. Me.Width and Me.Height tell the function how big the drawing should be, in this case it needs to be the size of the whole form. Remember that the actual picture we are using is much wider than this. The one I used is 2000 pixels wide, while the form is only 700 pixels wide. It would be pointless to draw the whole 2000 pixels, though, because we wouldn't see it all, so we only draw as much as we can fit on the screen. 'picBackground.hdc' gives the address of the picturebox as the location to get the picture from. Now, for the xSrc argument, we use the variable BGCut, which holds the number that tells BitBlt where to start drawing the background from. If we want to draw the left-most bit, BGCut will be 0. If we want to miss the first 10 columns of pixels, BGCut will be 10. 0 again tells BitBlt that we want all of the picture, vertically. We aren't going to be changing this value, because our picture is only going to scroll horizontally. And finally vbSrcCopy tells BitBlt to just copy the picture, not to do anything clever with it.

Processing user input (This is what would go in the player class)
Right, so we need to have 2 sections here. Firstly what to do if the down arrow key is being held, and secondly what to do if the right arrow key is being held. These 2 things are mostly the same, but reversed, with a couple of different numbers. I'll give the code for the left key first, then explain it:

VB Code:

If keyarray(37) = True Then 'when left key is held
    If imgPlayer.Left > 100 Then 'if player hasn't reach left limit
        imgPlayer.Left = imgPlayer.Left - 10 'move player left
    Else ' otherwise
        If BGCut > 0 Then BGCut = BGCut - 10 'scroll the background to the right
    End If
End If

The first line checks if the left key is being held, which our boolean array is remembering.
Next we need to check whether our player has gone as far left as we want them to go. We don't want them to move all the way to the edge of screen. In my example they have to stop 100 pixels from the edge, so we check whether they've reached this limit or not by seeing if the .left value is greater than 100. So if they are more than 100 pixels from the edge, we'll just move the player subtracting from the .left value. However, if they've reached the left-most point, we need to make a second check. Think about a scrolling game where you're allowed to go backwards if you like, like Mario Bros. 3. When you move him to the left of screen, the level begins to scroll to the right. But if you went all the way back to the start of the level, the scrolling would stop. So our next if statement checks if the level has scrolled as far right as it can go, by seeing if BGCut > 0. If it is > 0, then we still have room to scroll, so we subtract from BGCut. If BGCut was already 0, however, this line does nothing.
The code for moving right is much the same, with slight alterations:

VB Code:

If keyarray(39) = True Then 'when right key is held
    If imgPlayer.Left < 600 Then 'if player hasn't reach right limit
        imgPlayer.Left = imgPlayer.Left + 10 'move player right
    Else 'otherwise
        If BGCut < 1300 Then BGCut = BGCut + 10 'scroll background left
    End If
End If

We check if the right key is being held. Then we see if the player has reached the right-most limit, which is again 100 pixels from the edge. If .left <600, then they're not at the edge and we can move the player right. If they are at the right, then we go to a second if statement again. This time we see if the background has scrolled as far left as it can go. Remember that BGCut needs to say where we start drawing from. Taking into account that our image is 2000 pixels wide, and we draw 700 of these(the width of the form), the furthest we can go is to start drawing from pixel 1300. So we check if BGCut is less than this maximum value of 1300, and if it is, we increase it.
There's one last thing for the timer. And that's to copy the backbuffer onto the visible form, which is a simple call:

VB Code:

Me.Refresh

So our whole timer looks something like this:

VB Code:

Private Sub tmrGameTimer_Timer()
    Me.Cls 'clear screen
    'draw the background
    BitBlt Me.hDC, 0, 0, Me.Width, Me.Height, picBackground.hDC, BGCut, 0, vbSrcCopy
    
    If keyarray(37) = True Then 'when left key is held
        If imgPlayer.Left > 100 Then 'if player hasn't reach left limit
            imgPlayer.Left = imgPlayer.Left - 10 'move player left
        Else ' otherwise
            If BGCut > 0 Then BGCut = BGCut - 10 'scroll the background to the right
        End If
    End If
    If keyarray(39) = True Then 'when right key is held
        If imgPlayer.Left < 600 Then 'if player hasn't reach right limit
            imgPlayer.Left = imgPlayer.Left + 10 'move player right
        Else 'otherwise
            If BGCut < 1300 Then BGCut = BGCut + 10 'scroll background left
        End If
    End If
    Me.Refresh 'refresh the form from its back buffer
End Sub

And that's it!
Hopefully that wasn't too confusing, although it got a lot longer than I thought it would. Any questions, problems, don't hesitate to ask!
metal

Looks great, but can you tell me how to move up and down?

But I don't want it to scoll, I only want to roam around in the form.

Quote:

---

Originally Posted by Justin M

Looks great, but can you tell me how to move up and down?

---

Erm... Just change the code slightly so you're using .Top and .Y values instead of .Left and .X.

Quote:

---

Originally Posted by Justin M

But I don't want it to scoll, I only want to roam around in the form.

---

What do you mean? Try to elaborate a bit more on your question. If it's not something related to this tutorial, start a new thread in the G&G section, rather than asking it here.

cheers,
metal

Hmmm... I can't get it to work in vb 2008. Does anyone know how to upgrade it? I would really like to disect the example.

Welcome to VBForums :wave:

VB2008 is VB.Net, which is basically a different language to VB6.

It would be much better (and easier) to find a VB.Net equivalent of this.

Thanks for the welcome. Could you point me in the right direction as to where I could find a vb.net equivilent of this? What forum section will I find it in? Thx
-Rozzy

There might be something in the CodeBank - Visual Basic .NET forum.

If not try the Games and Graphics Programming forum, but be careful as that contains all versions of VB, so you need to check which version the code is for.

In either case, you will probably find it useful to use our Advanced Search which allows you to specify which forums to search in.

I know that this question has already been asked but i have got VB8 and I have got most of the code working except for these parts(Red is the parts that need to be converted to VB8):

Me.Cls() 'clear screen

'draw the background

BitBlt(Me.hDC, 0, 0, Me.Width, Me.Height, picBackGround.hDC, BGCut, 0, vbSrcCopy)

If anyone can help it would be most appreciated. If it is to difficult then just leave it.

Quote:

---

Originally Posted by Priebe

I know that this question has already been asked but i have got VB8 and I have got most of the code working except for these parts(Red is the parts that need to be converted to VB8):

Me.Cls() 'clear screen

'draw the background

BitBlt(Me.hDC, 0, 0, Me.Width, Me.Height, picBackGround.hDC, BGCut, 0, vbSrcCopy)

If anyone can help it would be most appreciated. If it is to difficult then just leave it.

---

Check the link si_the_geek posted above! This section is for VB6.0 and before.

Thanks for the reply but I was hoping that someone could help with this problem as I have already searched the net but to no avail and I have tried the links above but some reason the search thing wouldn't let me search. I shall try it again anyway

Sorry, can't help you with this. All I can do is suggest you look up the documentation for bitblt, and see what it says is required in the newer versions of VB.

Alright so I tried out your tutorial and it's great and everything, except when I run it the left and right arrows don't move the character. All the images have loaded fine and that's the only problem. My code is exactly the same as yours, so I think it has to do with one of the properties of a control...

Still looking for what it is, though I was hoping if you had any ideas?


EDIT: No worries it's fixed. Thanks for the tutorial xD

"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"

why would they be set to 90 for an area of 10x10?

Note that I said if you wanted to draw the 10x10 square of pixels from the bottom right of a 100x100 square. The coordinates (90,90) is where such a square would begin.