Basic Animation using ZOrder

This is a basic tutorial to show you one method of simple animation using pictureboxes and ZOrder. This tutorial was written for VB6, but don't stop reading if you use something else, as it could probably be adapted to VB.Net or even other languages without too much difficulty. Along with the instructions and code, there is a working solution attached as well.

Assumed Knowledge
This is an often-asked about question by people who are beginning in games and graphics programming, so I will attempt to keep assumed knowledge to a minimum. However, you will need to have some basic knowledge of control arrays, and working with for For... Next loops. Although, if there are requests for it, I may add these two aspects in to this tutorial.

The Pictures
To do the animation you will have to have each frame of the animation already drawn (using MS paint or whatever you like). My example will deal with a situation where we have 3 different pictures, with one being repeated, meaning a total of 4 frames of animation. Also, this will work best if every frame is the same size (in pixels that is, not bytes).

Setting up the Form and Controls
First thing is to create 4 pictureboxes, and make them an array with indeces 0 to 3. I gave mine the name 'picPlayer'. Set the Autosize properties of the pictureboxes to True, so that they will all be the right size. In each one place a different frame of the animation sequence, starting with the first frame in picPlayer(0), and the last one in picPlayer(3). For my example, frame zero is standing, frame one has the guy with his left leg out, frame two is standing again, and frame 3 has the guy with his right leg out.
We need 2 buttons to start and stop the animation, called cmdGo and cmdStop. Set their captions to Go and Stop respectively. We will also need 2 separate timers, one of which will move the dude, and the other will animate him. For tmrMove, set the interval to 10, and for tmrAnimate, set the interval to 150. Both timers should have enabled = false.

Start of the project
The method of animation we are going to use is one where we place all of the pictures at exactly the same place, and then pick one to put 'on top' of all the others; Just like in design, where you can right-click on your pictureboxes and click "Bring to front" or "Send to back". Try this out if you want.
So at our projects commencement, we need to:
a) declare a variable to remember what frame of animation we want to be showing
b) move all the pictureboxes to exactly the same spot
c) bring the first frame of animation to the front

VB Code:

Option Explicit
Dim CurrFrame As Integer 'will remember what frame we're up to
 
Private Sub Form_Load()
    Dim i As Integer 'counter
    For i = 0 To 3 'for each frame
        picPlayer(i).Left = 360
        picPlayer(i).Top = 1200 'put it in its starting x and y positions
    Next i
    picPlayer(CurrFrame).ZOrder 0 'set the first frame to be visible
End Sub

Note that the .Left and .Top values will be whereever you choose to start your player from. The ZOrder function is what we use to put something to the 'front' or 'back' of the screen. Passing 0 as the argument will bring that picturebox to the front of screen, making it block out all the others. Notice that because we used a control array for our pictureboxes, we can easily do something to all of them using the For... Next loop, but we can also refer to a specific one using the variable CurrFrame as in index. Whatever number is stored in CurrFrame will be the number of the frame that we make visible. When CurrFrame is declared it defaults to 0, so in this case we move the 0th frame to the front of screen

The Movement
In our first timer, tmrMove, we are simply going to move all of our pictureboxes across by 10. We will also use a simple If statement to check if our little dude has reached the far right of the window. If he has, we will turn the timers off.

VB Code:

Private Sub tmrmove_Timer()
    Dim i As Integer 'counter
    For i = 0 To 3 'for each frame
        picPlayer(i).Left = picPlayer(i).Left + 10 'move it right 10
    Next i
    If picPlayer(0).Left + picPlayer(0).Width > Form1.Width Then 'if at the edge of screen
        tmrmove.Enabled = False
        tmranimate.Enabled = False 'stop both timers
    End If
End Sub

The Animation
Finally, I hear you say! This isn't actually too hard. We will do 3 things-
1- Increase the value of CurrFrame by one
2- If that increase made CurrFrame go past the limit of the animation, then go back to the start.
3- Display the appropriate picture, according to whatever number CurrFrame has at the time.

VB Code:

Private Sub tmranimate_Timer()
    CurrFrame = CurrFrame + 1 'go to the next frame
    If CurrFrame = 4 Then CurrFrame = 0 'if past the end, go back to the start
    picPlayer(CurrFrame).ZOrder 0 'show the correct frame
End Sub

Finishing touches
The rest is trivial. All we need to do is put code into cmdGo and cmdStop to start and stop both our timers.

VB Code:

Private Sub cmdGo_Click()
    tmrmove.Enabled = True
    tmranimate.Enabled = True 'enable both timers
End Sub
 
Private Sub cmdStop_Click()
    tmrmove.Enabled = False
    tmranimate.Enabled = False 'disable both timers
End Sub

And that should just about do it! If you don't like how it looks, it's now really easy for you to tweak the intervals of the timers, or even add in extra frames of animation. Just remember to make your loops and If statements account for the extra numbers of frames.
metal
(PS- a working copy of everything I've described is in the attachment below. It contains all the source code, along with the pictures I used- aren't they brilliant? :D)