Sprite animation

Why you need this

A game character spends its whole life in a small set of loops: standing, walking, running, jumping, attacking, getting hit, dying. Each loop is a short stack of drawings shown in order, and each drawing is a full sprite that someone has to make. The frame count decides both how the motion feels and how many hours the character costs, so the counts and the key poses are decided before the first frame is drawn. This is stage 3 of the pipeline, "make it move", and it depends on stage 2 having produced one still sprite that reads at 1x.

The idea

A frame is one drawing of the sprite. A cycle is an ordered list of frames that plays back with a duration per frame, and usually loops. A key pose is a frame that defines the motion; the frames between keys are in-betweens. Pixel art uses far fewer in-betweens than film animation because the sprite is tiny and each frame is expensive relative to its size.

Timing is given in milliseconds per frame, with the 60 frames-per-second equivalent in parentheses: 100 ms (6 frames at 60 fps) is a common walk speed. Frames do not have to share a duration. A hold is a frame that stays on screen longer than its neighbors, and uneven holds are the main tool for making a small frame count feel alive.

Standard cycles

Cycle	Frames	Typical ms per frame	Notes
Idle	2 to 4	200 to 400 ms (12 to 24 frames at 60 fps)	Breathing; slow
Walk	4, 6, or 8	100 to 150 ms (6 to 9 frames at 60 fps)	6 is the usual compromise
Run	6 to 8	60 to 80 ms (4 to 5 frames at 60 fps)	Body leans forward; both feet leave the ground
Jump	3 to 4 poses	Driven by physics, not a timer	Crouch, rise, apex, fall; the engine picks the pose from velocity
Attack	3 to 5	Uneven: 80 / 50 / 100 / 100 ms	Anticipation, strike, recovery
Hit	1 to 2	100 to 150 ms (6 to 9 frames at 60 fps)	Often just the sprite pushed back and flashed white
Death	4 to 6	100 to 200 ms (6 to 12 frames at 60 fps)	Non-looping; the last frame holds

The jump row matters: a jump is not a timed loop. The engine looks at the character's vertical velocity and shows the crouch pose while the button is pressed, the rise pose while velocity is upward, the apex pose near zero, and the fall pose on the way down. Three or four drawings cover every jump height.

The walk cycle

A side-view walk has four named poses per step, and a full cycle is two steps (left foot forward, then right foot forward).

• Contact: one foot lands out front, the other is behind. Legs are furthest apart. The body is at its normal height.
• Down (recoil): the front knee bends to take the weight. The body is at its lowest point.
• Passing: the back leg swings forward and passes the planted leg. The body rises through normal height.
• Up: the planted leg pushes off, the body is at its highest, and the swinging leg reaches forward to become the next contact.

For a 6-frame walk you draw contact, down, and up for the first step, then the same three for the second step with the legs swapped. Passing is skipped, or rather it happens between frames. Body y offset is measured in pixels, positive is downward, relative to the standing height.

Frame	Pose	Body y offset	Leg forward	Arms
1	Contact	0	Left	Right arm forward, left back
2	Down	+1	Left (bent)	Arms passing the hips
3	Up	-1	Left planted, right swinging	Left arm forward, right back
4	Contact	0	Right	Left arm forward, right back
5	Down	+1	Right (bent)	Arms passing the hips
6	Up	-1	Right planted, left swinging	Right arm forward, left back

Arms swing opposite to legs: when the left leg is forward, the right arm is forward. The head follows the body offset, so it bobs down on frames 2 and 5 and up on frames 3 and 6. At 16 pixels the whole bob is 2 pixels of travel; at 32 pixels it can be 2 or 3.

The 4-frame version drops the down poses and keeps contact and passing: contact left, passing, contact right, passing. The body offset is 0 on the contacts and -1 on the passings. It reads as a walk because the contact pose is the one the eye recognizes; it feels lighter and bouncier than the 6-frame cycle, which suits small enemies and 8-pixel or 16-pixel characters. The 8-frame version adds passing back in on both steps for 32-pixel and larger characters.

Idle breathing

An idle is 4 frames with 1 or 2 pixels of vertical motion, timed slowly. A 16-pixel character breathes 1 pixel; a 32-pixel character can breathe 2.

Frame	Body y offset	Duration
1	0	300 ms (18 frames at 60 fps)
2	-1	200 ms (12 frames at 60 fps)
3	-1	300 ms (18 frames at 60 fps)
4	0	200 ms (12 frames at 60 fps)

Only the torso and head move; the feet stay planted. If the whole sprite is shifted, the character looks like it is hovering.

Attack with anticipation

An attack is where uneven timing pays off most. The anticipation frame (wind-up) draws the weapon back, the strike frame swings it through, and recovery frames return to idle.

Frame	Pose	Duration
1	Wind-up: weapon pulled back, body coiled	80 ms (5 frames at 60 fps)
2	Strike: weapon extended, body leaning in	50 ms (3 frames at 60 fps)
3	Recovery: weapon dropping, body returning	100 ms (6 frames at 60 fps)
4	Recovery: nearly idle	100 ms (6 frames at 60 fps)

The strike is held for the shortest time. The eye catches the extremes on either side of it and fills in a fast swing. A strike held as long as the wind-up looks like the character is pointing, not hitting.

Worked example

Here is a 6-frame walk reduced to the parts that move. The grid shows the legs and the ground line for frames 1 to 3 of an 8-pixel-wide side-view character; the torso above is unchanged apart from its y offset.

Frame 1 (contact)   Frame 2 (down)     Frame 3 (up)
. . . 1 1 . . .     . . . . . . . .    . . . 1 1 . . .
. . . 1 1 . . .     . . . 1 1 . . .    . . . 1 1 . . .
. . . 1 1 . . .     . . . 1 1 . . .    . . . 1 1 . . .
. . 2 . . 3 . .     . . 1 1 . . . .    . . . 1 1 . . .
. 2 . . . . 3 .     . 2 . 3 . . . .    . . 2 3 . . . .
2 . . . . . . 3     2 . . . 3 . . .    . 2 . . 3 . . .
= = = = = = = =     = = = = = = = =    = = = = = = = =

. transparent, 1 torso, 2 back leg, 3 front leg, = ground.

In frame 2 the torso has dropped one row, and the front leg has bent under it. In frame 3 the torso has risen one row above frame 1 and the legs are close together at the pass. On frame 4 the picture is frame 1 with 2 and 3 swapped.

Sub-pixel animation

The sprite is too small to move an arm by half a pixel, so instead you move a highlight or an edge by one whole pixel. Shifting the single highlight pixel on a shoulder one pixel left, then back, implies the shoulder rotated. Shifting the bottom edge of a cloak down one row implies it swayed. The form did not move; one pixel of color did, and the eye reads it as small motion.

Secondary motion

Hair, a cloak, a tail, a scarf: anything attached to the body lags one frame behind it. When the body is at its highest on frame 3, the hair reaches its highest on frame 4. Draw the body cycle first, then add the secondary parts by copying each body frame's position and delaying it one frame.

Looping and reuse

A cycle loop plays 1, 2, 3, 4, 5, 6, 1, 2, ... The last frame must flow into the first, so frame 6 (up, right planted) leads into frame 1 (contact, left forward), which is exactly the next step. A ping-pong loop plays 1, 2, 3, 4, 3, 2, 1, ... and suits symmetric motions like breathing or a flag waving; it is wrong for a walk because feet would move backward.

Reuse: the passing pose from the left step, mirrored horizontally, is the passing pose from the right step. In the 4-frame walk that means you draw 3 unique frames, not 4.

Onion skinning

Any editor with an onion-skin view shows the previous and next frames as faint overlays while you draw the current one. Use it to keep the feet on the ground line and the head bob to one pixel per frame. It is a checking tool, not a drawing tool: draw the key poses with onion skin off so each pose is a strong drawing on its own.

Mirroring and asymmetry

Side-view characters face two directions. Draw one, mirror it in the engine for the other. The catch is asymmetry: a sword in the right hand becomes a sword in the left hand when mirrored, and a shoulder pad or a scar swaps sides. Options, in order of cost: design the character symmetric; accept the swap (most players never notice a weapon hand); or draw the asymmetric parts as a separate layer and mirror only the body.

In a game's art pipeline

Stage 3, make it move. The frame counts here are written down alongside the resolution and palette from stage 1 so every character in the cast gets the same treatment. The finished frames go to Sprite sheets and export, where each cycle becomes a row of the sheet with per-frame durations in the data file. Effects that accompany attacks and landings are in VFX and particles. Character proportions and facing directions, which set how many cycles you must draw, are decided in Character design for sprites.

Common mistakes

• Sliding feet. The planted foot must move backward across the sprite at the same speed the character moves across the ground. If the character moves 1 pixel per frame at 100 ms per frame, the planted foot moves back 1 pixel per frame. Any mismatch reads as ice skating.
• Even timing on everything. Every frame at 100 ms gives a metronome. Hold the contact pose longer in a walk; hold the strike shorter in an attack.
• Too many frames for a tiny sprite. An 8-frame walk on a 16-pixel character has frames that differ by one pixel, and the motion turns to mush. Use 4 or 6.
• Head bob without foot contact. If the body rises and falls but the feet never visibly plant, the character floats. The down pose must show a bent knee under the weight.
• Ping-pong on a walk. Feet appear to reverse. Walks and runs are cycle loops only.

Cost

A 16-pixel character with the seven standard cycles at the low end of the table is 2 + 4 + 6 + 3 + 3 + 1 + 4 = 23 frames per facing direction. At the high end it is 4 + 8 + 8 + 4 + 5 + 2 + 6 = 37. Each frame of a 16-pixel character is a small drawing, but a 32-pixel character takes roughly four times the work per frame, and each extra facing direction multiplies the whole count (see Character design for sprites for the multiplication). In file size the frames are trivial: 37 frames of 16 by 16 pixels is under 10 kilobytes as an indexed PNG. The cost is artist time, and it hurts first when a design change (a new hat, a different weapon) has to be redrawn across every frame of every cycle. Lock the still before animating.

Going further

• Animation timing basics, for spacing, ease-in and ease-out, and why holds work.
• Character design for sprites, for the facing-direction count that multiplies everything here.
• VFX and particles, for the hit flash and dust that sell an attack.
• Sprite sheets and export, for per-frame durations in the data file.
• Richard Williams' "The Animator's Survival Kit", by name, for the walk cycle poses in full detail.