DirectDraw: Animation
By: Jack Hoxley
Written: May 2000
Download: DD_Anim.Zip (555kb)

Animation will make all the difference in your programs - It makes for a more interactive environment. Luckily, progamming animations is relatively straight forward.

However, drawing you're animations can go from extremely easy to impossibly difficult; to illustrate the point, people take advanced courses on animations - it can get that difficult.

Animations are basically a large collection of still images, each one very slightly different from the previous one. If these images are displayed rapidly over the top of each other they will appear to be moving.
for example, you have 10 still pictures of a ball. Each picture shows the ball getting closer and closer to the ground. If we copy the pictures on top of each other at the correct speed it will appear to be moving towards the ground.

Animations require a good knowledge of graphics and how to draw them, as you'll have to work out what the next frame is going to look like; they get hard when you're trying to draw something realistic - such as a person. Drawing an animated stick-person is easy, how about an animated person with clothes on that ripple as he/she moves - that's difficult.

Drawing an Animation
The animation used in this example was rendered in Adobe Premier 4.2, so I didn't have to do much work on it. They were then compiled onto a storyboard style picture. Although each individual picture is only 160x120, they are put together on one large 640x480 picture. Open up Anim.Bmp in the zip file to see what I mean. Most animations are in this form - one big picture with lots of individual frames in it is better than 3000 different saved bitmaps.

The actual code
The actual code is normally very easy for animations, as most of the effect is done through the actual artwork. The important thing is to keep the animation running at the correct speed - if it goes to fast it will look silly, if it goes to slow it will be jerky. In my example it runs at a steady 15 frames a second, but, if the computer running the application is to slow to render 15 frame a second it will still seem jerky. This process is called frame limiting.

Once you have it running at the correct speed you need to write code that works out where the next frame will be. Directdraw doesn't know what you mean if you tell it to draw frame 1 - it needs the measurements in pixels. There are several ways of doing this:

1. If every frame is in a row on the X (horizontal) axis you need only to increment the RECT's left/right values each time. eg. your frames are 160 pixels wide, you need to increment the .left and .right values by 160 each time
2. The same goes if the frames are in a column around the Y Axis (vertical). Just modify the top/bottom values instead.
3. If you're frames are on different rows (as they are in this example) you will have to work out when to change rows. In this example there are 4 frames to each row, you could write code that after every 4 frames it adds x to the vertical coordinates and resets the horizontal axis back to 0.
4. You could use lookup-tables (as done in this example). These can be very easy to use once worked out. It involves having an array of X/Y variables, which you fill out whilst loading the game, then during the game you look through the array for the coordinates that represent your current frame.

Because of the nature of this tutorial it is much better for you to download the example zip file. This is because it has a set of animations already drawn for you. You can get it from the top of the page, or the downloads page