Draw your tiles and build a map with them

Build a tileset and map

1. Draw source tiles

   Use one canvas-sized tile per frame. Select the frames to include in your tileset.

2. Create the tileset

   Open Tiles, choose Create tileset from frames…, and confirm Create from selected frames. The tileset stores independent image records; later changes to the source animation frames do not automatically redraw those tile records.

3. Make room for the map

   If needed, resize the canvas after creating the tileset so multiple tiles fit. Canvas resizing changes the document bounds; tiles retain their own dimensions.

4. Paint a tilemap layer

   In Tiles, choose the tileset and Add tilemap layer. Select a tile, then draw on the canvas. Use Erase tile, Flip horizontally, Flip vertically, and Rotation for cell edits.

5. Inspect and export

   Use Seamless preview to inspect repetition of the rendered frame. Save the native project. With Pro, choose Export → Game package ZIP to include independent tilesets and Tiled-compatible map files.

Edit a reused tile

Choose Tiles → Edit tile pixels…, then click a painted tilemap cell. Edit the original tile pixels in the small canvas; the cell keeps its rotation and flip settings.

Tile edit mode controls reuse: Auto reuses a matching tile or adds a new one; Manual updates every use of the tile; Stack always adds a new tile. Choose Apply tile pixels to commit the change. Source animation frames remain independent from the copied tileset.

What the package preserves

The game ZIP includes manifest.json, sprites.png, sprites.json, rendered frame PNGs, and the editable project. Projects with tilemap data also include maps/ files and tilesets/ files. Tiled maps group layers by tile dimensions for each animation frame.

The export carries tile IDs, quarter-turn and flip flags, layer opacity, visibility, names, and source metadata. Its manifest reports unsupported Tiled blend modes. Collision objects and animated-tile definitions are not generated; the rendered frame PNGs and native project retain the full artwork.

Classic Tilemap Lab

The older frame-as-tile Tilemap Lab remains in the classic editor, including its original one-map export workflow. It is distinct from independent tilesets and tilemap layers in the current editor.

• Open classic Tilemap Lab ↗
• Open the current Tiled package guide ↗

Capacity

Drawing, animation editing, scripting and the command API are free. Editable PixelWall and supported sprite files, plus individual PNG, BMP and TGA frame exports, are free. Pro is $15 USD once for animated GIFs, sprite sheets and atlases, game package ZIPs, and saved export presets.

The document engine accepts canvas sides from 1 to 65,535 pixels, with at most 4,194,304 canvas pixels, up to 256 layers including groups, and up to 2048 frames. A document may store at most 16,777,216 image pixels across its distinct images. Linked cels share image data. Browser canvas limits and available memory can be lower, especially for very wide sprites. Check representative artwork on your device.

A tilemap layer can contain up to 1,048,576 cells, with no more than 2048 rows or columns. Browser memory can become a practical limit earlier.

Common questions