How to Make a Tilemap — Step-by-Step Guide With a Free Editor

Learning how to make a tilemap is mostly a matter of making four decisions in the right order: the cell size, the layout of the tileset, the layer stack, and where collisions live. Make those decisions once and painting the map becomes mechanical.

The steps below follow the order we use when a written description becomes a playable world in Neta Studio: pick or generate a tileset, fix the grid, block in terrain before detail, split the layers, then let autotiling resolve the edges. Nothing here requires an install. The editor runs in the browser, and every number below can be changed later without redrawing the map.

What Is a Tilemap? (Clear Definition + Diagram)

A tilemap is a grid of indices, not a grid of pictures. Each cell stores an integer that points at one tile inside a tileset, and the renderer looks that index up and draws the tile at the cell position. A 20 by 12 map at 32 px cells is 240 integers covering 640 by 384 pixels.

That indirection is the whole point. One grass tile is stored once in the sheet and referenced by hundreds of cells, so a map file stays small and loads fast. Because a tilemap is data rather than artwork, you can generate it from a noise function, edit it as text, diff two versions in Git, or stream it in chunks as the camera moves.

The diagram at the top of this page is built from our own tiles on a 12 by 8 grid at 32 px. Grass fills the interior, sand runs along the left and bottom edges, and water sits in the bottom-right corner where the sand ends. Read as data: the cell at column 3, row 0 holds the grass index, the cell at column 0, row 7 holds the water corner index, and every other cell holds a plain sand index. Origin is top-left, x increases to the right, y increases downward. If your engine uses a bottom-left origin, the map renders upside down until you flip the row index to rows minus 1 minus y.

• The gridColumns and rows, fixed when the map is created. A 20 by 12 map and a 40 by 24 map behave very differently at the same camera zoom.
• The cell sizeThe pixel footprint of one cell: 16, 32, 48 or 64. It must match the tileset's tile size exactly, or sampling lands mid-tile.
• The set of tilesThe image the indices point into, plus a definition of how many columns and rows it has.
• The layer of indicesOne integer per cell per layer. The ground layer is dense, the detail layer is mostly empty, and the collision layer holds flags instead of art.

What Is a Tileset? (and How It Differs)

The tileset is the picture book; the tilemap is the page of references into it. A tileset owns pixels: a sheet, plus the rule that says the sheet is, for example, 8 columns of 32 px tiles. A tilemap owns placement: which index sits in each cell of each layer.

The two words get swapped constantly because most editors show them side by side in the same panel, and because a single-file format can hide the split. In Tiled the split is explicit, with a tileset file separate from the map file. In Unity, a Tile asset holds the sprite and a Tilemap component holds the cells. In Godot, TileSet and the tilemap layer are separate resources.

The practical consequence: changing the tileset changes every map that references it, while changing a tilemap changes one level. Swap a 32 px sheet for a 48 px sheet and every index still resolves, but every map now draws at a different scale and may sample neighbouring tiles at the edges. Treat the tileset as a published interface with a version number.

Step 1: Choose or Make a Tileset

You have two routes: take an existing sheet or generate one. An existing sheet is faster, but you inherit its palette, its cell size and its licence. Check the licence before you build forty maps on top of it, and check that it is a grid sheet rather than a packed atlas. An atlas stores rectangle coordinates per tile instead of a uniform cell, which makes indexing harder and autotiling awkward.

If the terrain has to match a specific palette, generate it. Agent Sprite Forge produces a tile sheet from a written description with a consistent cell size, which removes the most common source of misalignment: a sheet where one tile is 33 px wide because the artist added a highlight outside the cell.

Whichever route you take, the first pass is not drawing. It is measuring. Open the sheet at 100% zoom, count the columns and rows, and write the cell size down where the rest of the team can find it.

• One cell sizeEvery tile the same width and height, including tiles that are mostly empty. A single 33 px tile in a 32 px sheet shifts every index after it if the exporter packs in reading order.
• Real transparencyAlpha, not white. A sheet with an opaque white background draws white boxes over your sky in the browser.
• A documented gridRecord columns, rows and whether there is padding. Index math is row times columns plus column, zero-based, reading left to right and top to bottom.
• A gutter decisionSheets with padding add 1 or 2 px between cells to reduce texture bleeding, at the cost of an offset in your sampling math. Decide which you are using before the first paint stroke.

Step 2: Set Your Tile Size and Grid

Cell size is decided by three things: the zoom the player actually plays at, your target render resolution, and how much art you are willing to draw. A 16 px tile on a 1920 px wide viewport gives 120 cells across, which is a lot of level per screen and very little room for detail. A 64 px tile gives 30 cells and enough pixels to draw a readable tree.

The hard constraint is arithmetic. The cell size must divide the sheet. A 256 px wide sheet at 32 px gives exactly 8 columns; at 48 px it gives 5.33, so the last column is a fraction of a tile and every index after it drifts. Sheet dimensions are not aesthetic choices, they are multiples of the cell size.

Use integer scaling. If the viewport is not a whole multiple of the grid, cells land on half pixels, filtering samples two neighbouring tiles, and a one-pixel seam appears down the entire map. Fix it from both ends: nearest-neighbour filtering in the engine, and a camera zoom that is a whole number.

Step 3: Paint the Ground, Then the Details

Paint in passes, and always terrain first. Terrain is what you will change; decoration is what you will not want to move. Place sixty trees and then shift the coastline four cells to the left and every one of those trees is suddenly standing in water.

Start with a single tile. Block the entire map with one grass index, look at the silhouette at gameplay zoom, and only then let autotiling resolve the edges. Details come after the shape is settled, and collisions come after the details, because discovering that a prop is walkable is a collision edit, not a repaint.

Paint everything the player can see. Empty cells default to whatever the renderer draws behind the map, which is usually not the background you intend. A background colour set on the camera is safer than relying on a cleared canvas.

Step 4: Add Layers, Depth and Collisions

A tilemap stops being flat the moment you split it into layers. The minimum useful stack is three: a dense ground layer, a sparse detail layer, and a collision layer that holds no art at all. An overlay layer above the characters is worth adding early if anything in the map should hide the player.

Depth comes from the same grid. In a top-down map, sort by the bottom edge of each object: whatever has the lowest feet draws last. For tiles this is free, because cell y already encodes position. For moving characters you need a per-object sort with a deterministic tie-break, typically the object's y plus its fractional offset inside the cell. Without one, two objects on the same row flicker between frames.

Collisions map onto the grid as a parallel array of the same dimensions. Give each tile a solid flag in the tileset, so painting a wall also marks it solid, and use the collision layer for per-map overrides. Per-cell flags cannot express slopes, one-way platforms or thin walls inside a cell. Those belong to separate objects layered on top of the grid, not to the tilemap.

• Ground layerDense: every cell holds an index. This is the only layer you can safely autotile.
• Detail layerSparse and transparent where empty. Trees, rocks, decals. Nothing here should block movement by accident.
• Overlay layerDrawn above characters: tree canopies, bridges, roofs. Anything that should hide the player.
• Collision layerNo art. A boolean array the same size as the map, seeded from the tileset's solid flags and edited by hand for exceptions.

Step 5: Autotiling and the 47-Tile Set

Autotiling is the part that fails quietly. A terrain tile with eight neighbours has 2^8, or 256, possible neighbourhood configurations. Corners only matter when both adjacent sides are filled, and that symmetry collapses the 256 cases into 47 unique tiles. This is why most engines and editors consume a 47-tile blob set per terrain, arranged in a documented layout.

You will also meet a 16-tile set, which reads the four side neighbours and ignores corners, and a 2x2 minitile set, where each cell is drawn from four quarter-tiles so 13 to 16 minitiles cover every case. The 16-tile set is simpler to draw but produces blunt corners. The minitile approach needs fewer images but forces you to author every terrain in quarters, which softens pixel art.

How to make a tilemap that autotiles without gaps

The mask is the whole mechanism. For each cell, build an 8-bit integer from its eight neighbours: bit 0 for north, bit 1 for north-east, bit 2 for east, and so on clockwise. Pick an order, write it down next to the code, and never change it. A mask that is off by one bit still produces plausible terrain, which is why mismatched conventions survive for months before someone notices the corners are wrong.

Then convert the mask into a tile index. There are two ways: a full 256-entry lookup table, which is trivial to generate and easy to debug because you can print the row, or a 47-entry table plus a symmetry function. Take the full table unless the target is memory-constrained. It removes an entire class of corner bugs.

Autotile failure modes worth knowing before you wire one up

Seams at map edges come from treating out-of-bounds cells inconsistently. Decide once whether the world outside the map is empty or the same terrain, and apply that rule to every terrain.

The second common failure is overwriting. Autotiling rewrites the cells it owns, so any single tile you hand-painted for a specific look disappears on the next pass. Either lock the terrain layer after autotiling or store manual overrides in a separate list that runs last.

Tilemap Examples You Can Open and Play

Reading a working map teaches more than reading a description of one. The Cyclops' Island is a playable map built on a single terrain set with a separate collision layer. Walk the coastline and watch where the sand-to-water transition changes tiles: those are the 47 blob cases in use.

Mini World is the smaller example. Open it to see the layer stack, ground and detail and overlay, and to see how few detail tiles it takes for a map to read as finished rather than empty.

The 3D game builder takes the same grid and extrudes it. Each cell becomes a block, the collision layer becomes vertical walls, and y-sorting becomes real depth in a Three.js scene. If your 2D map is coherent the 3D version costs you almost nothing; if the layers are mixed, the extrusion exposes it immediately.

• The Cyclops' IslandA walkable map for studying autotiled terrain edges at play speed rather than at editor zoom.
• Mini WorldA small grid for inspecting the layer stack without scrolling.
• The 3D game builderThe same tilemap extruded into blocks, where the collision layer becomes geometry and depth becomes real.

Tileset Template Download (PS / Aseprite grid)

The template is a drawing aid, not a requirement. It is a transparent canvas with guides every cell, a one-pixel inset mark for the safe area, and index numbers along the top row and left column so you can see where an index lands while you draw. Draw on top of it, hide it before export.

Match the template to the project. A 512 by 512 canvas holds a 16 by 16 grid of 32 px cells. At 16 px cells the same file holds a 32 by 32 grid, and you should lower the guide opacity, because at that density the guides hide the art.

Walk into the world it belongs to

A sprite is a character with nowhere to stand. The last step is the one nobody else offers: take the sheet you just built and put it in a world someone can walk around in — a small island, a planet, a rainy street corner. Every world on this site was made from one written description and published as a page you can play.

FAQ