How All of This Works

Before we start looking at the implementation, let’s first take a few steps back and learn more about how a series of sprites in a sprite sheet can end up creating an animation. Our sprite sheet looks as follows:

Displaying the full sheet would take up too much space, but there are a few more circles beyond what you see here.

For simplicity, I am going to replace our sprite sheet with just solid colored circles to explain what is going on. The secret magic sauce to a sprite animation is to display just a single sprite at a time:

It doesn’t matter how big or small your sprite sheet is. All users will ever see is just that one single sprite. To display the next sprite, we show the contents of our next sprite:

We keep going through our sprite sheet displaying each individual sprite. All of this is very sudden. Users will never see the transition from one sprite to another. All they will see is the end result of a sequence of images replacing each other. What you get is an animation in the most traditional sense. Really quickly replacing one picture with another is how hand-drawn animations and film strips basically work. What we are going to be doing isn't going to look a whole lot different than that!