How to Animate Sprites via Sprite Sheets in XNA Game Studio Express

So far we’ve dabbled with cheap sprite effects such as tint, opacity, or even rotation and scaling. But what we created wasn’t exactly professional, per se (and rightly so, we just begun learning XNA Game Studio Express!). But now the time has come to create a professional looking animation. In fact, we will be recreating a combination attack that consists of a total of 15 different images!

Lost? View the previous section: How to Rotate Sprites in XNA Game Studio Express

Theory and Prerequisites to Animating a Sprite Sheet in XNA Game Studio Express

So what is a sprite sheet, anyways? Sprite sheets are images that consist of multiple images. This single image is used to animate all sorts of things in games. In our example, we will be using one single image to animate 15 different frames of animation.

The image in question can be seen (and downloaded) below.

You might have noticed that each image is evenly spaced from one image to the next. If we were to measure each individual image, we would find that each image is 50 pixels in width. If we know how many pixels each frame is, we can make a loop to scroll through each image- one at a time!

What is going to happen, specifically, is we will be moving a rectangle along the entire image. Only the part of the image that appears in the rectangle will be drawn on the screen. This allows us to scroll through a bunch of images for animation in a nifty little way.

How to Animate Sprites with Sprite Sheets in XNA Game Studio Express

If you don’t have the latest source code, you can get it here. Be sure you also have the SpriteSheet.jpg image shown above, and upload it to the XNA Content Pipeline like we have done with our sprites in previous sections.

Directly below the Game1 class, we need to add a variable for our sprite sheet. The code below will do just that.

Declaring The Texture Variable for The Sprite Sheet

        //Load Character Texture      *XNAGameDev.com
        protected Texture2D texture_mcharacter = null;
        protected Texture2D texture_shuriken = null;
        protected Texture2D texture_spritesheet = null;

With our new variable, texture_spritesheet, in place we can load the sprite into memory in our LoadGraphicsContent method.

Loading a Sprite Sheet into Memory with XNA Game Studio Express

                // load our textures
                texture_mcharacter = content.Load<Texture2D>(”sprite1_transp”);
                texture_shuriken = content.Load<Texture2D>(”sprite_shuriken”);
                texture_spritesheet  = content.Load<Texture2D>(“SpriteSheet”);

Now the real fun begins! We’ll have to go through our Update method and ensure that the proper logic is created to scroll through our SpriteSheet.jpg image. Before we do so, we have eight new variables to declare just above the Update method.

Necessary Variables for Sprite Sheet Animation in XNA Game Studio Express

        float Timer = 0f;
        float Interval = 1000f / 10f;
        int FrameCount = 15;
        int CurrentFrame = 0;
        int SpriteWidth = 50;
        int SpriteHeight = 93;
        Rectangle SourceRect;
        Rectangle DestRect;
        private float RotationAngle = 0f;
        private Vector2 rotation_point;
        protected Rectangle ScaleSprite;
        protected double ScaleValueX = 161;
        protected double ScaleValueY = 266;
        protected bool ScaleIncrement = true;

Our new timer variable will be keeping time in milliseconds, so we can’t use the timer from the last section. The interval, which is the time in between frame changes, is set at 10 frames per second. Our FrameCount holds the number of frames we have, and the next to variables hold the size of each image within the sprite sheet. Lastly, we have the SourceRect and DestRect, which are used to keep track of one rectangle to another.

As for the actual logic, we can see how to animate a sprite sheet with the below code in the Update method.

IF Logic for Sprite Sheet Animation in XNA Game Studio Express

            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();
 
            // TODO: Add your update logic here
 
            // Sprite sheet logic
            Timer += (float)gameTime.ElapsedGameTime.TotalMilliseconds;
            if (Timer > Interval)
            {
             CurrentFrame++;
            if (CurrentFrame > FrameCount - 1)
             {
               CurrentFrame = 0;
             }
             Timer = 0f;
            }
            SourceRect = new Rectangle(CurrentFrame * SpriteWidth, 0, SpriteWidth, SpriteHeight);
            DestRect = new Rectangle(400, 400, 50, 93);

It’s a lot to take in at first, but rest assured, the logic is easy to understand. The first IF statement simply checks to see if the Timer is greater than the Interval- if it is, then it’s time for a new frame! The next IF statement checks to see if the CurrentFrame is larger than 15- if it is, than we reached the end of the image and need to restart! Finally, we set the Timer to 0 when this does indeed happen.

We update our SourceRect and DestRect immediately following this code. The SourceRect has a variable X value, meaning it changes based on time. The DestRect is actually static- meaning it doesn’t ever change. (This is where we draw the sprite on the screen.)

All that we need to do now is draw the sprite to screen! In our Draw method, let’s add a new item for our Sprite Batch to create.

Using The Draw Method to Animate Sprite Sheets in XNA Game Studio Express

            s_batch.Draw(texture_mcharacter, loc3, OpacityValue);
            s_batch.Draw(texture_mcharacter, loc4, tint);
            s_batch.Draw(texture_shuriken, loc5,null, Color.White, RotationAngle, rotation_point, SpriteEffects.None, 0);
            s_batch.Draw(texture_spritesheet, DestRect, SourceRect, Color.White);
            
            s_batch.End();

We should be familiar with how to draw a sprite to screen by now, but we are including a new variable we haven’t worked with before: the DestRect. This value is responsible for sectioning off the image into one rectangle. In this instance, we use this feature to section off a series of rectangles to make the illusion of animation.

If all went well, you should have a very energetic Ryu throwing a heavy hit in a very smooth animation.

More Fun with Sprite Sheets and XNA Game Studio Express

As for a little fun, we can play with the timer and size options for a little amusement. Try out the following code found just above the Update method. (The 10f is changed to a 100f)

Increasing Interval for Sprite Sheets in XNA Game Studio Express

        float Interval = 1000f / 100f;

Instead of Ryu the amazing fighter, we now have a DDR master. Now revert your changes and try the following code.

Increasing Sprite Width for the Sprite Sheet in XNA Game Studio Express

        float Interval = 1000f / 10f;
        int FrameCount = 15;
        int CurrentFrame = 0;
        int SpriteWidth = 60;
        int SpriteHeight = 93;

All we changed was the SpriteWidth. Notice how Ryu actually has an appearance of moving now! Since our width doesn’t fit the image rectangle right, it shows part of the next image. This gives the illusion of Ryu moving.

In the next section we will be taking a look at depth. When you select a character in some fighting games, there are nifty little animations present. But we’ll take it a step further and implement what we’ve learned so far to create a rather impressive character select screen! (And we’ll be using a new project next section- so you can keep the finished code thus far in a safe place for future reference)