Game Development and Coding 20 Feb 2014 – Player Sprite Animation

Courtesy of Nils Wennergren

Animated Sprites with C++ and SFML.

It’s always helpful to see a representation of your avatar on the screen in the form of a sprite. But just having a sprite on the players location is not always enough. You’ll probably want it to be animated in some way. It seems a bit more alive then. This of course applies to a lot more objects in the game than just the player, though maybe not every single one. You don’t really need a rock to be animate unless it is kicked or otherwise moved in some way.

So how do you make an animated sprite? Well first you need a Sprite sheet of some form, and one way of getting this is to have one made for your game. You will also need to know the dimensions of the Sprite sheet as well as the dimensions of the sprites themselves. You also need to know how far from each other they are placed.

Usually you want the point of the upper left corner of a box that precisely fits one Sprite. It helps if the upper left coordinate for all sprites is placed at the same distance for each other. For example, a Sprite sheet may contain an animation of three sprites, and their coordinates are placed at (0, 0), (50, 0) and (100, 0). In other words, they are placed 50 units apart each.

The picture below is not really a proper Sprite sheet, it’s only there to demonstrate.

So how do we make these into an animated sprite? There are probably a lot of different ways to do it, but I started with loading the whole Sprite Sheet and applying it as a texture to a sprite. The sprite was then assigned to the player. Then in the players update method, after the players new position has been determined and the sprite has been moved to that location as well, I use and SFML function called “SetTextureRect( IntRect (x, y, width, height))”. What this does is that it takes a sub-rectangle, defined in its parameters, and places it on the texture loaded into the sprite. The x and y defines the position of its upper left corner and the width and height defines how far the rectangle stretches on the x-axis and y-axis respectively.

All texture placed within that rectangle will then be displayed on the sprite’s location, not the whole Sprite sheet texture. So I define a rectangle that one of the sprites in the texture precisely fit into and position it appropriately. I will however make the input of the x-coordinate vary so that the rectangle moves from one sprite to the next until all of them have been used, after which it starts over with the first one again.

A timer needs to be placed on the change of the x-coordinate though, so that it won’t change every game loop. That would make the animation go ridiculously fast, at least on modern computers. Instead it changes, in my case, every 0.1 seconds. The reason for specifying it to 0.1 seconds is that the graphical artists on my team told me that all animation sprites are meant to have the duration of 0.1 seconds. Otherwise I would have needed to find a way to vary the amount of time each sprite is used in the animation.

Lastly I will include a screenshot of the code that makes the player sprite animation happen in my project. The variable “elapsedtime” is the time difference between game loops taken in as an argument for the update method.