A sheet that looks fine as a grid can still pop, slide or stutter in motion. Opening the engine to check every tweak is slow. This previewer plays the sheet at the FPS you set, at pixel-perfect zoom, with onion skin to check spacing between frames, ping-pong for idles, and per-row playback for sheets that hold several animations or directions.
How to use the Animation Previewer
- Drop a sprite sheet (the grid is detected), several frame PNGs, or an animated GIF.
- Correct rows and columns if needed. For multi-row sheets, pick one row to play a single animation or direction.
- Set the FPS. The preview shows milliseconds per frame too, which is what most engines ask for.
- Step through frames with the arrow keys, turn on onion skin to see the previous frame, and try ping-pong.
- Zoom with pixel-perfect scaling and switch backgrounds to check the sprite on dark, light and green.
- Export a GIF with the same speed, ping-pong and background.
What you get
- Live preview at 1–60 fps with frame stepping and keyboard shortcuts.
- Animated GIF at 1×–8× with transparent or solid background, ready for a devlog or store page.
Which engines it fits
- Use the FPS that looks right here as the animation speed in Godot (SpriteFrames speed), Unity (Sample Rate), GameMaker (sprite speed) or Phaser (frameRate).
- Row playback mirrors how most engines store 4- and 8-direction sheets: one row per direction.
Tips from making games with it
- Walk cycles usually look right between 8 and 12 fps; runs between 12 and 16; idles between 4 and 8.
- Onion skin shows the previous frame in blue. If a limb jumps a long way between two frames, add an in-between.
- If the character slides, the frames are not anchored the same way. Re-slice with bottom alignment in the Sprite Sheet Slicer.
- Check on a light background as well. Dark outlines that look fine on black can disappear on dark game maps.
Use cases
- Checking animation timing before importing into an engine.
- Reviewing sheets from an artist or an asset pack.
- Making a GIF of a sheet for social posts or a pitch deck.
- Comparing directions of an 8-direction character side by side, row by row.
FAQ
How do I control playback with the keyboard?
Space plays and pauses. The left and right arrow keys step one frame and pause.
What is onion skin?
It shows the previous frame faintly (tinted blue) under the current one, so you can see how far each part moves between frames and spot jumps.
Can it play only one row of a sheet?
Yes. When the sheet has several rows, choose a row to play just that animation or direction, or All to play every frame in order.
Does it support GIFs and loose frames?
Yes. Drop an animated GIF to play its frames, or drop several PNGs to play them in natural file-name order.
Is my sheet uploaded?
No. The preview runs entirely in your browser.
Why does my animation look blurry in other viewers?
Most viewers scale with smoothing. This one scales with nearest-neighbour, the same way a pixel-art game should be set up, so what you see here is what players see.