Getting Started
Alright, welcome to the animation tutorial. Once you've completed this tutorial, you can extend your imagination with this to create a simple game of some sort. The game that we're going to create at the end of this section is a semi-RPG(Role Playing Game).

Create a new project in vb.net. Please download alex.zip (instructions to download below) and extract it into the bin folder of your application. (A reminder, these graphics were not created by me).

There's an error on 8k.com which prevents you guys from downloading any zip files..etc, after searching through their
help support, I managed to find a 'quick fix'.
To download any of my files, visit this URL
http://www.nocache.vbprogramming.8k.com/files/alex.zip
then click alex.zip. If that doens't work then you can always try the normal way.
http://www.vbprogramming.8k.com/files/alex.zip

Now, note how the files are arranged. I've named the character Alex. He has 4 different directions (up, down, left, and right) and 3 frames(up1,up2,up3..etc).

Coding

Now that we've examined this, let's get to some coding! Let's Dim a few variables to store his Position, Frame Number, Direction, and the path to his image:

Dim Pos As Point
Dim Loc As String
Dim Dir As String
Dim Frame As Integer

Hopefully you did the first GDI+ tutorial. If you don't understand the stuff below, refer to that tutorial. Remember, the up down left and right images are stored in an alex folder within the bin folder. We want the character to have some sort of default image, so that when he start's off, he is facing a direction, so in Form1_Load, we set his default image:
Loc = "alex/right1.gif"

Here's what we want to do in form1_paint (again, refer to the GDI+ tutorial if you dont understand this)
Dim Bmp As New Bitmap(Loc)
Bmp.MakeTransparent(Color.Lime)
e.Graphics.DrawImage(New Bitmap(Bmp), Pos)

We make his transparent color, lime. Alright, if you run it, he should appear on the top left corner of the form, facing right. Now its time to make him move. In the KeyDown event, type this in:

If e.KeyCode = Keys.Left Then
Pos.X -= 5
End If

If e.KeyCode = Keys.Right Then
Pos.X += 5
End If

If e.KeyCode = Keys.Up Then
Pos.Y -= 5
End If

If e.KeyCode = Keys.Down Then
Pos.Y += 5
End If

Remember, we dimmed Pos as Point. A Point has an X and a Y property. We access those properties by saying MyPoint.X and MyPoint.Y. Also note that when you add an X coordinate, you go right; when you subtract, you go left. When you add a Y coordinate you go down (dont get this confused with graphs, where you go down as the Y coordinates go down); and when you subtract a Y coordinate, you go up. So we're basically moving him 5 pixels

Remember back in form1_paint, we drew the guy at Pos:
e.Graphics.DrawImage(New Bitmap(alexBmp), Pos)

Now that we moved him, the guy should move too, right? Sort of. Run the program, press the arrow keys.... no movement.. run the program again, press the arrow keys then minimize the form and bring it back up again.. tada the character moved! Here's why it moved after you minimized it. When you minimized it and brought it back up again, the computer automatically called the Paint event again, so that we redrew him.
The computer automatically calls the paint event again when:

1) The form is restored(minimize and bring back up again)
2) When you drag a window around the guy you moved
3) When the form loads (this is why it draws him when the form loads)

How do we go about redrawing him(calling the paint event again)? We could just say(after we pressed a key): Form1_Paint... but this sub requires a sender and an e argument, which is a hassle to specify.
The easiest solution vb.net offers is Me.Invalidate.. meaning "Refresh Me (draw me again)"

At the end of the keydown event, type in Me.Invalidate, run the program and it'll work!

Making him change direction
The guy needs to walk, we need to make him walk. This is really easy. I'll use one direction as an example:

If e.KeyCode = Keys.Left Then
Pos.X -= 5
Dir = "left"
End If

'<Other directions>

Loc = "alex/" & Dir & 1 & ".gif"
Me.Invalidate

If we pressed left, Loc would be "alex/left1.gif" (for now we'll focus on direction, frames next) Im sure you guys got the hang of this and changed the code for every direction :-).

Making him step
This requites a little bit of thought. Type this in before Loc = "alex/" & Dir & 1 & ".gif"
Frame += 1
If Frame = 4 Then Frame = 1
Loc = "alex/" & Dir & Frame & ".gif" 'change this line, replace 1 with Frame.

This basically says that, while you're holding down the key, add make him step forward once(frame += 1). We know that our graphics have 3 frames(left1,left2,left3.. etc), so when Frame gets to 4, change it back to 1 and display it.

Run the program and it'll work!

Reducing the flicker
Here's one problem with this animation, it flickers! We're drawing him at such a rate that the system can't handle it. (If it doesnt flicker, you have a great computer, im running a Celeron 1.8 GHZ, 512 MB DDR SDRAM and it flickers for me)

Anyhow, if it doesnt flicker for you, note that when you distribute you're game, you can't expect everyone to have a supercomputer :p.

The Source Code for this tutorial is located here:

You can also locate this by logging in to vbProgramming Forums and going to:
Tutorials > Tutorial Source Code > Source Code