Introduction
This tutorial will be a quick look at doing animations using XNA Game Studio Express. It assumes you’ve been playing with GSE and know at least the basics.
Getting Started
Create a new XNA Windows Game project. Add the following members to the Game class:
private float _time;
private int _curFrame;
private SpriteBatch _batch;
private Texture2D _frames;
Now add the following to the Game class’s constructor:
_curFrame = 0;
_batch = new SpriteBatch(this.graphics.GraphicsDevice);
_frames = Texture2D.FromFile(this.graphics.GraphicsDevice, "frames.dds");
Add the following to the Game class’s Update method:
_time += elapsed;
if (_time > 1.0f)
{
_curFrame++;
if (_curFrame == 10)
_curFrame = 0;
_time = 0.0f;
}
And finally add the following the Game class’s Draw method (before the call to DrawComponents):
_batch.Begin(SpriteBlendMode.AlphaBlend);
_batch.Draw(_frames, new Rectangle(0, 0, 64, 64), new Rectangle(_curFrame * 64, 0, 64, 64), Color.White);
_batch.End();
Next – spiffy graphics (or not)
You’ll notice when creating the _frames member, we reference a texture file “frames.dds”. Here’s that texture looks like:
If you haven’t worked with the DirectX Texture Tool to create .dds file, it’s pretty simple. I’m assuming you have the August ’06 DirectX SDK. If not, download it from here - http://www.microsoft.com/downloads/details.aspx?FamilyId=C72D9F1E-53F3-4747-8490-6801D8E8B4EF&displaylang=en
Start up the DirectX Texture Tool. Click the New Texture toolbar button. Change the Width to 640 and the Height to 64 and click the OK button. Click the File | Open onto this surface… menu item. Select the graphic file to be used and click OK. Click the File | Open onto alpha channel of this surface… menu item and select the graphic file to be used. In this case the graphic was just a bitmap the same size as the texture filled with magenta. Click the Save toolbar button, give the texture file a name and click the Save button.
What happens
XNA automatically handles the game loop, calling the Game object’s Update and then Draw methods. In the Update method, the elapsed variable is set to the amount of time that has passed since the last call to Update. We add this to a variable and check to see if the variable is greater than 1 (second). If it is, we increment the frame to be displayed and reset the time variable. If the frame to be displayed is greater than the number of frames in the animation, we reset it to start from the beginning, creating an animation loop.
When the Draw method is called, we use the SpriteBatch object to draw the proper frame by using one of the overloaded calls to the SpriteBatch’s Draw method that allows us to specify a Rectangle to use in the source graphic. Piece of cake, huh? J
Epilog
The MSDN XNA Forums have since been updated with someone who created an AnimatedTexture class. Ideally that would be the best solution, but for a quick and dirty example the above works. Feel free to download the source for this tutorial from http://home.comcast.net/~machaira/AnimationTest.zip and experiment. Please contact me at machaira-at-comcast-dot-net with any questions.