How to Cut a Spritesheet

Quest Toolkit · Guide 6

A spritesheet is one image with many frames in a grid. Engines need to know frame size — or you slice it in your art tool first.

Plan the grid

• Pick frame size first (e.g. 32×32 or 64×64) and stick to it.
• Lay frames left-to-right, top-to-bottom.
• Leave no gaps unless your engine expects padding.
• Keep the sheet width a power of two if old GPUs matter (128, 256, 512).

In Aseprite

1. Finish animation on one layer or tagged frames.
2. File → Export Sprite Sheet.
3. Choose rows/columns or best fit.
4. Set border and spacing to 0 unless you need it.
5. Export PNG.

In LibreSprite or Piskel

Same idea: export sheet as PNG. Note frame width and height — you will type those into Godot, Phaser, or your engine.

Slice an existing sheet

If you downloaded someone else's sheet, measure one cell (width × height), count columns and rows, and trim empty edges in your editor.

In Godot

Import PNG → set Import as Texture → create AtlasTexture or SpriteFrames. Add frames in a grid with your cell size.

In Phaser

this.load.spritesheet('key', 'sheet.png', { frameWidth: 32, frameHeight: 32 }). Match the numbers to your export.

Checklist

• Every frame same size.
• No stray half-pixels on export (use nearest neighbor).
• Write frame size in a README next to the PNG.
• Name files clearly: hero_walk_sheet.png.