Columns and rows
Define the size of the map grid based on the room, level segment, or prototype space you want to build.
Guide
How to use the tile map editor
This guide explains the basic workflow for building a 2D tilemap in the browser, from loading a spritesheet to exporting a project bundle.
Getting Started
What to do first
The tile map editor works best when you start with a clear tileset and a target map size in mind. You do not need a perfect final art set to begin. A rough prototype spritesheet is enough to test layout, scale, and navigation flow.
Step 1
Import the tileset
- Open the editor and use the import controls to select one or more spritesheet PNG files.
- Set the tileset name, spacing, and margin so the slicing grid matches your image.
- Load the tilesets and verify the palette shows the expected tile boundaries.
Step 2
Set up the map
Background and grid
Adjust the background and grid colors to make tile boundaries readable while you paint.
Layouts
Use multiple layouts to separate ground, walls, props, collision, and decorative elements.
Step 3
Paint and edit efficiently
Select tiles from the palette, then use the brush or rectangle tool to paint the map. Undo and redo let you test ideas quickly. Grid toggle, zoom, and pan are useful when checking small seams or repeating patterns. A practical workflow is to block the floor first, add walls second, and place props or collision markers last.
Step 4
Export the right format
- Use Project JSON when you want to reopen the work in Pixel Tools later.
- Use Engine ZIP when you want a handoff bundle for Phaser, Tiled, or Unity-style workflows.
- Use CSV export when you only need the active layer in a simple grid representation.
FAQ
Tile map editor questions
Do I need multiple layers for a small prototype?
Not always, but even two or three layers can keep the map easier to edit as the layout becomes more complex.
What if the palette slices the tiles incorrectly?
Recheck spacing, margin, and the source spritesheet dimensions. One small offset can shift the whole slice grid.
Should I export often?
Yes. Saving Project JSON regularly is a good habit while prototyping or trying new layout ideas.
Related Guides