arrow_back Back to Home

How to Animate a Simple 4-Frame Walk Cycle

Creating a walk cycle for a 2D game character might seem intimidating, but in pixel art, especially for top-down RPGs or simple platformers, you can achieve a great looking animation using only 4 frames. Here is how you can do it using the timeline in PixelPad Pro.

Frame 1: The Contact Pose (Idle/Standing)

This is your starting point. The character is standing with both feet on the ground. In a traditional 4-frame cycle, this is often the frame where the character's right leg is planted firmly on the floor and the left leg is slightly back.

Frame 2: The Passing Pose (Step 1)

Open the Timeline in PixelPad Pro, duplicate Frame 1, and turn on the Onion Skin tool so you can see a ghost image of the previous frame.

Now, erase the character's legs and redraw them so that the right leg remains straight, but the left leg bends upward as it prepares to step forward. Pro tip: Move the character's body (torso and head) exactly 1 pixel UP to simulate the natural bounce of walking.

Frame 3: The Second Contact Pose

Duplicate your frame again. This frame mirrors Frame 1, but the legs are swapped. Now the left leg is firmly planted forward on the ground, and the right leg is in the back. The torso drops back down by 1 pixel.

Frame 4: The Second Passing Pose (Step 2)

Duplicate the frame one last time. This mirrors Frame 2. The right leg bends upward to pass the planted left leg. The torso moves 1 pixel UP again.

Setting the FPS and Testing

Once you have your 4 frames on the timeline matrix, go to the bottom panel and set the FPS to 8 or 10. Press the Play button. You should now see a smooth, infinite walking loop!

When you are satisfied, hit the Export button and save your project as a Sprite Sheet to import it directly into Unity or Godot.

Adding Polish: Arm Swing and Head Bob

A basic 4-frame walk cycle can look robotic if the arms stay stiff. In a side-view platformer, arms should swing opposite to the legs — when the right leg steps forward, the right arm swings back. You don't need to redraw the arms from scratch each frame. At 32x32 resolution, moving a 3-4 pixel cluster representing the arm by just 1-2 pixels per frame is enough to sell the motion convincingly.

The head bob we described earlier (1 pixel up on passing frames) also contributes enormously to the sense of weight. A character that floats at a perfectly fixed Y position looks like they are sliding, not walking. Even on a 16x16 sprite, that single pixel of vertical movement is the difference between a character that feels alive and one that feels pasted onto the world.

Common Walk Cycle Mistakes

Equal spacing between frames: Real walking has moments of acceleration and deceleration — the foot plants and there is a brief moment of stillness (the "held" frame) before the next step begins. Try duplicating Frame 1 and Frame 3 (the contact poses) once to give them slightly more screen time than the passing frames. This makes the walk feel heavier and more grounded.

Forgetting the silhouette: Before adding any color, check that the silhouette of each frame reads clearly as a different pose. If two frames have nearly identical silhouettes, the animation will appear to "stutter" rather than flow. The four frames should form four clearly distinct shapes when viewed as black cutouts against a white background.

Exporting for Game Engines

In PixelPad Pro, once your 4-frame walk cycle is complete, click the Export button and choose Sprite Sheet. The editor will automatically lay out all four frames side by side in a single transparent PNG. In Unity, import the PNG and use the Sprite Editor to slice it into four equal sections. In Godot, use AnimatedSprite2D and import the sheet with the correct frame dimensions. Set the animation speed to 8-10 FPS and your character will walk across the screen perfectly.