2D Animation with DirectX

Introduction

Animation in 2D has changed very little over the years. It is simply a case of displaying one image after another quickly enough to fool the eye into thinking the graphic is animating.

2D Animation Demo

There is a demo of this caveman animating available here: AnimatedSpriteDemo.zip and the source code can also be downloaded: AnimatedSpritesSLN.zip.

2D animation

2D Animation using the Direct3D Sprite

The Direct3D sprite draw function allows you to specify just a rectangular area of the texture to display. We can create an animation graphic (see example below) and then by changing the rectangle to draw we can select different frames.

cavemen frames

When you create the graphic make sure you use an alpha channel. Then when you begin drawing you specify that you want to use alpha. That is all you have to do to make alpha work correctly in Direct3D.

To enable alpha:

m_sprite->Begin(D3DXSPRITE_ALPHABLEND);

Note: another good way of creating 2D animation is to use a 3D package to render out 2D frames from a 3D model.

In the caveman example above each frame is 64 by 64 pixels in size. Therefore when drawing the caveman moving to the left we simply increment the rectangle left and right values by 64. To switch to the other set of frames we just add 64 to the rectangles top and bottom values.

So providing a rectangle like this:

RECT rct;
rct.left=0;
rct.right=64;
rct.top=0;
rct.bottom=64;

m_sprite->Draw(m_texture,&rct,NULL,NULL,0xFFFFFFFF);

Will show this frame:

sprite

To show all 4 frames one after the other, each time we update we simply increment the rectangle values like this:

rct.left+=64;
rct.right+=64;

You then just have to do a bit of management code to relate the move direction with which line of sprites to use e.g.

The Direct 3D sprite interfaces are described in more detail here: sprites

Conclusions

Animation using the Direct3D sprite interfaces is fairly straight forward. By changing the rectangular are of the texture to be drawn we can step through the different frames in our texture.