Pixel Art Animator

Pixel art animation is the process of creating the illusion of movement by displaying a sequence of static pixel art frames in rapid succession. Each frame is a small grid of pixels (typically 16×16, 32×32, or 64×64) that represents one pose of a character or object. When played back at 8-15 frames per second (fps), the brain perceives smooth motion. This technique was used in classic video games like Super Mario Bros., The Legend of Zelda, and Pokémon, and has experienced a renaissance in modern indie games like Celeste and Stardew Valley.

The fundamental principle of pixel art animation is 'squash and stretch' -- deforming the character's shape to convey weight, impact, and elasticity. A bouncing ball squashes (flattens) when it hits the ground and stretches (elongates) when it moves fast. A character's walk cycle alternates between a 'contact' pose (foot touching ground), a 'recoil' pose (body compressing), a 'passing' pose (one leg lifted), and a 'high point' pose (body extended). These principles, codified by Disney animators in the 1930s, apply equally to pixel art as to traditional animation.

Our tool implements a frame-based animation system: each frame is stored as a 2D array of color indices (or transparent), the timeline defines the order and duration of frames, and the preview player cycles through the timeline at the specified fps. The canvas renderer draws each pixel as a scaled-up square (e.g., a 16×16 frame rendered at 8x scale fills a 128×128 canvas) to maintain the crisp pixel aesthetic. For export, frames are encoded as an animated GIF using a GIF encoder library, or as a sprite sheet (all frames arranged in a grid on a single image).

Animated GIFs are self-contained -- a single file contains all frames and timing information, and can be displayed in any browser or image viewer without special software. However, GIFs are limited to 256 colors and use lossless LZW compression, resulting in large file sizes for complex animations. GIFs are ideal for sharing animations on the web, in chat applications, and in documentation.

Sprite sheets are the standard format for game engines (Unity, Godot, Phaser). All frames are arranged in a grid on a single image (e.g., a 4×4 grid of 32×32 frames creates a 128×128 sprite sheet). The game engine uses metadata (frame positions and dimensions) to extract individual frames at runtime. Sprite sheets support full color (PNG format) and are more efficient for game rendering because the GPU can load the entire sheet as a single texture. Our tool can export both formats -- use GIF for sharing and sprite sheets for game development.