Pixel art galleries

Tutorial: Walking animation for low-res sprites

In this tutorial I'll talk about a few simple ways to animate a walk cycle for low-resolution sprites. When I'm designing small animated sprites, I generally choose one of three basic walking configurations:

The two-frame walk cycle

Good for: Tiny sprites only; 32 pixels high at the very most, but I'd recommend only using this for sprites that are more like 24 pixels high or smaller.

The two-frame walk cycle is easy to do and was very common in old NES games and stuff like that. The two frames generally show A) the legs apart and B) the legs close together or overlapped. There's a small psychological trick going on when you look at a sprite like this; the idea is that your brain should see this as four frames of animation; so that the first time the legs are apart, the left leg is forward, then the legs come together and pass each other, then the next time the legs are apart the right leg is forward, etc. Take a look...


Frame 1

Frame 2

Frame 1

Frame 2

The animated 2-frame walk cycle

See? You can pretend you're seeing each foot come forward separately. A key to getting this animation right is making sure that the lighting on the two legs is roughly equal; equal amount of highlights and shadows on each leg. In the 4- and 8-frame versions we'll see how using different lighting on the legs can help the animation, but in this case it will only hurt.

Another key to getting this right is doing your best to make sure that neither leg looks like it's closer to the viewer than the other one. We need to be able to pretend, for example, that in the legs-apart frame (frame 1) it could be either the left or the right leg that's out in front. See how the legs are evenly separated by a one-pixel-wide black line? If one leg were overlapping the other, it would always look like that leg were in front, and our hero would look like he was sticking the same leg out front every time. Take a look at an example of how NOT to do this:


An example of what NOT to do

Here I made his left leg much brighter than his right, and very obviously overlapped the left one onto the right in both frames, so it's clear the brighter leg is always closer to the viewer. So it definitely looks like he's just putting his right leg forward and left leg back again and again.

The 2-frame walk cycle is a challenge to get right no matter what, since it all relies on the illusion you're trying to create that there are four frames. This cycle is perhaps better-hidden in a running animation, when the two frames can be sped up:

Increasing the framerate, making the legs a little bit farther apart, and adding a bounce are all it takes. Frame 2 stays exactly the same.

The four-frame walk cycle

Good for: Small sprites only; no taller than 32 pixels.

The four-frame walk cycle is very similar to the two-frame cycle, and in fact if you're already created the two-frame cycle you can easily modify it to be four frames.

Your four-frame cycle will do exactly what we were only mimicking in the two-frame cycle. We'll show one leg go forward, then the legs pass each other, then the other leg goes forward, and then they pass each other again, etc.

This time, it's okay to show different lighting on the two legs, and in fact it will really help the animation look like the legs are taking turns going forward. I recommend choosing the "front" leg (i.e. the one closest to the viewer, or the guy's left leg in these examples) as the brighter leg, and putting the other one in the shadows, since we're mostly seeing the inside of that leg and not much light would be hitting it.

Interestingly, the challenge of the four-frame walk cycle is making it look like it's not two frames! This is why shading the legs differently will help. The other thing that will help is making slight variations in the positioning of the two individual legs as they come forward. You'll notice our hero is not truly in profile; if he were, we wouldn't be able to see the front of his neck and chest, his belt buckle, etc. He's turned slightly to his left. Now, if he WERE truly in profile, both legs would stick out in front of him to the exact same point while he's walking. But since he's turned a little to his left, when his right leg comes forward, we should see it come a little further out than his left.


Frame 1

Frame 2

Frame 3

Frame 4

The animated 4-frame walk cycle

Compare frames 1 and 3 and see how in frame 1, the legs are slightly further apart; the front leg is one pixel further out front, and the back leg is one pixel further out back. Also, see how the highlighted leg switches from the front to back for frames 1 and 3. You can watch the animation and follow the highlighted leg as it goes back and forth through its four-frame cycle.

In this case, I also changed the highlighting on the in-between frames, frames 2 and 4, but this isn't always necessary. Often you can reuse the same frame for 2 and 4 and the animation still works fine, if that in-between frame has a neutral-enough look about it, like frame 2 from our two-frame cycle above.

Now, let's compare our two-frame and four-frame walking cycles:


2-frame walk cycle

4-frame walk cycle

The eight-frame walk cycle

Good for: Medium to large sprites, from 24x24 all the way up to fighting game character size (100+ pixels). The eight-frame cycle probably won't work well at all on sprites smaller than 24 pixels high; stick with two or four for those guys.

The eight-frame walk cycle is a lot of work, but the effect can be really impressive. The two main methods I use for creating eight-frame walking cycles are A) drawing the pair of legs for all eight frames by hand, and B) drawing all eight frames for just one leg, then doubling those layers and sequencing the legs to alternate their motion. For this tutorial, I'll show the second (and much easier!) method.

To set up this exercise, I'm going to take our hero, delete all frames but the first, and then delete his legs entirely.

I'm going to creat eight new layers, one for each pose of the leg we're going to animate.

The basic walking cycle for one leg will show his foot stopping at eight different points that make up a rough oval shape:


the 8 positions of the foot in the walk
cycle, give or take a pixel here or there

The above diagram doesn't go into the file I'm animating; it's just to show the reader the approximate placement of the foot in the eight-frame cycle. You can see that the foot will come forward and fall down, and then slide back on the ground for a couple frames, then lift up as it goes behind the body, then come forward as it raises up, then come to the front as it gets ready to fall to the ground again. This is what I'm going to try to animate for just one leg (to start), in eight frames.

There's no one way I always do this; I might start by drawing the eight instances of the foot in the eight empty layers, and then build the rest of the leg up from there, or might I might draw each entire leg at the same time. The important thing is to keep the cycle of motion in mind so you know exactly how much movement you need to show from frame to frame.

When you're drawing those legs and feet, think about how your legs actually move when you walk. When the foot in front of you comes down, what part hits the ground first? The heel. When the foot behind you comes off the ground, what part comes up first? The heel. Make sure to incorporate these things into your frames, with a rolling motion from the heel to the toe, both when the foot lands and comes up.

One important thing I should mention is that it's best to do these complex animations with as few colors as possible (in this case, two) and then once you've got the movement working well, go back and shade and decorate the legs.

Here's the animation so far, with just one leg completed:


Frame 1

Frame 2

Frame 3

Frame 4

Frame 5

Frame 6

Frame 7

Frame 8

Hop... Hop... Hop...

Now I just put my leg layers into a layer set, duplicate that layer set (to create the other leg), place the new layer set beneath the first one, and change the sequencing so the legs alternate their movement. So, for the first leg, I displayed leg layer 1 on frame 1, leg layer 2 on frame 2, and so forth. For the duplicate leg, I'm going to display leg layer 5 on frame 1, leg layer 6 on frame 2, etc. I'm also going to slide the whole new leg layer set over to the left by one or two pixels, so the legs aren't completely overlapped. Let's take a look...


Frame 1

Frame 2

Frame 3

Frame 4

Frame 5

Frame 6

Frame 7

Frame 8

Getting there...

It works, but it's not perfect. Now that I have a fully working animation, I can clean things up pixel by pixel on each frame to get a smoother-looking motion. I'm also going to make the character's body bob up and down. He'll go up for two frames and down for two frames, and repeat that pattern. He should go down while his front foot is hitting the ground, and up when that foot is directly beneath him, pushing him upward. In this case, he'll go up on frames 3 and 4, and 7 and 8.

I'm also going to add in the color and shading for all the leg frames. Remember, I'm going to make the leg that's closer to the viewer appear brighter, with more highlights, to set it apart from the other, darker leg.


Frame 1

Frame 2

Frame 3

Frame 4

Frame 5

Frame 6

Frame 7

Frame 8

And that's about it! Look at him go. You can still clearly watch the highlighted leg go through its full cycle, and the same goes for the heavily shadowed leg. I changed a few pixels in the outlines here and there to get a smoother shape overall for some frames, and to retain a black outline all around for each frame.

Of course, there are all kinds of other things to consider. This guy is only 24 pixels tall — with a taller sprite, you might want the bobbing motion to cover a wider range of height. My guy's arms aren't moving at all, but if he weren't holding a weapon, it would probably be necessary to animate his arms swinging and shoulders swivelling to keep the motion pretty natural-looking. Keep in mind that the movement of the arms and shoulders is always the opposite of the movement of the legs, so, left foot forward, right arm forward. Aw, what the heck, let me give it a shot...

Okay, that wasn't too bad. Now here's a comparison of all the animations discussed above, and an extra one with a shield and different sword that I just threw in there...


2 frames

4 frames

8 frames

8 frames

As you can see, once you have the basic walking motion down, it's easy to modify the walking character and give him different features, items, etc. It's even fairly easy to use the same leg layer sets you made for this guy on different characters; you can just copy the layers over and modify them from there, rather than redraw all the leg frame every time for every sprite. The zombies and vampire sprites in my pixel art gallery use the same exact walking animation as above, somewhat modified.

Okay, that's enough for now. Feel free to e-mail me if you have any questions. Good luck and happy pixelling...

Back to Pixel art

Back to top