2D Game Primer (Visual Basic)

Sign in to queue


  This article is the first part of Upgrade Your Game series of tutorials. It walks you through the basics of how 2D games work using Visual Basic
The Z-Buffer

Difficulty: Easy
Time Required: 1-3 hours
Cost: Free
Software: Visual Basic or Visual C# Express Editions,



Visual Basic Upgrade Your Game Series


Welcome to the Upgrade Your Game series of tutorials. There are four tutorials, each covering how to write a simple computer game using Visual Studio Express products. Though the games are simple, each one teaches some game development techniques and builds on the last to improve your skills. The skills can be applied to more complex games including 3D games using Microsoft DirectX.

When you program games, you have to use math whether you want to or not. The simpler the game, the less math there is to learn, and 2D games use simpler math — but you cannot avoid it altogether. Today's top-selling 3D games are full of 3D vector math and complex simulations of physics. Fortunately, you do not need to know all of that for the simple games presented in this series.

This 2D primer covers some of the fundamentals of simple math needed for the games in this series.

Note: This documentation assumes that you have a basic knowledge of programming concepts and the Visual Basic environment. You can learn more about these topics in the product documentation by clicking Help on the menu bar, and then clicking Contents, Index, or Search. You can also access Help by positioning the mouse cursor on language keywords or user interface elements such as windows or dialog boxes, and pressing F1.


2D Game Development Concepts

The Game Loop

Window Forms and ASP applications are often called "event-driven" applications — they sit doing nothing for most of the time waiting for an external stimulus, such as a button press from an end user or a Web service request from another application. This works really well for that kind of application.

Games, on the other hand, are generally not sitting doing nothing all the time. Even if the end user is not pressing a key or a button on the gamepad, the game must animate characters, perform AI functions, and play sounds and many other things depending on the game. You've probably done some of these background type tasks in Windows Forms applications using timer controls or background threads. But in general these don't scale to the computer game scenario, where there are multiple animations and multiple background tasks all happening at very different intervals.

The solution that most games use (and by "most games" I mean everything right up to the top-selling Xbox 360 titles) is usually called the "game loop." In pseudo code it looks something like this:

While (game is running)
Check for input
Update all objects in the game
Draw all objects in the game

This might explain one reason why games almost always use 100% of your CPU even if they don't appear to be doing much. The faster your computer is, the faster this loop will run and the smoother the animation and the synchronization will be.

There is one slight problem with running a tight loop like that, at least in Windows. If you don't allow Windows to check for and process Windows messages and events, your application will be marked as "Not responding" by the operating system. You might have seen this in your applications if you have a loop that runs for a long time. You might also have solved it by putting a call to DoEvents into the loop, which allows Windows to process the events. This can work reasonably well if you know the loop will end eventually, but in this case the loop is the entire game and you need a better way.

The method I have chosen to use for these games is NOT the most efficient (for a full discussion on this under Managed DirectX see the MDX Game Loop FAQ), but it is the simplest, and none of the games covered here needs the more complex method.

Private Sub TinyTennis_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles MyBase.Paint
  'Perform any animation here
  'Draw the game objects here
  'Force the next Paint()
End Sub 

Sprites are two-dimensional images that appear in a video game. Sometimes they are static images, but in general they are the building blocks for animation. They either move around the screen or change the image at regular intervals, giving a "flip book" kind of animation; or they do both, giving you characters like Mario and Donkey Kong that can move around the screen running and jumping.

Positioning a Sprite
Just like Windows Forms controls, sprites are placed at an x,y position on the form. 0,0 is the top left and ClientSize.Width, ClientSize.Height is the bottom right. Just like Windows Forms controls, sprites have a height and width too.

However, unlike Windows Forms controls, sprites are primarily designed to move and animate, often hundreds of times per second, to get the smoothest animation possible. So while a sprite can only be drawn at an integer x,y position, its ACTUAL position at a subsecond point in time could be 1.45, 12.67. It's important to remember this position so that the animation doesn't get choppy. A sprite position is stored using a floating-point Point structure PointF rather than the integer-based Point structure like Windows Forms controls. This means you can store the subpixel accuracy and then just convert to integer screen positions when you draw them.

The more game programming you do, the more you will come across the term "vector." Though I've avoided the term in this series for the sake of simplicity, it's worth noting that the concepts are used when the positions of the sprites are updated for animation.

Simply put, a vector is just an offset. So a vector of (4,2) means that from some start point you move 4 units in the x-axis and 2 in the y-axis.

You will see positions referred to as vectors. In this case, a position of (4,2) means an offset of (4,2) from the origin.

Vectors can be added together, so (4,2) + (2,4) gives you a total offset of (6,6).

Vectors can have negative components, so (-2,1) means move 2 units to the left on the x-axis and 1 unit down on the y-axis.

All of these concepts are used when moving a sprite around the screen.

Moving a Sprite
Sprites move with a certain velocity. Velocity is different from speed because velocity also contains information about the direction. For example, you could tell me you are driving at 60 mph, and I would guess that in one hour you would be 60 miles from the start point. But if you were driving round in a circle, that would not be the case. If I told you my velocity was 60 mph due east, then I would know for sure where you would end up.

Since your position is an x, y value you can store your velocity as another two-component vector (s, t): s is how fast you want to move on the x-axis, and t is how fast you want to move on the y-axis. If you add them together: (x,y) + (s,t) = (x+s, y+t), you get the new position of the sprite.

Example: Sprite is at (4,10) and has a speed of (1,0). (1,0) means the sprite will move right in the x direction only. (4,10) + (1,0) = (5,10). If you repeat this addition every second, then the sprite will move 1 pixel per second across the screen. You can see that any direction and speed can be represented just by changing the s, t values in that vector.

Time-Based Animation
Imagine a sprite that starts at x=0 and is moving to the right with a velocity of +10. If you walk through the game loop above, the sprite would have +10 added to its position each time the sprite was updated and would move from x=0 to x={some bigger number} where {some bigger number} is 10 times the number of times the loop has been run. But the question is, exactly how fast would it move? Well, it depends on how fast the loop runs, which depends on how fast your computer is running. This would mean that on your top-of-the-line gaming rig the sprite could cross the screen in half a second, but on your parents' four-year-old "we only use it for e-mail" computer it could take two seconds. Obviously this isn't something that is desirable in a computer game.

To fix this you need to think about what velocity really is. What does that +10 mean? Velocity is a measure of distance over a period of time, so you cannot think of the +1 as just a distance; it's really +1 pixel in some time that you need to define. So each time round the loop, you just need to know how long it's been since the last update and scale the movement by that time.

A sprite that has a velocity of +10 actually means you move +10 pixels per second. So if it's been half a second since the last frame, multiply that by the velocity and move 5 pixels. In reality the time between frames is fractions of a second. So on your fast gaming rig, where the loop runs very fast, the sprite will move with subpixel accuracy for some very smooth animation. On your parents' computer, where the loop only runs 5 times per second, the sprite will move 2 pixels each frame, but after 10 seconds the sprite will be in exactly the same place as it is on your computer.

The code will look something like this (notice that for accuracy elapsedTime is a double and therefore needs to be cast down to a float to match the PointF structure):

'Move the sprite based on the velocity
Location.X += Velocity.X * CSng(elapsedTime)
Location.Y += Velocity.Y * CSng(elapsedTime) 

The loop timings I mentioned here are very exaggerated — on most computers the loop will be running hundreds or thousands of times per second, meaning that your animations will be very smooth and accurate.

Sprite bounds
There are two ways to represent the rectangle containing the sprite:

  1. X, Y, Height, Width
  2. X, Y of top left corner and X, Y of bottom right corner

Whilst both of these are valid, you must usually find the first one in use. It's easier to update just one corner as the sprite moves around and calculate the other corner when it's needed. For tasks like collisions- and bounds-checking you need to calculate the bottom-right corner, so you will see X+Width and Y+Height as a very commonly used formula in games.

Simple Collision Detection
Collisions are a vital part of almost any game — they restrict where an object can move, whether an object has taken damage, and so forth.

Simple collisions can be described in terms of the positions and size of the sprites and the regions they need to collide with. Since everything is rectangular in this case, there is no need for any more complex collisions that need to be determined at the pixel level. All the collisions can be checked for by looking to see if the rectangles overlap or if the coordinates are outside of a certain range. Checking for rectangle overlap is quite simple.

Private Function collide() As Boolean
  Return Not (Sprite1.Location.X > Sprite2.Location.X + Sprite2.Size.Width OrElse _
  Sprite1.Location.X + Sprite1.Size.Width < Sprite2.Location.X OrElse _
  Sprite1.Location.Y > Sprite2.Location.Y + Sprite2.Size.Height OrElse _
  Sprite1.Location.Y + Sprite1.Size.Height < Sprite2.Location.Y)
End Function 

This code uses an efficient algorithm for determining if the two rectangles overlap. It checks the bounds of both rectangles to determine whether they DON'T overlap and then negates the result. For example, the first line checks whether the left-hand edge of sprite 1 is to the right of the right-hand edge of sprite 2. If it is, then obviously they cannot overlap. The next three lines check the other three edges.

The Discussion

  • User profile image
    Walter Stiers - Academic Relations Team (BeLux)

    Coding4Fun's WebLog has a long entry on 2D Game Primer (Visual C#) and of course also 2D Game Primer

  • User profile image

    As with all of these articles, the right column cuts off important text, even code!  Who is the webmaster for these pages, anyway?  Would be nice if someone looked at what they wrote to see if it was complete.  Otherwise, good article, just frustrating not being able to see it all.

  • User profile image
    Rominson Shrestha

    make it more easy but it's good

    will send me more information to know how to make game like mario etc..

  • User profile image

    where can i get source code of mario done in VB for developing someother games

  • User profile image

    Dear Guys.

    My classmate and I are making a flash game for a school project using Visual basics.

    The game is a ‘side scroller’ skateboarding game where the player’s character (side on) moves across the screen jumping objects.

    We ask your help because you seem to have exceptional expertise in this field.

    Could you please tell us how to make an image move, using commands, gravity principles, scores, etc and how to import a picture without the back ground.

    thank you very much

    Alex and Liam

    Big Smile

  • User profile image

    This is just the thing i needed.

    Because I was just griping about

    not knowing what a sprite was.

  • User profile image

    Checkout how far I've gotten from starting out with your tutorials

    http://www.davidtrammell.com/levi/Project.aspx%22%3EMy" target="_new" rel="nofollow">My'>http://www.davidtrammell.com/levi/Project.aspx

  • User profile image
    Douglas Chin

    I am trying to write a games program in VB2008.I download the directx Oct., 2006 program. I have to add references Microsoft. Directx, Microsoft.Direct3DX and Microsoft.Direct3D. I cannot find the Direct3D in the references list. I found the other two. I did a DXDIAG and it said Direct3D is enabled. How Can I get it into the references? Thanking you.

  • User profile image
    Mohammad Khalil

    Can some body gift me basic 2d games codes and concepts free of cost

    I Shall be very thankful to them

  • User profile image

    Hello does someone know any tutorials to either C++ or VB to learn how to make 2D games? sorry but this don't get me started though i allredy know a little basics in VB and C++, its very good but you only tell and tell, i don't understand what to do Smiley please E-mail at kristianjanum@hotmail.com

  • User profile image

    The links to the games ain't working Sad

  • User profile image

    @postal, this is an overview, the top has links into actual applications.

  • User profile image


      Dear alex flash games are written in 'Flash' which is a frame based animation tool, not visual basic. Either you have no knowledge of this part of the computer world, or need a dictionary.

  • User profile image

    @Roby718 not everyone is a native english speaker or knows everything about programming.  We were all n00bs at some point, heck, i still think of myself as a newbie at times

  • User profile image

    i need help with coding for a flash game similar to alex's request back in 2007/ if someone could update on that post it would be greatly appreciated. thanks.

Add Your 2 Cents