Results 1 to 1 of 1

Thread: Basic Animation using ZOrder

  1. #1

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

    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:
    1. Option Explicit
    2. Dim CurrFrame As Integer 'will remember what frame we're up to
    3.  
    4. Private Sub Form_Load()
    5.     Dim i As Integer 'counter
    6.     For i = 0 To 3 'for each frame
    7.         picPlayer(i).Left = 360
    8.         picPlayer(i).Top = 1200 'put it in its starting x and y positions
    9.     Next i
    10.     picPlayer(CurrFrame).ZOrder 0 'set the first frame to be visible
    11. 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:
    1. Private Sub tmrmove_Timer()
    2.     Dim i As Integer 'counter
    3.     For i = 0 To 3 'for each frame
    4.         picPlayer(i).Left = picPlayer(i).Left + 10 'move it right 10
    5.     Next i
    6.     If picPlayer(0).Left + picPlayer(0).Width > Form1.Width Then 'if at the edge of screen
    7.         tmrmove.Enabled = False
    8.         tmranimate.Enabled = False 'stop both timers
    9.     End If
    10. 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:
    1. Private Sub tmranimate_Timer()
    2.     CurrFrame = CurrFrame + 1 'go to the next frame
    3.     If CurrFrame = 4 Then CurrFrame = 0 'if past the end, go back to the start
    4.     picPlayer(CurrFrame).ZOrder 0 'show the correct frame
    5. 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:
    1. Private Sub cmdGo_Click()
    2.     tmrmove.Enabled = True
    3.     tmranimate.Enabled = True 'enable both timers
    4. End Sub
    5.  
    6. Private Sub cmdStop_Click()
    7.     tmrmove.Enabled = False
    8.     tmranimate.Enabled = False 'disable both timers
    9. 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? )
    Attached Files Attached Files
    Last edited by metalmidget; Oct 17th, 2007 at 07:49 AM.

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