Skip to main content

Tilemaps and tilesets

A tilemap layer paints from a shared set of tiles. Draw a wall or a floor tile once and it repeats across the layer — and fixing it in one place fixes every copy. When you are done, export a sheet plus a map your game engine can read.

Tilemap editing is a Pro feature.

Add a tilemap layer​

Open the Tileset panel — the bottom Tileset tab on a phone, or the floating Tileset panel on the inner foldable / tablet screen — and tap Tilemap layer. Pick the tile size (4–64 px, square or not). The layer's canvas is now a grid of cells, each the size of one tile.

Draw mode​

Draw paints pixels straight onto the map with your normal tools. When your strokes land in a cell that was empty, that cell forks its own tile. Tiles that end up identical are merged automatically, so the tileset stays small and a shared tile only has to be edited once.

Place mode​

Place stamps a chosen tile into a cell. Pick a tile from the grid in the panel, then tap or drag on the canvas to lay it down. The stamp options are:

  • Flip H / Flip V — mirror the tile as you place it.
  • Rotate 90° — for square tiles only.
  • Tile 0 is the empty tile — place it to clear a cell.

Undo, save, and the tile grid​

  • The tile grid in the panel shows every tile in the set; tap one to select it for Place.
  • Every edit and placement is a single step on undo / redo.
  • The whole tilemap is stored in your project, so it rides backup and reopens exactly as you left it.

Export a tileset​

Tap Export tileset in the panel. Dixel writes two files and opens the share sheet with both:

  • A sheet PNG — every tile laid out in a grid — to Pictures/Dixel.
  • A map JSON in our dixel-tilemap format — the tile size, the grid, and each cell's tile index with its flip / rotate flags — to Documents/Dixel.

The sheet imports into Tiled, Godot, Aseprite, or any engine: point its tileset importer at the PNG and set the tile size. The JSON describes the map, so your own loader (or a small converter) can rebuild the exact arrangement.

:::tip Sending it over a chat app Attach the sheet as a file, not a photo. A chat app's photo mode can rename the file to .jpg or recompress it, which drops the transparency. As a file, the PNG arrives byte-for-byte. :::

Isometric tilemaps​

A tilemap layer can be isometric — the pixel-art 2:1 diamond convention — instead of a square grid. Pick Isometric in the ＋ Tilemap layer dialog and choose a 2:1 tile (e.g. 16×8 or 64×32); the map size defaults to fill the canvas.

Everything else works the same:

  • Draw paints straight on the diamond map — each stroke authors the tile under your brush, repeats are shared, and undo, zoom, and every tool work as normal. A bold diamond outline marks the map's cells.
  • Place stamps tiles into diamond cells, with Flip H / Flip V.
  • Export writes the sheet PNG plus a map JSON tagged "orientation": "isometric".

Import into a game engine. The sheet imports as an isometric tileset:

  • Godot — add a TileSet, set Tile Shape: Isometric and the Tile Size to your 2:1 size (e.g. 16×8), then create the atlas from the sheet.
  • Tiled — New Map → Isometric, tile size 16×8, and add the tileset from the sheet.

:::note Overhang A tile whose pixels reach past its diamond (a tall wall or cube) is placed on the cell it lands on, not the one it visually leans over. Floors and within-diamond art are exact. :::