Tilemap object

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. The Tilemap object can optimise collision detection and rendering in a way that should scale well even with extremely large Tilemap objects.

For information about editing tilemaps in Construct 2, see the manual entry for the Tilemap Bar.

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.

Collisions

When testing for collisions with a Tilemap object, empty (erased) tiles count as not colliding, and all other tiles count as colliding. A custom collision polygon can be set for individual tiles by clicking the Edit tile collision polygon button in the Tilemap bar, or just double-clicking the tile in the Tilemap bar. Note however the collision polygon cannot be entirely removed from a tile: only an erased tile counts as not colliding at all.

If you wish to have tiles that are visible but do not register a collision, use two Tilemap objects layered on top of each other. Test for collisions with just the top object, and erase any tiles that should not register a collision. These tiles can then be placed on the tilemap object beneath, so they appear in the same place but are not tested for collisions.

Tile IDs

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.

Tile positions

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

It is not appropriate to use the Tilemap object to display large images. The tilemap object draws tile-by-tile, but can optimise if there are areas of the same tile. This is described in the blog post Tilemap tidbits. If you paste a large image in to the Tilemap object, and then stamp a grid of tiles to display the large image, every tile is different. Therefore no optimisation is possible, and a draw call must be issued for each tile. If the image needs a 10x10 grid of tiles to display, then it will need to issue 100 draw calls. A single sprite or Tiled Background, by comparison, takes a single draw call each. Therefore this type of use of the Tilemap object can be hundreds of times less efficient than using another object. The Tilemap object should only be used for tile based games, where a single tile is a useful level design block by itself, rather than part of a larger image.

Tilemap Properties

Image
Click the Edit link to edit the tileset image from which tiles are drawn.

Initial visibility
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. It is recommended to use a square power-of-two size (e.g. 32x32).

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.

Seamless mode
Use a rendering mode that prevents seams appearing between tiles, but also disables some tilemap optimisations which could reduce performance. Turning Seamless mode off can improve performance, but may show seams if the following project properties are not as follows: Letterbox integer scale fullscreen mode, Point sampling, and Pixel rounding on. NOTE: you cannot use different Seamless mode settings on different instances of the same Tilemap object, even across layouts. For correct display, all tilemap instances of the same object type should use the same Seamless mode.

Tilemap conditions

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
Triggered when Load image from URL finishes downloading the image and is ready to use it.

Tilemap actions

Download
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
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 webcam image.

Tilemap expressions

TilesJSON
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.

PositionToTileX(x)
PositionToTileY(y)
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.

SnapX(x)
SnapY(y)
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.

TileToPositionX(x)
TileToPositionY(y)
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.

Tags: