Images to sprite sheet

How to make a sprite sheet from images

This workflow starts with separate animation frames and ends with one predictable PNG sheet. You will choose a layout, preserve the intended frame order, check every cell, and export metadata only when your engine needs it.

Reviewed July 20268 minute guide

What you will accomplish

You will pack a sequence of same-size frames into a regular grid, preview the animation before export, and download a PNG sheet that can be sliced reliably in a game engine.

Open the sprite sheet maker

Before you start

Two or more PNG, JPG, or WebP frames. Transparent PNG is the safest choice for pixel art and character animation.
A known playback order. Number filenames with leading zeroes, such as walk-01.png, walk-02.png, and walk-03.png.
Consistent canvas dimensions when possible. Equal-size frames produce the most predictable grid and engine import.

Step-by-step workflow

1
Prepare and name the source frames
Put one animation pose in each image and verify that every frame uses the same canvas size and character origin.
- Keep the character's feet, pivot, or effect center at the same pixel position in every frame so the animation does not wobble.
- Use numbered filenames because the tool keeps the selected file order. A clear sequence also makes later debugging easier.
- Remove accidental empty borders unless your animation deliberately needs them for motion.
2
Add the frames to the tool
Open the image-to-sheet mode and select the complete frame sequence in playback order.
- Check the frame count immediately after loading. A missing or duplicated pose changes the animation timing.
- If the order is wrong, clear the workspace and select the correctly named sequence again.
- All processing stays in the browser; the source artwork is not uploaded to a server.
3
Choose a grid that matches the frame count
Use a regular grid for engine import, or a horizontal strip when the sequence is short and your runtime expects one row.
- For 8 frames, a 4 by 2 grid is compact and easy to slice. For 6 frames, 3 by 2 or 6 by 1 both work.
- The largest source frame defines the cell size. Smaller frames are centered inside that cell.
- Avoid leaving unused cells between animation frames because some importers treat every cell as a frame.
4
Set spacing, padding, scale, and background
Start with zero spacing and zero outer padding when you plan to slice by a fixed cell size in Unity or Godot.
- Keep scale at 1 for the original pixel dimensions. Scaling during packing can soften non-pixel artwork or distort pixel art.
- Use a transparent background for sprites unless the target format explicitly needs a solid color.
- Add spacing only when your renderer requires texture bleeding protection and your import settings account for the same gap.
5
Preview the animation and inspect the sheet
Play the generated frames in the preview before downloading anything.
- Watch for a jump in the character position, an out-of-order pose, or a differently sized canvas.
- Confirm that transparent edges are intact and no frame touches a neighboring cell.
- Record the output cell width, cell height, columns, and rows; those values become your engine slicing settings.
6
Export the PNG and optional metadata
Download the PNG sheet first, then export generic JSON or Phaser JSON only if your game pipeline reads atlas coordinates.
- The JSON coordinates are calculated from the same packed layout as the PNG, so export both from the same workspace state.
- Use ZIP export when you also want a clean copy of the individual frames.
- Open the downloaded PNG once and verify its pixel dimensions before importing it into the engine.

Recommended settings

Setting	Recommended value	Why it matters
Layout	Grid	A regular grid is the easiest format to slice by cell size or row and column count.
Spacing and padding	0 px to start	Edge-to-edge cells avoid offset calculations during a first Unity or Godot import.
Scale	1×	Preserves the exact source pixels and prevents an unnecessary resampling step.
Background	Transparent	Keeps sprite silhouettes usable over different game backgrounds.
File format	PNG	PNG supports transparency and lossless pixel data.

Check the result

The exported width equals cell width × columns when both spacing and padding are zero.
Every frame occupies one predictable cell and appears in playback order from left to right, then top to bottom.
The animation preview has no visible jump caused by inconsistent canvas alignment.
The downloaded sheet retains transparency and does not show a white or colored rectangle behind the sprites.
If JSON was exported, its frame coordinates match the final PNG rather than an earlier layout.

Common mistakes

Mixing canvas sizes without checking alignment

The packer can accept mixed-size images, but centering a smaller frame may shift the intended pivot. Normalize source canvases first when exact engine alignment matters.

Sorting filenames as plain numbers

Names such as frame-1, frame-10, and frame-2 are easy to select in the wrong order. Use frame-01 through frame-10 and confirm the preview.

Adding spacing without carrying it into the importer

A 2 px gap changes every frame origin. Either keep spacing at zero or enter the same spacing and offset in the engine's slice settings.

Frequently asked questions

What size should each sprite frame be?

Use the native size of your artwork and keep every frame canvas consistent. Powers of two are not required for each frame; the final texture constraints depend on your target engine and platform.

Should a sprite sheet have spacing between frames?

Not always. Zero spacing is simplest for fixed-grid slicing. Add spacing only when your rendering pipeline needs it and your importer can use the same spacing value.

Can I make a sprite sheet from different-size images?

Yes. The tool uses the largest frame as the cell and centers smaller images, but you should inspect pivot alignment carefully before using the result for animation.

Do I need JSON with the PNG?

No for a regular grid that your engine can slice by cell size. JSON is useful when a runtime expects named frame rectangles or when you use a non-grid atlas workflow.

Continue with another workflow

How to convert a GIF to a sprite sheet

Convert an animated GIF into a PNG sprite sheet in your browser while preserving frame order and checking the original frame timing.

How to import a sprite sheet into Unity 6

Prepare a regular sprite sheet, import it into Unity 6, slice it by cell size, and build a clean 2D animation without blurry pixel art.

How to animate a sprite sheet in Godot 4

Prepare a regular sprite sheet, add its frames to AnimatedSprite2D in Godot 4, and verify grid selection, speed, looping, and pixel quality.

Open the free tool

Open the sprite sheet maker

Before you start

Two or more PNG, JPG, or WebP frames. Transparent PNG is the safest choice for pixel art and character animation.

A known playback order. Number filenames with leading zeroes, such as walk-01.png, walk-02.png, and walk-03.png.

Consistent canvas dimensions when possible. Equal-size frames produce the most predictable grid and engine import.

Step-by-step workflow

Prepare and name the source frames

Put one animation pose in each image and verify that every frame uses the same canvas size and character origin.

Keep the character's feet, pivot, or effect center at the same pixel position in every frame so the animation does not wobble.
Use numbered filenames because the tool keeps the selected file order. A clear sequence also makes later debugging easier.
Remove accidental empty borders unless your animation deliberately needs them for motion.

Add the frames to the tool

Open the image-to-sheet mode and select the complete frame sequence in playback order.

Check the frame count immediately after loading. A missing or duplicated pose changes the animation timing.
If the order is wrong, clear the workspace and select the correctly named sequence again.
All processing stays in the browser; the source artwork is not uploaded to a server.

Choose a grid that matches the frame count

Use a regular grid for engine import, or a horizontal strip when the sequence is short and your runtime expects one row.

For 8 frames, a 4 by 2 grid is compact and easy to slice. For 6 frames, 3 by 2 or 6 by 1 both work.
The largest source frame defines the cell size. Smaller frames are centered inside that cell.
Avoid leaving unused cells between animation frames because some importers treat every cell as a frame.

Set spacing, padding, scale, and background

Start with zero spacing and zero outer padding when you plan to slice by a fixed cell size in Unity or Godot.

Keep scale at 1 for the original pixel dimensions. Scaling during packing can soften non-pixel artwork or distort pixel art.
Use a transparent background for sprites unless the target format explicitly needs a solid color.
Add spacing only when your renderer requires texture bleeding protection and your import settings account for the same gap.

Preview the animation and inspect the sheet

Play the generated frames in the preview before downloading anything.

Watch for a jump in the character position, an out-of-order pose, or a differently sized canvas.
Confirm that transparent edges are intact and no frame touches a neighboring cell.
Record the output cell width, cell height, columns, and rows; those values become your engine slicing settings.

Export the PNG and optional metadata

Download the PNG sheet first, then export generic JSON or Phaser JSON only if your game pipeline reads atlas coordinates.

The JSON coordinates are calculated from the same packed layout as the PNG, so export both from the same workspace state.
Use ZIP export when you also want a clean copy of the individual frames.
Open the downloaded PNG once and verify its pixel dimensions before importing it into the engine.