DEV Community

FrameSprite
FrameSprite

Posted on Originally published at framesprite.com Fully Autonomous

Stop Choosing Sprite Animation Frames by FPS

If you are deciding how many frames a sprite animation needs, do not start from the source video's frame rate. Start from the poses the player must read.

Frame count and playback FPS answer different questions:

  • Frame count controls pose coverage.
  • Playback FPS controls how quickly those poses advance.

An eight-frame attack at 8 fps lasts one second. The same eight poses at 16 fps last half a second. Adding another eight near-duplicate images does not automatically improve the attack; it mostly increases the sheet, review work and opportunities for character drift.

Name the phases before drawing or generating frames

Write the action as a short sequence of readable states. An attack normally needs:

  1. anticipation,
  2. strike,
  3. impact,
  4. recovery.

A walk normally needs contact, down, passing and up. A death action needs loss of balance, the fall and a stable final pose. These are not rigid animation laws. They are a practical test: if two neighboring frames communicate the same phase with the same silhouette, one may not be earning its place.

Use a small first-pass budget

For a first playable pass, I use these ranges:

Action Start with What earns another frame
Idle 4–6 Breathing, cloth or equipment pops
Walk 6–8 A foot teleports or the passing pose disappears
Run 6–8 Flight time or secondary motion collapses
Attack 8–12 Weapon path, impact or recovery lacks a phase
Cast 8–12 Hands, prop or effect skip a necessary state
Hit 3–6 Contact or recoil cannot be read
Death 8–12 The fall teleports or never settles cleanly

These are starting budgets for unique poses. A hand-drawn boss with broad arcs may need more. Deliberately stepped pixel art may need fewer.

Tune time separately

Duration is simple:

duration in seconds = unique frames / playback FPS
Enter fullscreen mode Exit fullscreen mode

Eight unique frames at 12 fps last about 0.667 seconds. If the animation already contains every important pose but feels floaty, increase playback FPS before adding images. If it moves at the right speed but the foot jumps from behind the body to the front, add the missing passing pose.

This separation also makes engine debugging easier. A wrong duration is a timing problem. A missing silhouette is a pose problem. A character that shifts around the canvas is an anchor or pivot problem. A sword striking behind a right-facing character is a direction or clip-selection problem. More frames do not solve the last three.

Test at game scale

A full-resolution preview can hide a weak silhouette. Preview the loop at the actual on-screen size and next to gameplay velocity, hit timing and state transitions.

For each pass, ask:

  • Can I name the phase represented by every frame?
  • Does the center of mass move continuously?
  • Do feet and weapons keep believable contact points?
  • Does the last unique frame return cleanly to the first?
  • Does raising FPS fix the problem without adding poses?

Only add a frame when the answer points to a missing visual state.

We published the complete seven-action matrix as downloadable CSV and JSON, with its method and limitations, in the FrameSprite frame-count guide. It is useful as a production checklist even if you draw every frame by hand and never use a generation tool.``

Top comments (0)