Upload a sprite sheet and preview the animation with adjustable frame size, speed, and playback controls.
A sprite sheet packs several animation frames into one image, and this tool plays them back for you without any game code. You upload the image, enter the pixel size of a single frame, and the preview crops and cycles through the cells in row order at a speed you set, with play, pause, and step controls. The mistake most people make first is the frame size: the crop only lines up when the width and height you enter match the sheet's grid exactly, so a wrong number shows as a sliding, bleeding animation rather than an error. The image never leaves your browser.
A concrete input and expected output from the current implementation.
Input
walk.png, a 256 x 64 image holding four 64 x 64 frames in a row. Enter frame width 64, frame height 64, speed 8 fps.
Expected output
The preview crops and plays the cells at (0,0), (64,0), (128,0) and (192,0) in order, looping. Each frame shows for 0.125 s and the 4-frame cycle repeats every 0.5 s. Pausing lands on exactly one 64 x 64 cell with no bleed from its neighbors.
256 / 64 gives 4 columns and 64 / 64 gives 1 row, so 4 frames total. At 8 fps each frame lasts 1/8 s (0.125 s), and 4 frames x 0.125 s = 0.5 s per loop.
Frame indexing comes from the numbers you enter: the sheet is divided into columns by frame width and rows by frame height, and each frame occupies the cell at (column x frameWidth, row x frameHeight). Frames play left to right, top to bottom, so the total count is columns x rows. If either dimension does not divide the sheet cleanly, the crop windows straddle cells and the preview visibly misaligns.
The speed control sets frames per second: each frame stays on screen for 1 divided by the speed, and the cycle wraps from the last frame back to the first, so one loop takes frame count divided by speed seconds. Play and pause start and stop the timer, and stepping moves one frame at a time, which is how you inspect each crop while the animation is frozen.
The frame size you entered does not match the sheet's real grid, so each crop window straddles two cells and the picture drifts with every tick. Re-open the sheet in the tool that exported it, read the exact cell size (and any padding or margin between cells), and enter those numbers. When they are right, pausing freezes a single clean frame.
No. The preview plays the sheet at the rate you set: exactly 8 frames per second, per loop. Most games render at 60 fps or more and advance sprite animation on their own timer, so the same sheet can run faster or slower in the engine. Use the preview to validate the frames themselves, and set the final pacing in your game.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.