Sprite sheet maker
Put separate images into one sheet, in the order you choose, and take the atlas file your engine reads along with the PNG.
Loading
Your files stay on your device.
A packer that keeps frames in animation order.
Files sort the way you numbered them
walk_2.png comes before walk_10.png. Plain alphabetical sorting puts 10 first and scrambles the animation, which is the most common way a packed sheet goes wrong.
The animation plays as you arrange it
Move a frame along the list and the preview in the corner updates. You find a swapped pair of frames here, not after importing.
Every cell the same size
Images of different sizes are centred in cells as large as the biggest one, so the sheet stays a regular grid that any engine can slice by cell size.
Atlas, Godot and CSS exports
Download a JSON atlas for Phaser and PixiJS, a Godot 4 SpriteFrames .tres, a Sparrow XML for Friday Night Funkin’, or copy a CSS animation that plays the sheet.
Loose frames to one sheet.
- 1
Drop all your frames on the dark panel at once, or press Upload images. They are placed in numbered order.
- 2
Reorder or remove frames in the list, then choose the layout, spacing and margin. The sheet redraws as you go.
- 3
Press Download PNG, and take the JSON, .tres, XML or CSS if your project needs it.
What a sprite sheet maker does
Art programs save animation frames as separate files: run_01.png, run_02.png and so on. A game is quicker to load and draw with all of them in one image, and several engines and web techniques only accept that form. A sprite sheet maker is the step between the two. It lines the frames up on a grid, keeps them in order, and writes the result as one PNG.
The tool on this page does exactly that and stops there. It doesn’t draw, generate or edit sprites.
Getting the order right
Order is the whole point of an animation sheet, and it is where packers most often fail. Files are sorted by name with numbers read as numbers, so frame_2 precedes frame_10 whether or not you padded with zeros. The list on the right shows the sequence with a thumbnail of each frame; the arrows move a frame one place earlier or later and the × removes it.
Watch the small looping preview while you do this. A frame in the wrong place shows as a stutter, and it’s much easier to see than to work out from file names.
Adding more images later appends them to the end of the list, so you can build a sheet from several folders, one animation after another.
Grid, row or column
For a single animation going into a game engine, Grid gives the most compact texture. For the web, Row is easier to animate with CSS. If you are assembling a character sheet with one animation per row, set Custom columns to the number of frames in each animation and add the frames in row order.
| Going into | Layout | Also take |
|---|---|---|
| Unity | Grid | Nothing; slice by the cell size shown |
| Godot 4 | Grid | The .tres, or enter Hframes and Vframes |
| Phaser, PixiJS | Grid | JSON atlas |
| CSS | Row | Copy CSS |
| Friday Night Funkin’ | Grid | Sparrow XML |
Spacing, and when you need it
With spacing at zero the frames touch. That’s fine for pixel art shown with no filtering. If your game scales or rotates sprites with smoothing on, the graphics card blends each edge pixel with its neighbour, and at the border of a cell the neighbour belongs to the next frame. The result is a thin line of the wrong image along one side. One or two pixels of spacing fixes it. Margin does the same job for the outer edge of the sheet.
Whatever you set here has to be entered in the engine as well, or its slices will drift. The readout under the controls states the cell size together with padding and offset in Unity’s terms.
Sheet size and powers of two
The sheet’s pixel size is shown above the preview. Two limits matter. The first is the largest texture the target device can load: 4096 px per side is a common safe ceiling for phones, and older or low-end devices stop at 2048. The second is memory. A 4096×4096 sheet takes 64 MB uncompressed however small the PNG file is, so a sheet with a lot of empty cells is costing you something.
Power-of-two sheet pads the image to sides of 256, 512, 1024 and so on. Current engines don’t demand it for sprites, but some texture compression formats and mipmapping still work better with it. I’d leave it off unless your engine or platform guide asks for it.
Common mistakes
The character jumps around between frames. The source images were cropped to the character, so each has a different size. Export them again at one canvas size, or cut them with the sprite sheet cutter in Auto-detect mode, which pads frames to a common size aligned by the feet.
Edges look soft after scaling. Scaling below 100% smooths the image, which suits painted art and ruins pixel art. Keep pixel art at 100% or enlarge by whole hundreds; to enlarge a finished sprite cleanly, use the pixel art upscaler.
The engine’s slices are off by a few pixels. Spacing or margin was set here and not in the engine. Either enter them there or set both back to zero.
If your animation is a GIF or a video and not a set of files, start from the GIF to sprite sheet converter, which has the same layout and export options.
Questions
Something else? Email hello@giftospritesheet.com.