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.