About

Sprite sheet animation is the backbone of 2D game rendering and pixel art workflows. A single miscount in your frame grid - wrong column or row value - produces torn frames, offset characters, and hours of debugging. This tool slices any bitmap sprite sheet into its constituent frames by computing each frame's source rectangle as x = col × frameW and y = row × frameH, where frameW = Wcols and frameH = Hrows. It then plays them back at a user-defined FPS with delta-time accumulation, guaranteeing frame-rate-independent timing regardless of monitor refresh rate.

Onion skinning overlays prior frames at decreasing opacity - a technique borrowed from traditional cel animation - so you can evaluate motion arcs without scrubbing frame by frame. The GIF exporter encodes frames using a native LZW compressor built into the browser's memory, producing a valid GIF89a binary. No server round-trip, no external dependency. Limitation: color quantization uses a median-cut palette of 256 colors per frame; sprite sheets exceeding that gamut will exhibit banding in the exported GIF. For pixel art with limited palettes this is typically irrelevant.

Formulas

Each frame's source coordinates in the sprite sheet are derived from the linear frame index:

col = i mod cols

row = ⌊icols⌋

sx = col × Wcols

sy = row × Hrows

where i is the current frame index (0-based), cols and rows define the grid, and W, H are the full sprite sheet pixel dimensions.

The animation loop uses delta-time accumulation for frame-rate independence:

acc = acc + Δt

if acc ≥ 1000FPS then advance frame, reset acc

where Δt is the elapsed milliseconds since the previous requestAnimationFrame callback and acc is the time accumulator.

Reference Data

Term	Definition	Typical Value
Sprite Sheet	Single image containing all animation frames in a grid	Power-of-two dimensions preferred
Frame Width	W ÷ cols	16 - 256 px
Frame Height	H ÷ rows	16 - 256 px
FPS (Frames Per Second)	Playback speed of animation	8 - 24 for pixel art
Frame Interval	1000FPS ms	41.7 - 125 ms
Total Frames	cols × rows	4 - 64
Onion Skin Depth	Number of previous frames shown transparently	1 - 5
Delta-Time Accumulation	Sum of elapsed ms since last frame advance	Varies per monitor
LZW Min Code Size	Starting bit width for GIF LZW compression	2 - 8 bits
GIF89a	Graphics Interchange Format with animation extension	Max 256 colors per frame
Median-Cut Quantization	Palette reduction algorithm splitting color space	256 output colors
Source Rectangle	Region in sheet: (sx, sy, sw, sh)	Pixel coordinates
requestAnimationFrame	Browser API syncing rendering to display refresh	60 Hz typical
Ping-Pong Loop	Animation plays forward then reverses	Used for walk cycles
Pixel-Perfect Rendering	`imageSmoothingEnabled = false`	Critical for pixel art

Frequently Asked Questions

Any browser-decodable bitmap format works: PNG, JPEG, BMP, WebP, and GIF (static). The sheet must use a uniform grid - every frame occupies the same pixel rectangle. Non-uniform atlases (texture packs with variable-size regions and JSON metadata) are not supported; those require a different tool that parses the atlas descriptor.

By default the tool disables imageSmoothingEnabled on the canvas for pixel-perfect rendering. If your source art is anti-aliased (non-pixel-art), the hard pixels at zoom may look jagged. This is correct behavior for pixel art. For smooth-art sprite sheets, the visual at 1× zoom is accurate; the zoom feature is designed for pixel inspection.

The exporter applies median-cut color quantization, reducing each frame to a 256-color palette. Sprite sheets with gradients or photographic textures will exhibit color banding in the GIF output. For pixel art - which typically uses fewer than 64 colors - this quantization is lossless in practice.

Yes. Use the Start Frame and End Frame controls to define a sub-range of the grid. The tool plays frames sequentially within that range. For arbitrary reordering or exclusion, export individual frames as PNGs and reassemble in a dedicated sequence editor.

The browser's requestAnimationFrame fires at the monitor's refresh rate - typically 60 Hz. Setting FPS above 60 will not produce faster playback on a 60 Hz display. The frame interval formula 1000FPS bottlenecks at 16.67 ms. For 120 Hz displays, values up to 120 FPS are achievable.

Onion skinning is a preview-only overlay. Exported PNGs and GIFs contain only the single active frame per output - no ghost frames are composited into the export data.