Tutorial: How to Load and Use Tilemaps

Tilemaps (.tmg files) are a great way to draw and organize system levels, and they can be created using the Tiled editor. Loading them is similar to loading other objects:

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

   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 collisions, pass true as the third parameter to extract boundaries from the tilemap layer:

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

These boundaries can then be retrieved using:

this.stageData.getBoundaries()

• Additionally, the stage.isBoundariesCollision() method will use these boundaries for collision calculations. For example, the code below will move the fireball only if no collision occurs:

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

To debug boundaries, you can enable the following options:

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

Starting from jsge@1.4.0, support for the following features has been added:

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

The engine will process these features automatically when the tiledLayer is created.