Construct 3 icon

Construct 3

Documentation

The Tilemap bar

Published 11 Aug, 2017
1,094 words
~4-7 mins

The Tilemap Bar allows editing tilemaps in the Tilemap object from the Layout View. It provides a toolbar with various tools and options, and a view of the current tileset image.

The Tilemap BarThe Tilemap Bar

Basic usage

To add a tilemap and start editing it, follow these steps:

  1. Add a Tilemap object to the layout and make sure it is selected
  2. Choose the Pencil or Rectangle tool from the Tilemap bar's toolbar
  3. Select a tile in the tileset showing in the Tilemap bar
  4. Click inside the Tilemap object to start drawing the selected tile

You can hold shift and right-click a tile in the Layout View to pick that tile to draw with. You can also hold shift and drag the right mouse button over a range of tiles to select that range of tiles as a patch you can stamp out.

To stop editing the tilemap's tiles and return to normal layout editing, click the mouse cursor on the Tilemap bar's toolbar to restore normal layout view selection. This also allows you to move and resize the entire tilemap object.

If you have multiple tilemap objects, only the selected tilemap is edited. It is often useful to layer tilemap objects directly on top of each other, in which case the tilemap to edit can be most easily selected using the Z Order Bar Paid plans only or hiding/locking layers with the Layers Bar.

If you are dealing with small tiles, you can also zoom the tileset image using the toolbar buttons. You can also access some of these options via a menu when right-clicking inside the Tilemap Bar.

There are a range of keyboard shortcuts that can be used when editing tilemaps. For more information, see the manual entry on Keyboard shortcuts.

Toolbar tools

The Tilemap Bar's toolbar has the following options:

  • Normal layout view selection: stop editing tiles and select the Tilemap object like any other object.
  • Pencil tile tool: draw tiles with the mouse. You can also select an area of tiles by dragging across several tiles in the displayed tileset, and then use this tool to stamp that region of tiles in to the tilemap. You can also hold shift and right-click to drag an area over the Tilemap object to select a region of tiles to copy, or use the selection tool to do the same.
  • Erase tile tool: erase tiles from the tilemap so they appear as transparent space. Larger areas can be erased by selecting a larger area of tiles in the tileset. A shortcut for erasing single tiles is to right-click while another tool is selected.
  • Rectangle tile tool: draw a rectangular area of tiles by clicking and dragging in the Tilemap object. You can also select a 3x3 area of tiles in the displayed tileset, and the tool will automatically nine-patch the tiles. This also works for drawing single rows or columns with smaller selections such as 1x3 or 3x1, where the first and last tile are the first and last in the selection, and the rest are the middle tile repeated.
  • Fill tool: much like using a fill tool in an image editor, this allows filling a continuous area with a new kind of tile. If multiple tiles are selected in the tileset, they are repeated over the fill area.
  • Select tool: click and drag to select a range of tiles to use in the Tilemap object. Then switch to another tool to use that selection. For example switching to the Pencil tool allows you to stamp out copies of the selected range. A shortcut for this is to hold shift and right click and drag an area while the Pencil tool is selected.
  • Mirror: when using the Pencil tool, tiles will be placed flipped horizontally. This can also apply to an entire patch of tiles.
  • Flip: when using the Pencil tool, tiles will be placed flipped vertically. This can also apply to an entire patch of tiles.
  • Rotate anti-clockwise: when using the Pencil tool, tiles will be rotated 90° anti-clockwise. This can also apply to an entire patch of tiles. Click repeatedly to keep rotating tiles another 90°.
  • Rotate clockwise: when using the Pencil tool, tiles will be rotated 90° clockwise. This can also apply to an entire patch of tiles. Click repeatedly to keep rotating tiles another 90°.
  • Reset transformation: restores tiles to no mirror, no flip and no rotation.
  • Zoom in, Zoom out, Reset zoom: adjust the zoom of the source tileset image displayed in the Tilemap Bar. This is useful if you are dealing with particularly small tiles.
  • Save to TMX: export a zip with the current tileset image and the current tiles as a .tmx file (as used by the Tiled editor). Note that Construct does not support all of Tiled's features, so importing then exporting a TMX may lose some data, such as terrain definitions. Also since in Construct a Tilemap object represents a single layer of tiles, the exported TMX file will also only ever have one layer.
  • Load TMX: import a .tmx tilemap as used by Tiled. All the tiles in the object are replaced with tile data from the TMX file. In Construct a Tilemap object represents a single layer of tiles, so if the TMX file has multiple layers you will be asked which layer to import. To import all layers, create a different tilemap object for each layer and import them separately. The tileset image can also be replaced by choosing a new image file. Note you can also drag-and-drop individual .tmx files, image files, and .zip files of both, in to the Tilemap Bar. This opens the load TMX dialog with all relevant fields already filled in, so you only need to press OK.

Editing tile collision polygons

Each tile can have an individual collision polygon which is used when testing for collisions with the tilemap object. To edit a tile's collision polygon, double-click the tile in the Tilemap Bar. The Animations Editor will open to edit that tile. You can use the collision polygon tool to edit the tile's collision polygon. You can also use the image editing features of the Animations Editor to alter the image of the tile.

When hovering the mouse over a tile in the Tilemap Bar, its collision polygon is shown as an outline, if it has one. This helps you to quickly review the collision polygon set for each tile.

The Tilemap object

For more information on how to use tilemaps, see the manual entry on the Tilemap object.