Sprite Sheet Editor

What Is a Sprite Sheet?

A sprite sheet (texture atlas) packs multiple individual images into one PNG file arranged on a grid. Game engines load one large texture rather than hundreds of small ones, which reduces GPU draw calls, lowers memory overhead, and speeds up rendering dramatically.

Building Your Sheet

1. Upload any number of images via the drop zone or file picker.
2. Set Frame Width and Frame Height. Every sprite is scaled to fit this size exactly.
3. Choose Columns to control how many sprites appear per row. Rows are calculated automatically.
4. Add Padding pixels between frames to prevent texture bleeding on certain GPUs when mipmaps are enabled.
5. Use the arrow buttons to reorder sprites. Order determines the grid position (left to right, then top to bottom).
6. Click Export PNG + JSON to download both files.

JSON Atlas Format

The exported JSON follows the standard TexturePacker / Pixi.js atlas format. Each entry maps a frame name to its pixel coordinates inside the sheet:

{
  "frames": {
    "player_idle": {
      "frame": { "x": 2, "y": 2, "w": 64, "h": 64 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "sourceSize": { "w": 64, "h": 64 }
    },
    "player_run_0": {
      "frame": { "x": 68, "y": 2, "w": 64, "h": 64 },
      ...
    }
  },
  "meta": {
    "image": "spritesheet.png",
    "format": "RGBA8888",
    "size": { "w": 268, "h": 134 },
    "scale": "1"
  }
}

Using the Atlas in Pixi.js

// Pixi.js v7+
const sheet = await PIXI.Assets.load('spritesheet.json');
const sprite = new PIXI.Sprite(sheet.textures['player_idle']);
app.stage.addChild(sprite);

Using the Atlas in Phaser 3

// In preload():
this.load.atlas('sprites', 'spritesheet.png', 'spritesheet.json');

// In create():
this.add.image(x, y, 'sprites', 'player_idle');

// For animations:
this.anims.create({
  key: 'run',
  frames: this.anims.generateFrameNames('sprites', {
    prefix: 'player_run_', start: 0, end: 7
  }),
  frameRate: 12,
  repeat: -1
});

Tips

• Name your files descriptively before uploading; the filename (without extension) becomes the frame key in the JSON atlas.
• Use power-of-two sheet dimensions (64, 128, 256, 512 px) for maximum GPU compatibility.
• Add 1-2 px padding when you plan to use mipmapping or linear filtering to avoid color bleeding between adjacent frames.
• Keep the transparent background option enabled if your sprites have transparency, then the PNG will include an alpha channel.

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.