How to use the Pixel Grid & Sprite Sheet Generator
- Plan the grid. On the Grid template tab, set Frame width and Frame height, then Columns and Rows. Type a number into Frames if the last row isn’t full — rows are added for you.
- Add the spacing your engine expects. Margin is the empty border around the whole sheet, Spacing is the gap between frames, and Padding draws a dashed safe area inside each frame. Set Major grid to your tile or sub-grid size, and pick a Guide scale and Grid color.
- Download the template. Download 1× PNG gives a true-size guide with tinted frames to put under your pixels. Download 8× guide (the number follows the scale you chose) adds the pixel grid, borders, padding and numbers for planning or printing. Copy JSON copies every frame rectangle.
- Pack finished frames. Switch to Pack frames into a sheet, drop your frame images or press Load demo frames. Files load straight into the page and are never uploaded. Reorder with the arrow buttons, or keep Sort by file name on so
walk_2comes beforewalk_10. - Check the motion, then export. Set Columns, Spacing, Margin and Align in cell, watch the loop at your chosen Speed, try Ping-pong, then use Download sheet PNG and Download JSON in the format your engine reads.
How a sprite sheet is measured
Every engine slices a sheet with the same arithmetic. For c columns of frames w pixels wide, with margin m and spacing s:
sheet width = 2m + c × w + (c − 1) × s
Height works the same way with rows. Eight 32 px frames with no gaps make a 256 px row. Add a 1 px margin and 2 px spacing and the same row is 2 + 256 + 14 = 272 px — no longer a power of two, which matters if your pipeline still prefers 256, 512 or 1024 px textures.
Why add gaps at all? When an engine scales, rotates or filters a sprite, it samples a little beyond the frame edge. With frames packed edge to edge, a sliver of the neighboring frame can bleed in as a flickering line. Pixel art drawn with nearest-neighbor filtering at whole-number zoom levels rarely needs gaps; anything smoothed, mipmapped or scaled by fractions usually wants 1–2 px of spacing.
Frame size follows the art style. 16 px suits tiny retro characters, 32 px is the common middle ground, and 48–64 px leaves room for faces and readable gestures. At 12 frames per second each frame stays on screen for about 83 ms, so a 12-frame walk cycle loops once a second; at 8 fps each frame lasts 125 ms. The JSON export writes that duration into every frame.
How many frames fit across a texture
Columns of frames that fit in a 512 or 1024 px wide sheet, without a margin:
| Frame width | 512 px, no spacing | 512 px, 2 px spacing | 1024 px, no spacing | 1024 px, 2 px spacing |
|---|---|---|---|---|
| 16 px | 32 | 28 | 64 | 57 |
| 24 px | 21 | 19 | 42 | 39 |
| 32 px | 16 | 15 | 32 | 30 |
| 48 px | 10 | 10 | 21 | 20 |
| 64 px | 8 | 7 | 16 | 15 |
| 128 px | 4 | 3 | 8 | 7 |
A worked example: a 12-frame walk cycle at 48 × 48 px, six columns by two rows, 1 px margin, 2 px spacing. The sheet comes out at 300 × 100 px.
Which JSON format to pick
- TexturePacker hash keys each frame by file name. Phaser 3 loads it with
this.load.atlas(key, 'spritesheet.png', 'spritesheet.json'), and PixiJS reads it as a spritesheet, including theanimationslist. - TexturePacker array holds the same data as an ordered list, which some loaders and custom scripts find easier to step through.
- Grid config gives
frameWidth,frameHeight,marginandspacing— the four numbers Phaser’sthis.load.spritesheet()asks for — plus each frame’s rectangle. Unity’s Sprite Editor slices the same grid with Grid By Cell Size, but calls the margin Offset and the spacing Padding, so don’t confuse that with the padding guide here.
When frames have different sizes, every cell takes the size of the largest frame and the smaller ones sit inside it according to Align in cell. The JSON describes the full cells, so an animation never jumps when it switches frames.
Tips from practice
Anchor characters by their feet. Use Bottom center whenever frames are cropped to different heights. Centering a crouch frame vertically lifts the character off the ground for one frame, and players notice the hop.
Zero-pad frame names anyway. The sorter here understands walk_2 before walk_10, but plenty of export scripts and file browsers don’t. Naming frames walk_01 to walk_12 keeps the order safe everywhere.
Draw at 1×, check at the zoom players see. Put the 1× template on a locked layer in your pixel editor, draw on a layer above it, and judge the loop in the preview at its real speed. Movement that looks fine frame by frame often reads as jittery at 12 fps. The Animation Frame Rate Calculator helps when you need to convert frame counts to timings.
Keep a spare row. Leave one empty row in the template for the frames you will inevitably add — an extra blink, a hit reaction. Repacking a sheet later shifts every frame index in your engine code.
Start from a reduced reference. If you are turning sketches or renders into sprites, the Pixel Art Converter can bring a reference down to your frame size and palette before you redraw it by hand.