Tutorial: How to load and use tilemaps

Tilemaps(.tmg files) is a good way to draw and organize the system levels, they could be created by Tiled editor. Loading them is now the same as the other objects:

1. Add and load a tilemap
2. Create a draw object in the init() or start() stage:

init() {
    this.tiledLayer = this.draw.tiledLayer("tilemap_layer_key", "tilemap_key", setBoundaries, shapeMask);
    ...
}

This will render the tilemap layer on your canvas.

Live example

See the Pen Tilemaps by Arturas-Alfredas Lapinskas (@yaalfred) on CodePen.

Extracting boundaries:

For example, you have a walls layer: And you want that tiles to be unreachable by the player, or to detect the collision happens. To do that pass true as 3 parameter, for extracting boundaries from the tilemap layer :

 this.draw.tiledLayer("tilemap_layer_key", "tilemap_key", true, shapeMask);

• This boundaries could be then retrieved:

this.stageData.getBoundaries()

• Also, stage.isBoundariesCollision() method will use this boundaries for collisions calculations. For example the code below will move fireball only if no collision will happen:

if (!stage.isBoundariesCollision(newCoordX, newCoordY, fireball)) {
    fireball.x = newCoordX;
    fireball.y = newCoordY;
}

• To debug boundaries you can enable an option:

SystemSettings.gameOptions.debug.boundaries.drawLayerBoundaries = true;
SystemSettings.gameOptions.debug.boundaries.drawObjectBoundaries = true;

Live Example

See the Pen Tiled boundries by Arturas-Alfredas Lapinskas (@yaalfred) on CodePen.

Boundaries and animations

From jsge@1.4.0 added support:

• Tiled object collisions(boundaries) - different boundaries shapes: polygons, ellipses, dots
• Tiled animations

Engine will process them automatically when tiledLayer is created.