The Tilemap object allows tile-based games to be designed more easily. The object's tilemap can also be edited in the layout view using the Tilemap Bar.
An example tilemap
Tilemaps also have significant performance benefits over achieving the same results with other kinds of objects, such as arranging a grid of Sprites. The Tilemap object can optimise collision detection and rendering in a way that scales well even with extremely large Tilemap objects.
For information about editing tilemaps in Construct, see the manual entry for the Tilemap Bar.
A useful behavior to use to move objects around on top of the Tilemap object is the Tile movement behavior.
Tilemap object image
The image used for the Tilemap object is the tileset. This is an image that contains every different tile that can be used in the tilemap. The tiles can also can be offset and spaced, but this is not normally necessary. The tileset image appears in the Tilemap Bar after selecting the object, allowing you to choose which tiles to draw with.
When testing for collisions with a Tilemap object, empty (erased) tiles count as not colliding, and by default all other tiles count as colliding. A custom collision polygon can be set, or collisions disabled, for individual tiles by double-clicking a tile in the Tilemap bar. The image editor will appear for the tile, where the collision polygon can be modified, or disabled completely by unticking the Use collision property, or right-clicking on the image and selecting Toggle collision polygon.
Each tile in the tileset has a zero-based index to identify it. This starts with the top-left tile and increments horizontally in rows. The tile ID can easily be seen by hovering the mouse over a tile in the Tilemap Bar. The tile ID is useful for comparing or setting tiles at runtime with the object's conditions, actions and expressions.
When using tiles in the object's conditions, actions and expressions, positions are generally given in tiles instead of layout co-ordinates. You can convert between tile positions and layout co-ordinates using the PositionToTileX/Y and TileToPositionX/Y expressions.
Inappropriate uses of Tilemaps
Don't use tilemaps to display large images where every tile in the tilemap is different. This makes it needlessly less efficient to render the image, since it is rendered one tile at a time when you could have just used a Sprite.
- Click the Edit link to edit the tileset image from which tiles are drawn.
- Initially visibile
- Choose whether the object is visible or invisible at the start of the layout.
- Tile width
- Tile height
- The size of tiles in the tilemap, in pixels.
- Tile X offset
- Tile Y offset
- The offset in pixels of the top-left tile in the tileset image. This is not normally necessary and is provided mainly for compatibility with existing tileset images that have the tiles drawn at an offset.
- Tile X spacing
- Tile Y spacing
- The spacing in pixels between tiles in the tileset image. This is not normally necessary and is provided mainly for compatibility with existing tileset images that have the tiles drawn apart from each other.
- Compare tile at
- Compare the tile ID at a position in the tilemap.
- Compare tile state at
- Test whether a tile at a position in the tilemap is flipped or rotated from its normal state.
- On image URL loaded
- On image URL failed to load
- Triggered when Load image from URL finishes downloading the image and is ready to display it, or if the load fails.
- Invoke a download of the current tilemap data (from the TilesJSON expression) as a JSON file. This can be useful for in-game level editors.
- Load the current tiles from a string of JSON data from a previous use of the TilesJSON expression.
- Erase tile
- Erase the tile at a position.
- Erase tile range
- Erase a rectangular area of tiles in the tilemap.
- Set tile
- Set the tile at a position in the tilemap by its tile ID. The tile that is set can also optionally be flipped or rotated.
- Set tile range
- As with Set tile, but sets a rectangular area of tiles in the tilemap.
- Set tile state
- Set the tile flipped or rotated state at a position in the tilemap. The tile ID is not changed.
- Set tile state range
- Set the flipped or rotated state for a rectangular area of tiles in the tilemap. None of the tile IDs in the rectangular area are changed.
- Load image from URL
- Load a new tilemap image from a given URL. It is not used until the image has finished downloading, and On image URL loaded triggers. Images loaded from different domains are subject to the same cross-domain restrictions as AJAX requests - for more information see the section on cross-domain in the AJAX object. Data URIs can also be passed as an image, e.g. from a canvas snapshot or camera image.
- Retrieve the tile data in JSON format, which can be loaded in again later using the Load action. Note this differs from the built-in AsJSON expression, which returns the entire object state (including position, size, behaviors etc), whereas TilesJSON returns only the tile data.
- Convert an X or Y layout co-ordinate in to the corresponding tile number in the tilemap. For example, this can be used to get the tile position under the mouse.
- Snap an X or Y layout co-ordinate to the nearest tile. This also returns a layout co-ordinate, but aligned to the nearest tile in the tilemap.
- TileAt(x, y)
- Return the tile ID at a position in the tilemap. Note the position is given in tiles, not layout co-ordinates. If the tile at the given position is empty (has been erased), the expression returns -1.
- Convert a tile position to layout co-ordinates. For example, this can be used to position a Sprite object on top of a given tile.