How to Animate in XNA

Animations are important for your games.

The XNA Game Studio (XNA) is a programming environment developed by Microsoft that helps you create complex games for computers, mobile phones and Xbox consoles from within the Visual Studio 2010 programming platform. Animating sprites and models in XNA is important because a simple, animated, two-dimensional (2-D) sprite makes a big difference when you include it in your games.

Things You'll Need

• Visual Studio 2010
• A 256×64 texture containing four frames of the same size.

Instructions

1. Open Visual Studio 2010 and go to the XNA game's constructor. Create a new instance of the "AnimatedTexture" class by using this sample code:

   private AnimatedTexture SpriteTexture;
   private const float Rotation = 0;
   private const float Scale = 2.0f;
   private const float Depth = 0.5f;
   public Game1()
   {

   SpriteTexture = new AnimatedTexture(Vector2.Zero,
   Rotation, Scale, Depth);
   #if ZUNE
   TargetElapsedTime = TimeSpan.FromSeconds(1 / 30.0);
   #endif
   }

   Note that the frame rate must be 30 frames per second (fps) if you plan to use your animation on Zune. In this example, "(0,0)" is texture's origin. The texture has no rotation, is at a scale of "2" and has a depth of "0.5."

2. Load the texture containing the four frames and divide it into animation frames by using this sample code:

   private Viewport viewport;
   private Vector2 objPos;
   private const int Frames = 4;
   private const int FramesPerSec = 2;
   protected override void LoadContent()
   {
   spriteBatch = new SpriteBatch(GraphicsDevice);
   SpriteTexture.Load(Content, "objectanimated", Frames, FramesPerSec);
   viewport = graphics.GraphicsDevice.Viewport;
   shipPos = new Vector2(viewport.Width / 2, viewport.Height / 2);
   }

   The "AnimatedTexture" class loads the texture and draws it into frames. This example draws two frames per second, for two seconds. Replace "objectanimated" with the name of your sprite asset.

3. Determine the animation frames to display by using the "Update" method. Use this code as an example:

   protected override void Update(GameTime gameTime)
   {
   float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
   //Add your game logic here.

   SpriteTexture.UpdateFrame(elapsed);
   base.Update(gameTime);
   }
   public void UpdateFrame(float elapsed)
   {
   if (Paused)
   return;
   TotalElapsed += elapsed;
   if (TotalElapsed > TimePerFrame)
   {
   Frame++;
   Frame = Frame % framecount;
   TotalElapsed -= TimePerFrame;
   }
   }

   The AnimatedTexture's "UpdateFrame" method receives the elapsed seconds between the updates and handles the display of the different frames.

4. Draw the sprite in the game's "Draw" method by using the "SpriteBatch.Draw" function on the "AnimatedTexture" object. Use this sample code to draw correct subrectangle of the texture containing a sprite:

   protected override void Draw(GameTime gameTime)
   {
   GraphicsDevice.Clear(Color.CornflowerBlue);
   //Add your drawing code here

   spriteBatch.Begin();
   SpriteTexture.DrawFrame(spriteBatch, objPos);
   spriteBatch.End();
   base.Draw(gameTime);
   }
   public void DrawFrame(SpriteBatch batch, Vector2 screenPos)
   {
   DrawFrame(batch, Frame, screenPos);
   }
   public void DrawFrame(SpriteBatch batch, int frame, Vector2 screenPos)
   {
   int FrameWidth = myTexture.Width / framecount;
   Rectangle sourcerect = new Rectangle(FrameWidth * frame, 0,
   FrameWidth, myTexture.Height);
   batch.Draw(myTexture, screenPos, sourcerect, Color.White,
   Rotation, Origin, Scale, SpriteEffects.None, Depth);
   }

5. Compile and build the project. When you run the project, you will see the animation created with the four frames from your original texture.

References

• Microsoft: Animating a Sprite

Resources

• Microsoft: Adding Art, Music and Other Game Assets
• Microsoft: Writing Game Code