Animador de Pixel Art

A animação de pixel art é o processo de criar a ilusão de movimento exibindo uma sequência de 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.

O princípio fundamental da animação de pixel art é 'esmagar e esticar' — deformar a forma do personagem para criar uma ilusão de peso e impacto. Quando um personagem pula, ele se estica ao subir e esmaga ao aterrissar. Esta técnica, emprestada da animação tradicional, dá vida e personalidade a sprites que de outra forma pareceriam rígidos.pe 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).

GIFs animados são autossuficientes -- um único arquivo contém todos os quadros e informações de tempo, e poden 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.