This post first appeared on www.vickiwenderlich.com.
Learn how to makes sprites for a simple animal running character!
Specifically, we are talking about simple animations of four-legged creatures running (not walking or trotting).
The operative word here is SIMPLE. This means that the animation is small and not a lot of detail is required.
For main characters or larger animations, you will want to create more complicated animations with more sprites, which is not the focus of this article.
How Many Sprites Do You Need For a Simple Animal Running Character Animation?
Two. You can certainly add more sprites, but for a basic animal running character, you only need two. It will be a bit jagged, which is why it works best for small characters where a lot of detail is not required.
Body Positions For A Simple Animal Running Character Animation
Below are the two poses of an animal running.
The two positions are pretty simple: legs apart as they are stretching out, and legs together as they get ready for another leap.
When animals such as a cat or dog run, they are essentially leaping. Even though it is a four-legged animal, when running their front legs act as one unit, and their back legs act as one unit. It is a simplification of what actually happens, but visually it works.
Note that there is very little, if any, rise and fall happening here (rise and fall is the natural up and down motion of a running or walking body). In more complicated running animal characters you will see rise and fall, but not in a two-sprite animal figure. If you feel the animation really needs rise and fall (it will depend on the animal), you can add it by moving the animal in the second sprite up a pixel or two.
Applying The Stick Figures To Your Character
My character is a dust bunny, an NPC (non-player character) that just runs around and gets killed when the main character runs them over. Here’s how the two sprites to animate him turned out:
Basically it just involved rotating the legs and repositioning them a bit so that they looked natural (but for a dust bunny, who can tell?) I also rotated the ears a tiny bit to give the animation more movement, as if the ears are waving.
Here it is in action:
So yes, it’s rough, but it works. Adding sprites would smooth it out. Also, you are seeing it at twice the size it “really” is, since I made it for the iPhone retina. The smaller it is, the less detail you need.
If you have questions or comments, please add them below! What objects or characters would you like to see a similar analysis for?