Sprite Sheet
Animator

Upload a PNG, JPG, or WebP sprite sheet, then describe its regular grid with Columns and Rows. A four-by-four sheet uses four columns and four rows; a horizontal strip uses its frame count as columns and one row. Add spacing or offsets only when the source image contains gutters or an outer margin. Select Extract Frames, and the sprite sheet animator turns those cells into a playable sequence without sending the file to a server.

The first preview uses row-major order: left to right across the first row, then left to right across each following row. Confirm the frame counter advances in the order expected by the artist. Previous and Next stop playback and move one frame at a time, making it easier to find a duplicated pose, a missing contact frame, a clipped weapon, or a grid boundary that contains a neighbor.

Use the checkerboard background for transparent edge inspection. Dark is useful for pale effects and light is useful for dark outlines. The preview background is not exported or written into the source image. A sprite sheet viewer should help evaluate pixels under different conditions without modifying the asset being tested.

The core path is intentionally short: upload, set grid, play. This sprite sheet animator is not a painting program or timeline editor. It answers whether a sheet moves correctly, how the loop feels at a chosen speed, and whether the frame layout can be read reliably before the asset is integrated or converted.

FPS means frames per second. At 8 FPS, each frame stays visible for about 125 milliseconds. At 12 FPS, each frame lasts about 83 milliseconds. The same drawings can feel heavy, snappy, floaty, or frantic depending on this value. The sprite sheet animation tester updates while it is playing, so you can compare speeds without re-extracting the grid.

Choose speed from the intent of the action rather than a universal rule. Idle breathing may read at 4 to 8 FPS. A stylized walk often works at 8 to 12 FPS. Fast attacks may use 12 or 24 FPS but still rely on one or two held key poses. Pixel art sometimes benefits from deliberate low-FPS stepping because in-between frames can weaken the graphic shape.

The preview applies one duration to every frame. If an authored animation needs unequal holds, a fixed-FPS sprite sheet player usually represents them by repeating a frame in consecutive cells or by storing timing metadata separately. Watch the frame counter to identify where a pause belongs before changing the sheet or engine configuration.

Browser rendering is scheduled by JavaScript and the display refresh rate, so this is a visual workflow tool rather than a timing laboratory. It is accurate enough to judge cadence and order. The game engine remains responsible for production timing, dropped-frame behavior, state transitions, and pausing when the application loses focus.

Loop returns from the last frame to the first. It suits walk cycles, idle effects, rotating pickups, and repeating UI states. Turn Loop off for a one-shot attack, hurt reaction, jump, or spell burst. The sprite sheet animator stops on the final displayed frame when a non-looping sequence completes, which makes the intended end pose easy to inspect.

Reverse reads the extracted indices backward. This is useful for quickly testing whether an opening motion can serve as a closing motion, whether a dissolve can rebuild an object, or whether a door animation can be reused. Reverse does not rewrite the PNG. It only changes the preview order, so you can compare without damaging the source asset.

Ping-pong moves to the last frame and then returns through the interior frames. The endpoints are not duplicated on the turn, preventing a subtle extra hold. Ping-pong works well for hovering, breathing, charging, pulsing, and mechanical oscillation. It is usually wrong for locomotion because a reversed walk changes foot mechanics and world motion.

Reverse and ping-pong can be combined. The resulting sequence begins at the original last frame, moves toward the first, and then returns. Use the frame counter rather than guessing which source cell is active. A sprite sheet player is most useful when playback rules remain explicit and reversible.

Begin with silhouette readability. Pause on each key pose and ask whether the action is recognizable without effects. Then play at the target FPS and watch the spacing between positions. Large changes create speed; small changes create slow movement. If the body seems to wobble in place, compare feet, hips, and head against stable visual anchors.

Next inspect grid accuracy. A one-pixel error can make the sprite jump because each frame is cropped from a slightly different origin. Spacing entered as part of the cell will shift every cut after the first. Offset errors affect the whole sequence. Return to the Sprite Sheet Cutter when you need a numbered overlay and exact frame dimensions.

Check the seam between the last and first frame for loops. A clean loop does not require identical frames, but motion direction and spacing should continue naturally. For one-shot actions, disable looping and confirm the final frame is appropriate to hold before the game returns to another state.

When the preview is correct, use Sprite Sheet to GIF to produce a shareable review file with the same FPS, order, loop, reverse, and ping-pong choices. For engine use, keep the original PNG and reproduce those settings in the runtime. The sprite sheet animator changes no source pixels and creates no hidden project state.