How to Make a Sprite Sheet: A Step-by-Step Guide

Sprite Sheet vs Individual Image Files

Separate images are perfectly reasonable for a few static objects. A sheet becomes useful when you want a related collection to travel together, share one texture, and keep a predictable frame order. It can reduce separate file requests, but it is not a guarantee of faster rendering. Texture size, batching, engine settings, and the rest of your scene still matter.

For animation, keep a common canvas around every pose. A character can lean or lift a foot inside that canvas without changing the cell size. Cropping every pose tightly may save space, but it also changes the origin unless your importer tracks trimming offsets.

What a JSON Atlas Contains

An atlas is the map beside the image. Each named entry records a rectangle: x and y locate its top-left corner, while w and h describe its size in pixels. Our first frame starts at x = 0; the second starts at x = 66 because its neighbor occupies 64 pixels and the gap occupies two. The image and its map must be exported together whenever the layout changes.

"001-frame_01.png": {
  "frame": { "x": 0, "y": 0, "w": 64, "h": 64 },
  "rotated": false,
  "trimmed": false,
  "duration": 125
}

Step 1: Open Your Frames

Extract the sample ZIP first, then select its six PNG files in the Frames input. You should see six thumbnails and six frames in the workspace. Their natural filename order puts frame_01 before frame_02. Check the first and last poses rather than assuming the file picker preserved the order you clicked them.

At this point, the preview may use the default four-column layout. That is expected: loading files and choosing the final layout are separate actions. All six original images are still present. The next step changes where they appear in the combined image, not the content inside each pose.

Step 2: Set Columns, Order, Padding and Spacing

Set Columns to 6, Padding to 0, and Spacing to 2. All six poses should now appear in one horizontal row. The sheet dimensions should read 394 × 64. If they do not, inspect the input dimensions and settings before continuing. A single 65-pixel-wide source frame changes the common cell width and therefore the entire output calculation.

Use the thumbnail arrows or drag a frame to change its position. For this example, leave the numbered poses in their original sequence. The tool reads left to right, then top to bottom. Spacing is the distance between neighboring cells; padding is the border outside the complete sheet. They are different settings and should not be substituted for each other when configuring an importer.

Step 3: Preview the Animation

Play the animation at 8 FPS and watch several loops. Look for a foot sliding sideways, an accidental duplicate, a missing pose, or a jump between the final and first frames. Pause and choose individual thumbnails when you need to inspect a transition. A consistent origin often matters more than adding more poses.

The preview changes which existing frame is shown. It does not alter the drawing or add intermediate motion. Changing FPS affects perceived speed, not pose quality. When the loop looks right, keep the same rate in your game’s animation settings; importing a PNG alone does not communicate that speed.

Step 4: Export the PNG and the JSON

Keep Transparent background enabled, then download the PNG and JSON together using the ZIP button. The current filenames are sheet.png and atlas.json. The ZIP also includes the selected import guide. You can use the separate PNG only and JSON only buttons, but save both from the same layout to avoid mismatched coordinates.

Open the downloaded image and confirm its dimensions are 394 × 64. Keep the JSON beside it, even if your current engine uses manual slicing. Downloading is also your save step: the workspace is held in this browser tab rather than a cloud project. Refreshing the page does not restore your previous selection.

Unity: Sprite Editor and Sprite Atlas

Import sheet.png as Sprite (2D and UI), choose Multiple for Sprite Mode, and open Sprite Editor. Use Grid by Cell Size with 64 × 64 cells. Match the outer offset to zero and the space between cells to two pixels. Inspect the six rectangles before applying them, then put the resulting sprites into playback order in an animation clip. Keep a consistent pivot and choose Pixels Per Unit for your scene.

Sprite Editor slicing and Sprite Atlas are separate operations. Slicing defines the source regions; a Sprite Atlas can later pack sprites for runtime use. You do not need to create an atlas asset merely to animate this example. For pixel art, review filtering and compression rather than assuming an editor preview matches the final game.

Unity Sprite Editor reference

Godot: AnimatedSprite2D and SpriteFrames

Create an AnimatedSprite2D and a SpriteFrames resource. Godot’s sheet selector is convenient for an evenly divided image without gaps. Our 394-pixel example includes two-pixel separators, so dividing its width into six equal pieces would include the wrong pixels. Use six AtlasTexture regions instead: each is 64 × 64 at the x positions listed above, with y set to zero.

Alternatively, re-export the same six frames with zero spacing and padding. That produces a 384 × 64 image which can be divided into six columns and one row. Add the poses in order and set the animation speed to 8 FPS. Those are two different valid imports; do not mix the gap-free grid counts with the spaced source image.

Godot 2D sprite animation guide

GameMaker: Import as a Sprite and Set the Grid

Create a Sprite asset and use Import Strip or the image editor’s Convert to Frames workflow. For the spaced example, choose 64 × 64 cells, six frames, zero outer offset, and two pixels of horizontal separation. Check the extracted subimages before confirming, then keep the same origin across them and set a suitable animation speed.

GameMaker’s filename shortcut expects a continuous horizontal strip. To use it, first re-export with zero spacing and padding, giving a 384 × 64 image, then name it character_strip6.png. Renaming the 394-pixel spaced sheet to that filename is insufficient: the shortcut would divide the gaps into the frames. The JSON is a useful coordinate reference here, not an editor import plugin.

GameMaker strip image documentation

Phaser: Load the JSON Atlas

Place the matching PNG and JSON in your game’s asset folder and load them with this.load.atlas. The JSON already describes the two-pixel gaps, so you do not need to reconstruct a regular-grid stride. Create an animation with the exported names in order. The example below shows scene methods to adapt inside your Phaser project; it is not a complete game or an editor plugin.

The selected preview speed is 8 FPS, which corresponds to 125 milliseconds per frame. Configure that rate explicitly. If you later use variable GIF frame delays, read and apply those durations rather than assuming one fixed rate will reproduce the timing. Re-export the image and JSON together whenever the layout changes.

preload() {
  this.load.atlas("ranger", "/assets/sheet.png", "/assets/atlas.json");
}

create() {
  const names = [1, 2, 3, 4, 5, 6].map((n) =>
    `${String(n).padStart(3, "0")}-frame_${String(n).padStart(2, "0")}.png`
  );
  this.anims.create({
    key: "walk",
    frames: names.map((frame) => ({ key: "ranger", frame })),
    frameRate: 8,
    repeat: -1
  });
  this.add.sprite(160, 120, "ranger", names[0]).play("walk");
}

Phaser atlas loader documentation