How to use the Grid Overlay
- Drop a sprite, sheet or tileset. The cell size is guessed from the frame grid.
- Set the cell width and height (16×16 and 32×32 are one click), and an offset if your tiles don't start at 0,0.
- Choose line color, opacity and width, and add major lines every 2, 4 or 8 cells if you want sections.
- Pick an export scale; grid lines sit between the scaled pixels.
- Download the PNG.
What you get
- Scaled PNG with cell grid
- Optional fine 1px grid and major lines
- Optional outer border
Tips from making games with it
- Use a scale of 8× or more for tutorials. At 1× a grid line has to cover pixels, which hides the art.
- Pick a line color that isn't in your palette (cyan or magenta usually works) so readers don't confuse lines with art.
- Major lines every 4 cells help when you document a 64×64 room built from 16×16 tiles.
- The offset fields let you check whether a tileset has a 1px margin before you import it into Tiled or your engine.
Use cases
- Documenting a tileset for a team or a store page
- Making pixel art tutorials and step-by-step images
- Checking sprite alignment against a 16 or 32 px grid
- Preparing reference images for a level designer
FAQ
Does the grid cover my pixels?
At scale 2× and up the lines are drawn on the borders between scaled pixels. At 1× there is no room between pixels, so lines replace a row of pixels.
Can I use a non-square grid?
Yes. Cell width and height are separate, so 16×24 or 32×16 grids work.
What is the pixel grid option?
A faint 1-pixel grid under the cell grid, shown when the scale is 4× or more. It makes individual pixels easy to count.
What size will the PNG be?
The original size times the export scale. The final size is shown under the download button.
Is my image uploaded?
No, everything is drawn in your browser.