DirectX Tutorial.com - Game Display Lesson 3: Animation

Simply put, sprites would be dull without animation. So far, we have only covered unchanging sprites. In this lesson, we will learn how to make a sprite capable of multiple frames, how those frames are loaded, and how they are programmed.

Rectangles?! We're all set to go over the height of 2D graphics programming and we're going to talk about simple rectangles?!

Actually, this part is simple and important. I probably should have covered it earlier, but it was ironically avoided. But don't worry. It is easy.

A rectangle in C++ is represented by a struct called RECT. It has four LONG values: the top, the left, the bottom and the right. Each value indicates the distance from the top of the screen or the left of the screen, as shown here:

Image 1.1 - DirectGrid.png Displayed in DirectX

Image 3.1 - The Four Values of RECT

As you can see, the Left shows the distance between the left side in pixels and the left side of the "screen", while the Right shows the distance between the right side and the left side of the "screen". The same goes for Top and Bottom, but on the y-axis.

Now let's look at the definition of this struct:

typedef struct _RECT
{
LONG left;    // the left value
LONG top;    // the top value
LONG right;    // the right value
LONG bottom;    // the bottom value
} RECT, *PRECT;

Each value is self-explanatory, so I won't go into them any further. Let's take a look at how this would be used:

RECT rectangle = {100, 100, 300, 250}; // create the rectangle in Image 3.1

To change the rectangle later, you can individually change the values or set all the values with the SetRect() function. This function has five parameters, the first containing the address of the RECT, and the other four containing the four values. The following code does the exact same thing as shown before:

RECT rectangle; // create the rectangle
SetRect(&rectangle, 100, 100, 300, 250); // initialize the rectangle

And now let's find out how to put this to practical use.

So how can we use this RECT to produce animation? Well, let's first take a look at the Draw() function once again:

HRESULT Draw(LPDIRECT3DTEXTURE9 pTexture,
   CONST RECT* pSrcRect,
   CONST D3DXVECTOR3* pCenter,
   CONST D3DXVECTOR3* pPosition,
   D3DCOLOR Color);

The second parameter listed is CONST RECT* pSrcRect, which is a pointer to a RECT. This RECT (assuming it is not simply set to NULL) contains the portion of a sprite that is to be drawn. For example, we could take a RECT out of the grid sprite and draw it separately, like this:

Image 3.2 - Only Some of Panel2.png

This is all very spectacular of course, but how does this allow us to produce animation? Well, all we now have to do is line up each frame into a single sprite and then use a RECT to draw the desired frame only. Example:

Here we have a portion of a sprite that contains an animated version of our display graphic. It is far too large to display the whole thing here, but you can see the whole thing here.

Image 3.3 - Part of the Animation Strip

In this piece of the sprite, you can see the first four frames.

At the start of our animation, we would use frame 1, like this:

Image 3.4 - The First Frame

Next, we would increment the Left value by 181 (the width of each frame), and display the next frame, like this:

Image 3.5 - The Second Frame

We would then continue down the line, until each frame is drawn, and then we would either repeat, pause, or begin a new animation.

There is really no DirectX code for doing animation, but only simple C++ code. This example program is actually quite crude in architecture, but only has the purpose of displaying a single animation.

To run this example, you will need the latest graphic: "Panel3.png".

[Show Code]

Like I said, there isn't much DirectX involved in upgrading to animation. The math that is done is mostly there to figure out which frame should be displayed, then to run through an algorithm to figure out where that frame is located.

However, go ahead and download the animation image and run the program to get this result (animated of course):

Image 2.5 - The Animated Grid

With animation we can make the game display look fabulous. However, it takes lots of practice and artisitic skills to make a good animated game display.

In addition to a game display, you can also start building 2D games using animated graphics. I will soon be providing various graphical chipsets you can use to start building your own games if you don't have access to any.

In the meantime, practice with animation by doing these exercises:

1. Get the grid to open, and then close again when the space bar is pressed a second time.
2. Have two panels display, each opening and closing with their own keys.
3. Rearrange the frames in the image file so as to descrease its file size.
4. Recode your program to compensate the change.
5. Create your own animation, either a panel or some other animation, and get it animated in DirectX.

Very shortly we are going to see how to build an actual game display, but before we get there I want to talk a little bit about drawing text.

Next Lesson: Adding Text to the Display

GO! GO! GO!