Drop an image into the editor, tell the importer how big one frame is, and you have a sprite sheet. The rest is cleanup: arrange the grid, play the animation at your engine's fps, fix stray pixels, recolor if you want variants, and export in a format your engine reads. There is nothing to install.
Keep the editor open in another tab and follow along. The screenshots are of the real interface.
What You Need
Any of these works as a starting point: a batch of PNG frames, one existing sprite sheet, or an animated GIF. You do not need an account, and your frames stay in the browser while you work.
Several PNGs dropped at once become one frame each. A single image opens the importer, which offers to slice it. After that the steps are the same either way.
Step 1: Import and Slice
Drag an image onto the editor or click Add image. A single image always opens the importer, because the editor cannot tell whether it is one sprite or twenty four sprites packed together.
There are three ways to cut it, plus a fourth for GIFs:
- Even grid fits almost every sprite sheet. Enter the cell size (say
32x32), or the number of columns and rows, and the preview updates as you type. The line under the inputs does the math for you:192x128px -> 6x4 cells. If that is not the count you expected, the cell size is wrong. - Detect sprites looks for separate shapes against the background and boxes each one. Use it for sheets with no consistent spacing. If two sprites come out as one box, move the Sensitivity slider toward "More sprites"; if one sprite gets split, move it toward "Fewer sprites". Merge nearby sprites and Connect diagonal pixels help with detached bits like a floating sword.
- Atlas reads the data file that came with the sheet and uses its rectangles as they are: TexturePacker or Phaser JSON, Sparrow XML, or a Cocos2d
.plist. Rotated frames are turned back upright. Pick this whenever you have the data file. - GIF frames only shows up for GIFs and pulls out each frame of the animation.
Skip empty cells drops fully transparent cells, so a 6x4 grid with two blanks imports as 22 frames. Keep cell padding keeps each sprite at its position inside the cell, which matters if your frames are deliberately off-center.
If the image is not a sheet at all, click Use as single sprite at the bottom left.
Step 2: Arrange the Grid
Confirm the import and the frames appear on a grid.
The controls you will use most:
| Control | What it does | When you need it |
|---|---|---|
| Columns | Frames per row | Matching what your engine expects, or keeping the sheet roughly square |
| Force Size | Locks every cell to fixed dimensions | Frames of different sizes that your engine wants on a uniform grid |
| Padding | Transparent gutter around every cell | Thin seams or bleeding at sprite edges. See packing and padding |
| Trim Transparent | Crops empty borders off each frame | Shrinking a sheet before packing |
| Alignment | Snaps sprites to an edge inside their cells | Keeping a character's feet on the same baseline |
Drag a frame to move it. Multi lets you select several at once, Swap exchanges two cells, and Frames in View Options numbers every cell so you can see the order.
The Grid / Packed toggle in the top bar switches between a uniform grid and a MaxRects-packed atlas with the empty space squeezed out. A grid is easier to read and for engines to slice. Packed is smaller.
Step 3: Check the Animation
Open the Preview tab to see the frames move.
Set Speed (FPS) to the rate your engine will use. Twelve is a reasonable default; the basics guide has a table of how 8, 12, and 24 look. Onion skinning ghosts the frames on either side of the current one, which shows a limb that jumps a pixel between poses.
The preview plays visible frames in grid order. If a walk cycle looks scrambled, the frames are out of order on the canvas. Go back to the Editor tab, turn on frame numbers, and drag them into sequence.
Step 4: Fix Pixels in Place
For a stray pixel you do not need another program. Open the Draw tab and pick the frame.
The tools are pencil, eraser, fill, eyedropper, line, rectangle, ellipse, and select, with undo and redo. Onion skin works here too, so you can line a fix up against the neighboring frames. Save frame puts the edit back into the sheet.
Step 5: Recolor
The Recolor tab changes colors across every frame at once.
The live filter covers hue, saturation, brightness, contrast, sepia, and invert, with a few presets. It only changes the preview until you bake it into the frames. There is also a per-color map for swapping specific colors. The palette guide covers both and how to use them for enemy variants.
Step 6: Export
The export buttons sit at the top of the sidebar. PNG and WebP save the sheet image, JSON the frame data, and ZIP every frame as its own file. GIF renders the animation at an fps you choose, which is handy for a devlog or an itch.io page.
For an engine, use Format:
- Phaser / PixiJS: JSON atlas, TexturePacker-compatible
- Aseprite: Aseprite-compatible JSON atlas
- Godot: a
SpriteFramesresource (.tres) for anAnimatedSprite2D - Tiled: JSON tileset (
.tsj) - CSS Sprites: ready-made classes for the web
- Sparrow / Starling XML: the
TextureAtlasformat Friday Night Funkin also reads. Set the animation name in the dialog and frames export asidle0000,idle0001, and so on
Unity does not need a data file: export the PNG and slice it in the Sprite Editor. The engine import guide has step-by-step settings for Godot, Unity, Phaser, and Construct, including the filter setting that keeps pixel art from going blurry.
Where to Go Next
- Sprite sheet basics if terms like atlas and cell size are new
- Packing and padding if thin seams show up around sprites in game
- Pixel-perfect scaling if the art is sharp here and blurry in your game
No account, nothing to install. Open the editor
Try it in the editor
The editor is free and needs no account. Open it in another tab and work through the steps above with your own frames.