The Sprite Sheet
Before you can animate sprites from a sprite sheet, you first need a sprite sheet. Don’t start panicking just yet. If you don’t have a sprite sheet, you can just use one that I have already created here: https://www.kirupa.com/images/sprites_final.png (This is the same sprite sheet I will be using in our explanation and code, so I encourage you to use it if this is your first foray into creating animations from sprites.)
Now, if you are brave enough to want to create your own sprite sheet, then there are a variety of tools out there that can help you out with this. My favorite is Flash Professional’s Generate Sprite Sheet functionality:
If you Google around, you’ll find many other solutions that people rave about. Covering how to create a sprite sheet goes beyond the scope of this tutorial, but whatever tool you use, just make your sprite sheet meets the following two criteria:
- Each sprite in your sprite sheet is evenly sized.
- The sprites you wish to animate are arranged on a single row. Some tools like to break up the sprites into a single column or a combination of rows and columns! We don’t want that.
If all of this boggles your brain, just use the sprite sheet from the URL I provided earlier. You can always experiment with your own sprite sheet once you’ve learned all about how to use and manipulate them.