This tutorial is kind of a long one, so I’ve broken it up into three separate pages. On this first page, we will look at what a texture atlas is, and how it can be used, as well as preparing our content for the rest of the tutorial. On the second page, we will create a class that will handle a texture atlas, and finally, on the third page, we will use this class to do 2D animation with a texture atlas.
In other tutorials, we have done a lot of work with basic 2D drawing.
Of course, one of the things people want to do next is 2D animation.
It is pretty easy to simply draw a sprite at different locations on the screen to show an object moving around.
But imagine that we have a game where the player controls a character that walks around on the screen.
In addition to having the character move, we would also want it to look like it is walking.
This is commonly done using a technique called a texture atlas or texture strip.
This tutorial will walk us through the process of doing 2D animation using a texture atlas, and in the meantime, it will help us see some of the more advanced features of 2D drawing and the SpriteBatch class.
Let’s say we have a character like the one below:
If we want to have this character walking or jumping around on the screen, we would first need to set it up so that we can draw this texture at different locations on the screen. We would probably also want to have multiple versions of him at different stages of the walk, like below:
To do this, we could make a texture at each of the different stages that we want, and then draw the right one at the right time. However, having all of these little textures can actually be quite inefficient. Often, it is more efficient to put all of these various textures together into one big texture. This is called a texture atlas. A texture atlas gets its name because it is a collection of texture maps. A collection of real-world maps is called an atlas, so a collection of texture maps gets the name texture atlas. Below is an example of a texture atlas, which we will be using during this tutorial.
This texture atlas contains 16 different frames of our character walking. Frame 1 is in the top left corner, and the frames go across the row, and then down to the next row when the end of the row is reached, as shown below:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
Note that texture atlases are not just confined to being used as an animation. Many games will place completely unrelated textures within the same texture atlas.
Download this texture and add it to your project like we have done before, with the link below:
In the next part of the tutorial, we will make a class that will handle 2D animation with texture atlases.