Animation

Creating Animation Class

You need to create a new class, so from the main menu click File, and select New File. Name the class Animation:

You will have the following code:

 1 using System;
 2 namespace TestGame
 3 {
 4 	public class Animation
 5 	{
 6 		public Animation()
 7 		{
 8 		}
 9 	}
10 }

You will need to add the following to the using section:

1 using Microsoft.Xna.Framework;
2 using Microsoft.Xna.Framework.Content;
3 using Microsoft.Xna.Framework.Graphics;

This will allow the class to access the MonoGame framework and SDK. You need to add the following variables inside the class. Try to add these straight after the { after the public class Animation line:

 1 // The image representing the collection of images used for animation
 2 Texture2D spriteStrip;
 3 
 4 // The time since we last updated the frame
 5 int elapsedTime;
 6 
 7 // The number of frames that the animation contains
 8 int frameCount;
 9 
10 // The index of the current frame we are displaying
11 int currentFrame;
12 
13 // The color of the frame we will be displaying
14 Color color;
15 
16 // The area of the image strip we want to display
17 Rectangle sourceRect = new Rectangle();
18 
19 // The area where we want to display the image strip in the game
20 Rectangle destinationRect = new Rectangle();
21 
22 // Width of a given frame
23 public int FrameWidth;
24 
25 // Height of a given frame
26 public int FrameHeight;
27 
28 // The state of the Animation
29 public bool Active;
30 
31 // Determines if the animation will keep playing or deactivate after one run
32 public bool Looping;
33 
34 // Width of a given frame
35 public Vector2 Position;

Now add the following method into your class, this is the Initialize method for the animation:

 1 public void Initialize(Texture2D texture, Vector2 position, int frameWidth, int frameHeight, int frameCount, Color color, bool looping)
 2 {
 3 	// Keep a local copy of the values passed in
 4 	this.color = color;
 5 	this.FrameWidth = frameWidth;
 6 	this.FrameHeight = frameHeight;
 7 	this.frameCount = frameCount;
 8 
 9 	Looping = looping;
10 	Position = position;
11 	spriteStrip = texture;
12 
13 	// Set the time to zero
14 	elapsedTime = 0;
15 	currentFrame = 0;
16 
17 	// Set the Animation to active by default
18 	Active = true;
19 }

The update method involves using currentFrame to identify which frame to display, simple mathematics will allow us to work out which part of the sprite strip needs to be displayed. Every 100 milliseconds the currentFrame will be incremented. When the framecount equals the currentFrame the end of the strip has been reached. The code will then set the currentFrame to 0 to return to the first frame. The code will allow you to not loop an animation and if this is the case the code sets active to false:

 1 public void Update(GameTime gameTime)
 2 {
 3     // Do not update the game if we are not active
 4     if (Active == false) return;
 5 
 6     // Update the elapsed time
 7     elapsedTime += (int)gameTime.ElapsedGameTime.TotalMilliseconds;
 8 
 9     // If the elapsed time is larger than the frame time we need to switch frames
10     if (elapsedTime > frameTime)
11     {
12         // Move to the next frame
13         currentFrame++;
14 
15         // If the currentFrame is equal to frameCount reset currentFrame to zero
16         if (currentFrame == frameCount)
17         {
18             currentFrame = 0;
19             // If we are not looping deactivate the animation
20             if (Looping == false)
21                 Active = false;
22         }
23 
24         // Reset the elapsed time to zero
25         elapsedTime = 0;
26     }
27 
28     // Grab the correct frame in the image strip by multiplying the currentFrame index by the Frame width
29     sourceRect = new Rectangle(currentFrame * FrameWidth, 0, FrameWidth, FrameHeight);  
30 
31     // Grab the correct frame in the image strip by multiplying the currentFrame index by the frame width
32     destinationRect = new Rectangle(
33         (int)Position.X – (int)(FrameWidth * scale) / 2,
34         (int)Position.Y – (int)(FrameHeight * scale) / 2,
35         (int)(FrameWidth * scale),
36         (int)(FrameHeight * scale)
37         );
38 }