SpriteGrid

How to use SpriteGrid

Slices

Slices mark the sprites in a document, to export them one by one or packed into a sheet with the data a game needs. SpriteGrid's own interface is drawn this way.

Making slices#

  • Pick the Slice tool (S) and drag a box. It's named "Slice 1", "Slice 2" and so on.
  • Click a slice to select it, drag it to move, and drag its handles to resize. Double-click its name to rename it. Delete removes it.
  • Edit ▸ Create Slice from Selection makes one from a selection.
  • View ▸ Show Slices keeps them showing when you use other tools.

Nine-slice#

A nine-slice sprite, like a button or a panel, has corners that stay put and edges and a middle that stretch. Turn on 9-Slice in the tool options and set its insets (T, R, B, L), or hold Shift and drag in from a slice's edge.

Pivots and points#

Pivot & Points... (or right-click the slice) opens the Slice panel:

  • A Pivot: where a game places and turns the sprite, like its feet. Pick a corner, an edge or the center, or type a position.
  • Points: named spots, like "hand" or "muzzle", for attaching things.

Drag either on the canvas.

Slice sheets#

File ▸ Export ▸ Slice Sheet... packs every slice into one PNG, with padding and power-of-two sizes if you want them, and a .json file beside it with each slice's position, nine-slice insets, pivot and points (see Slice sheet JSON). Grouped Sheets makes a sheet from each layer group, laid out the same, like a sprite's color and a mask for it.

Slice... and All Slices... export slices as PNGs of their own.