Sprite Animation: Frame by Frame
How still images become living characters
How still images become living characters
Animation is an illusion: show slightly different images fast enough and the brain sees motion. Adjust the frame rate to see how speed affects smoothness.
All animation frames packed into a single image. The game engine shows one frame at a time by sliding a viewport across the sheet. This is how every 2D game loads its art.
The red rectangle shows which frame is currently displayed. It slides across the sheet.
A character has multiple animations: idle, walk, run, jump. The game switches between them based on player input. Click each state to see the transition.
Every 2D game uses sprite animation. The techniques you just learned apply to all of them.
Mario has idle, walk, run, jump, fall, slide, and swim animations. Each is a set of frames triggered by game state.
Street Fighter characters have 50+ animation states. Each move is a carefully timed sequence of frames with hit/hurt boxes on specific frames.
Characters face four directions (up, down, left, right) with walk cycles for each. That is 4 directions * 4+ frames = 16+ sprites per character minimum.
The original Super Mario Bros (1985) had only 3 frames of walking animation and used a single sprite mirrored for left/right. With just a few frames and clever design, Nintendo created one of the most recognizable characters in history.
You've learned how sprite sheets, frame timing, and state machines turn static images into living, responsive characters. Every 2D game character you have ever played uses these exact techniques.
A sprite animation is a sequence of images played quickly. Like a flipbook: each page is slightly different, and your brain fills in the motion.
Instead of separate image files, all frames are packed into one image (sprite sheet). The game shows one rectangle at a time, sliding across the sheet.
More frames per second = smoother animation. But each frame must be drawn. 8-12 fps is common for pixel art. 24+ fps for smooth animation.
Idle, walk, run, jump, attack. Each state has its own animation. The game switches between them based on input. This is a state machine.
Put your new knowledge into practice!