Go to page:
1 2 3 4 Next
At some point in time, any programmer has the idea to write a game. Some people become programmers because they want to write their own games. In this series of articles, you will look at how to animate the game using some common techniques. In this first article, you will look at using stick figures and simple 2D vector graphics.
Stick Figures
(continued)We've all done stick figure animation at some time, especially when bored in class or work. You draw a simple animation on the corners of the pages in a book and flick through the pages, producing the same little animation over and over. This type of animation is generally static, where each frame of the animation is always the same when played back.
When it comes to creating this animation in an application, there are several things that need to be considered: Speed, Total Frames, Size of frames, and method of display.
In the first example, you are going to do a simple stick man animation. Looking at the list, you are going to use 40ms between frames (25 FPS), 24 frames, 440 by 230 pixel frame, and you are going to redraw each frame in real time.
Before starting with the code there is something to note: This is not the only way to do this style of animation, but only a guide on how to get started. In this animation, you are going to use the Line and Circle methods to draw a few simple shapes that, when put all together, provide the wanted animation.
In drawing the frames, you will use a weird method that works a little easier than some others. In your picturebox, you use the Invert pen for drawing each line and circle. This way, you simply can redraw a line in the next frame to clear it from the image.
The first thing you are going to do is set up the base frame. In this animation most of the frames will have the identical base image, and you only alter a few lines and circles at a time. You paint this frame when the form loads so that at startup the base image is displayed.
Private Sub Form_Load()
M.DrawMode = 6
M.Line (300, 120)-(300, 170)
M.Line (280, 130)-(320, 130)
M.Line (300, 170)-(280, 190)
M.Line (300, 170)-(320, 190)
M.Circle (300, 105), 15
M.Line (100, 120)-(100, 170)
M.Line (80, 130)-(120, 130)
M.Line (100, 170)-(80, 190)
M.Line (100, 170)-(120, 190)
M.Circle (100, 105), 15
M.Line (120, 130)-(200, 190)
End Sub
When you start the application, the base image will look like this.
As you can see, by using a few lines and circles you can draw two simple stick figure men.
I've found it easier to use a Timer class to provide the necessary timing; more about using a timer can be found in this article. And, most of the animation takes place within the timers' Tick event. Apart from the timer, you use a variable to keep track of which frame you are currently displaying.
When you want to start the animation, you set the tracking variable to the first frame, and then start the timer.
Private Sub Command1_Click()
Istep = 1
Timer1.Interval = 40
Timer1.Enabled = True
End Sub
In the Timer's Tick event, you now handle all the changes that occur between frames.
Private Sub Timer1_Timer()
M.DrawMode = 6
Select Case Istep
Case 1
M.Line (120, 130)-(200, 190)
M.Line (120, 130)-(180, 190)
Case 2
M.Line (100, 130)-(120, 130)
M.Line (120, 130)-(180, 190)
M.Line (100, 130)-(118, 120)
M.Line (118, 120)-(175, 190)
Case 3
M.Line (100, 130)-(118, 120)
M.Line (118, 120)-(175, 190)
M.Line (100, 130)-(115, 110)
M.Line (115, 110)-(165, 190)
Case 4
M.Line (100, 130)-(115, 110)
M.Line (115, 110)-(165, 190)
M.Line (100, 130)-(105, 110)
M.Line (105, 110)-(155, 180)
Case 5
M.Line (100, 130)-(105, 110)
M.Line (105, 110)-(155, 180)
M.Line (100, 130)-(95, 110)
M.Line (95, 110)-(145, 170)
End Select
If Istep > 0 Then Istep = Istep + 1
End Sub
In this snip, you can see that only a few of the drawn lines change between frames. You first erase the lines that are not used from the previous frame and then draw in the lines for the current frame. In this way, there is no need to clear the image and redraw the entire frame. Something to remember is that, if the time between clearing and drawing the last lines/pixels of an image is too long, you will end up with a flicker in the animation.
Download the 'StickFigure' sample at the end of this page to view the rest of the animation, and to see a full working example of this animation method.
On the next page, you will look at simple vector graphics.
About the Author
Richard Newcombe has been involved in computers since the time of the Commodore 64. Today, he has excelled in programming, and designs.
Richard is in his early 30's and, if or when you looking for him look no further than his computer. Always willing to help and give advice where he can in regard to computer related subjects.
At present he is working on a few projects so watch this site.
Go to page:
1 2 3 4 Next
Downloads
Asteroids.zip - Demo Clone of the clasic Asteroids game
StickFigure.zip - Complete example code for Stick figure Animation
All
IE 7
Firefox 2.0
