How to Animate a Spritesheet

Quest Toolkit Guide 7

Animation is flipping through frames fast enough to look like motion. You draw the frames, then tell the engine which order and speed to play.

Draw the motion

Start with 4–6 frames for a walk cycle.
Keep feet on the same baseline.
Use onion skin to line up the next pose.
Idle can be 2 frames — subtle bob is enough for quests.

Frame timing

FPS = how many frames per second. 8–12 fps reads well for pixel art. 24 fps is smoother but more drawing work.

In Aseprite

Add frames in the timeline (duplicate, nudge limbs).
Set frame duration (e.g. 100 ms per frame).
Preview with Play.
Export sprite sheet when it loops cleanly.

In Godot

AnimatedSprite2D or AnimationPlayer. Build SpriteFrames: add animation name 'walk', insert frames from the sheet, set speed (fps). Flip h for facing left.

In Phaser

After load.spritesheet, create anims entry with start, end, frameRate, repeat. this.anims.create({ key: 'walk', frames: ..., frameRate: 10, repeat: -1 }).

Raw Canvas

Track frameIndex and timer. Each tick, advance index and drawImage the right source rectangle from the sheet.

Common fixes

Slidey feet → fewer frames or hold contact poses longer.
Buzzing edges → export at 1× scale, nearest neighbor.
Wrong frame order → label rows in the sheet file.
Too fast → lower frameRate or longer ms per frame.

Key answer

Animate a spritesheet by drawing 4–6 walk frames, setting 8–12 fps for pixel art, exporting the sheet, then defining animation name, frame order, and speed in Godot, Phaser, or Canvas.

FAQ

How many frames does a walk cycle need?

Four to six frames is enough for a readable walk cycle. Idle animations can be just two frames with a subtle bob for quest-sized art.

What FPS should pixel art animation use?

Eight to twelve frames per second reads well for pixel art. Twenty-four fps is smoother but requires more drawing work per animation.

How do I play spritesheet animation in Godot?

Use AnimatedSprite2D or AnimationPlayer, add a SpriteFrames animation, insert frames from the sheet, and set speed in fps. Flip horizontally for left-facing sprites.

Why does my spritesheet animation look wrong?

Common fixes: match frame size exactly, export at 1× with nearest neighbor, label frame order in the file, and lower frameRate if the motion is too fast.

All guides