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
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:
- 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
- The same goes if the frames
are in a column around the Y Axis (vertical). Just modify the top/bottom values
- 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.
- 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