Sprites and Animation

---

The sprite

A sprite, in the context of this book and computer graphics, is a two-dimensional object that is a part of the current game scene. This could be anything from a floor or scenery tile, to an item in a shop, to our in-game avatar or character.

How will we use them?

As stated previously, a sprite can be a single floor tile, a bush, our in-game avatar, a potion, or an evil orc—pretty much any two-dimensional object representation in our game world. In most of these cases, the sprite is static (unmoving), but in others, this sprite needs to move around the screen or, even while not moving, be animated.

An example of a sprite that may need to move around or across the screen could be an arrow, a magic missile, or our player avatar moving from one place to the next. Again, some of these sprites need animation and others do not. An arrow or spear, for example, will probably have little to no animation, as this object will not have a long time to live on the screen. But our avatar will need to have a number of animations in order to walk, climb, run, and even attack and die. A static sprite could be something like a rock or a campfire, but the latter would likely be animated.

What is sprite animation?

This is where we take a number of textures, or frames, and sequentially draw them one after another in order to give the impression of animation. This is done the same way as old-school cartoons were drawn: one frame or cell at a time.

What is a sprite sheet?

This is a collection of sprite frames all stored on a single texture, or sheet. These frames can be extracted and put into individual keyframes to be used in an animation clip.

Figure 1: Player sprite sheet

Animation

The code for the animation in this book is from my own MonoGame engine called VoidEngine. I am not sharing all the code from my engine here, but I am sharing snippets of how the animation is handled. You will be able to easily create your own animation classes from these examples, or feel free to use the VoidEngineLight assembly that comes with the code samples on GitHub in your own projects. If you do, please remember to give us a credit on your project.

What is keyframe animation?

This is how we can specify timings for each frame of our animation frames. This gives us a fair bit of control over the animation. Rather than just move from one frame to the next at a fixed pace, we can use the keyframe to specify how long a single frame is viewed until the animation player moves to the next sprite.

Extracting keyframes from a sprite sheet

There is nothing built into MonoGame to do this—we have had to write our own mechanism. We created a SpriteAnimationClipGenerator class to do this for us.

To make it work, we need to know the sprite sheet's dimensions and how many frames or slices are in there. We do this by passing them to the constructor of the class.

Code Listing 1: VoidEngineLight – SpriteAnimationClipGenerator

We can now use this information to extract animation data, or clips, from the sprite sheet, and we do that in the Generate method.

Code Listing 2: VoidEngineLight – Generate function

As you can see from the method signature, we give the clip a name then specify the starting frame location, the last frame's location, the duration of the clip, and whether this frame should be played in a loop.

Now that we have this information, we are going to loop through the sprite sheet and calculate each frame in the animation clip. The first thing we need to do is decide in what direction we need to move in the sprite sheet along the x-axis and y-axis.

Code Listing 3: VoidEngineLight – Generate Function Step 1

We now know how we are going to move through the sprite sheet to calculate the data we need. Before we get going on that, we still need to calculate some more baseline values. We are creating simple animations with this, so we are splitting the time for each frame evenly over each frame in the clip. We calculate the base time for each frame like this:

Code Listing 4: VoidEngineLight – Generate function step 2

We also want to know the size of each frame on the sheet so we can step to the next frame in the sheet correctly.

Code Listing 5: VoidEngineLight – Generate function step 3

Now we can start calculating the values for the frames in this animation clip.

Code Listing 6: VoidEngineLight – Generate function step 4

First, we check if the start position is on the same vertical as the end position. If it is, then we know we only need to move across the sprite sheet horizontally.

If this is not the case, then we check to see if the start and end positions are the same horizontally, and if they are, we know we only have to move along the sprite sheet vertically.

If neither of these are true, then we are moving diagonally across the sprite sheet.

Regardless of our movement through the sheet, we are calculating each frame's data in the same way with this line:

Code Listing 7: VoidEngineLight – Calculated frame extraction

As you can see, we are calculating the frame’s position by multiplying the current X and Y positions by the cellSize X and Y. The duration of the frame is calculated using the current frame count and the base time we calculated earlier.

So, that's how we can generate an animation clip.

In our GameplayScreen Activate method, we are going to generate our sprite sheet for our simple player avatar.

Code Listing 8: GameplayScreen.cs

The first thing we do is load up our sprite sheet from the content pipeline. We can then use the dimensions of this sprite sheet to help set up our SpriteAnimationClipGenerator. We could put this data into a custom content pipeline and load that up like we do the sprite sheet, but that is a little out of the scope of this book, so we will use our generator.

Once we have an instance of the SpriteAnimationClipGenerator, we can use it to extract the animations we want from the sheet.

Code Listing 9: Sprite cell definitions

We now have five animation clips we can use to animate our player avatar, but how do we do that? All we have at the moment are clips—how do we play them?

Animation player

We can now generate animation clips, but for any given screen entity, we may have a number of animations that we want to play. Our player avatar, for example, will want to be able to walk left, right, up, and down, and take other actions. So, we need to store all these possible animations in one place and be able to play them as we need them. That's where our SpriteSheetAnimationPlayer comes in.

We have a few properties in this class.

Code Listing 10: VoidEngineLight – Animation player

TimeSpan AnimationOffSet

To offset the timing of the animation, we can use this when we have several animated sprites on the screen at the same time. Rather than have them play the same frames at exactly the same time, we can offset each of them so they look a little more natural. A hallway with flaming torches is a good example: we would not want each flame playing the same animation at the same time.

bool IsPlaying

This indicates if the animation player is currently playing a clip. It’s handy if you want to trigger some environmental event when the animation is playing.

Vector2 CurrentCell

This is the current cell in the current clip. This is the bit we really need in order to extract the right frame from the sprite sheet, and it includes the coordinates for the frame we need to draw.

int CurrentKeyframe

This may be useful if we want to play a sound when a specific frame is reached.

event AnimationStopped OnAnimationStopped

This event can be subscribed to and is triggered when an animation stops. This is great for looping clips, and you can use this to chain one animation clip after another.

SpriteSheetAnimationClip CurrentClip

This is the clip that is currently in use or is ready to be used.

TimeSpan CurrentTime

This is the current time in the clip being played, and it will range from zero to the duration of the clip.

Dictionary<string, SpriteSheetAnimationClip> clips

This is the container for all the clips we will want to play for a given sprite sheet. We can use this to move from one clip, let’s say from Idle to WalkLeft.

The constructor for the SpriteSheetAnimationPlayer is pretty simple: we just pass it the clips we have just generated and the time offset we want to use.

Code Listing 11: VoidEngineLight – Animation player constructor

We can now use the StartClip and StopClip to—you guessed it—start and stop the animation clips.

StartClip

Code Listing 12: Animation Player StartClip

As you can see, we have an overloaded function for StartClip since we may wish to start a clip by name, or if we already have the clip, just pass and use that.

The first thing we do is ensure the clip we are working with is valid—that is to say it's not null and it's not the clip we are currently working with. We then set the current time to zero, plus any time offset we want to use. We set the frame to the frame we want to use, the current clip to the one passed in, and finally, set IsPlaying to true. This sets up our clip to be played, and will kick off the logic in our Update method (we will come back to that in a little while).

StopClip

Code Listing 13: Animation player StopClip

As with StartClip, the first thing we do is check the clip we are working with and check that we are currently playing. If we have a valid clip and we are indeed playing, we simply set IsPlaying to false, and if anything is subscribed to our OnAnimationStopped event, we let it know it's stopped.

Update

Code Listing 14: Animation player Update

This is almost where the magic happens. Again, we check whether the current clip is valid. If it is, then we call GetCurrentCell, passing the elapsed game time, and this is where all the work is done.

GetCurrentCell

Code Listing 15: Animation player GetCurrentCell

As you can see, this is the workhorse of the SpriteSheetAnimationPlayer class. The first thing we do is add the clip’s current time to the elapsed time passed in. If that time value is longer than or equal to the clip duration, then we need to set the time back to the start of the clip.

If our time ends up being less than zero or greater than the clip duration, we need to throw a controlled exception to indicate there is an issue with the time. If we left it to run, we would get an ArgumentOutOfRangeException thrown when we try to get the current cell later, so we might as well know about it sooner rather than later.

If time is now less than the current time, then we must have reached the end and looped back to the start. So, we check if this clip is looped, and then we just set the current frame to 0 so we can start the animation again. If it’s not, then we set the current frame to the last frame in the clip and call the StopClip function. As we saw in the previous code listing, this will stop the clip and inform any subscribers to the event that it has stopped.

If we’ve come this far, we are still playing the animation clip. We get a list of the keyframes from the current clip and loop through them to find the current cell coordinates. We do this by checking if the keyframe's time is greater than the current time. If it is, then the last frame is the frame we are currently on, so we break out of the loop here. If it isn't, then this frame could be the frame we are on, so we store it and move on the current keyframe.

Animation clips

In both the SpriteAnimationClipGenerator and the SpriteSheetAnimationPlayer we have spoken about animation clips, but what do they look like in code?

Code Listing 16: VoidEngineLight – Animation clip

They are pretty much just a storage class for the data required for a given clip, including a list of all its keyframe data.

Keyframes

Code Listing 17: VoidEngineLight – Keyframe

Again, this is a storage class for the keyframe data. The Cell gives the starting X and Y position in the sheet and the Time gives the duration the frame is displayed.

Playing animation clips

We now have a set of animation clips and an animation player that can give us the data at runtime in order to draw the cell we want as an animation plays, but we have no way of bringing these together.

If we return to our GameplayScreen class and the Activate method, we can see we have a Sprite class.

Code Listing 18: GameplayScreen.cs

This code initializes our player avatar, passing in the sprite sheet we used to generate the animation clips, the size we want to render our player at, and the physical cell size in pixels. We then give it an instance of the SpriteSheetAnimationPlayer populated with our extracted animation clips, and finally, tell it so start the Idle animation clip.

Animation in action

Sprite class

Code Listing 19: Sprite.cs

The Sprite class is used as the base class for all our in-game sprites. It has a number of properties:

Vector2 Position

This is the position of the sprite on the screen.

Point CellSize

This is the physical size of a given cell in our sprite sheet in pixels.

Point Size

This is the size in pixels we want to draw our sprite.

Texture2D spriteTexture

This is our sprite sheet texture used to render our sprite.

SpriteSheetAnimationPlayer animationPlayer

This is a populated instance of the SpriteSheetAnimationPlayer we discussed previously. When we add an animation player, we wire up to its OnAnimationStopped event. If we already have a player, we unwire ourselves from its OnAnimationStopped event.

Color Tint

We can use this to “tint” the color of our sprites if we want.

Rectangle sourceRect

This is what we use to know what part of the sprite sheet we want to render. If there is no animation player, then we assume that it must be the whole texture we want to render. If there is an animation player, then we use the cell size that we have been given to set up its height and width.

The constructor for the class is simple enough. We pass in the sprite sheet, the size we want to render, and the cell size in the sprite sheet and store them for later use.

OnAnimationStopped

While not currently implemented here, it may be by derived classes.

StartAnimation

This method will start a given animation clip if we have an animation player.

StopAnimation

This function will stop an animation clip if we have an animation player.

Update

This method, if we have an animation player, calls its Update method.

Draw

Finally, we get to draw our sprite using the texture provided, set the destination rectangle on the screen, use our calculated source rectangle, and tint the sprite based on the tint color we have.

Moving our character

We now have all the elements in place for us to be able to animate and move our player avatar. Return to the GameplayScreen class; this time we will go into its HandleInput method.

Code Listing 20: GameplayScreen.cs HandleInput

Here, if the screen is not paused, we can specify what animation we want to have played by our player avatar. We can press the Down arrow key to play the WalkDown animation, the Up arrow key to play the WalkUp animation, the Left arrow key to play the WalkLeft animation clip, and the Right arrow key to play the WalkRight animation clip. If there is no input, we play the Idle animation.

Now, in the Update method in the GameplayScreen class we can move our animated player avatar based on the animation being played.

Code Listing 21: GameplayScreen.cs update

If the screen is active, we call our player avatar’s Update method, set a translation speed, and then look to see what animation clip is being played. If the WalkDown animation is playing, then the player avatar moves down the screen. WalkLeft will move our player avatar to the left, and WalkRight moves the player avatar to the right. When the WalkUp animation is playing—you guessed it—the avatar is moving up the screen.

Finally, we do a quick check to make sure that our player avatar can't escape the screen.

What’s next

We now have a framework for creating and animating sprites within our game, whether that sprite is our player, an NPC, or even the environment and equipment. Now we need a framework for creating our player characters and giving them characteristics, skills, and classes.