Pixel Art Animation Fundamentals

Overview

Pixel art animation relies on a small number of frames to convey movement convincingly. Unlike high-frame-rate animation, pixel art typically uses 4-8 frames per action, making each frame count. The key is choosing the right frames and timing them correctly.

spritesynth generates multi-frame states for characters and objects. You can adjust frame timing in the editor and preview playback before exporting.

Step 1: Understand Frame Counts by Animation Type

Step 2: Generate a Walk Animation

Create a character state with the appropriate frame count for walking:

curl -X POST https://api.spritesynth.com/v1/characters/{character_id}/states \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "walk",
    "direction": "east",
    "frame_count": 4,
    "frame_width": 32,
    "frame_height": 32,
    "frame_duration_ms": 150
  }'

Step 3: Preview and Adjust Timing

Open the character in the pixel art editor to preview the animation. Adjust frame duration per-state:

curl -X PUT https://api.spritesynth.com/v1/characters/{character_id}/states/{state_id} \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "frame_duration_ms": 200
  }'

Slower durations (200-300ms) work for heavy characters; faster (80-120ms) for agile ones.

Tips

• Idle needs movement — Even idle animations should have subtle motion: breathing, weight shifts, or blinking.
• Walk cycles need a contact frame — The frame where both feet touch the ground is critical for selling the motion.
• Test at game speed — Preview animations at the speed they'll play in your engine, not in slow-motion editing mode.