Tilemap with two layers

Phaser 3
1

I have a simple game prototype using tilemap with a single layer. the game generates a maze procedurally. The code looks something like this:

this.map = this.make.tilemap({
         data: this.lv.tile_map, 
         tileWidth: TILE_WIDTH, tileHeight: TILE_HEIGHT, 
         width: TILEMAP_WIDTH, height: TILEMAP_HEIGHT });
var tileset = this.map.addTilesetImage(
        'tiles', null, TILE_WIDTH, TILE_HEIGHT, 1, 2);
this.mazeLayer = this.map.createLayer(0, tileset, 0, 0)

This works fine. Now I want to add a background layer. I tried modifying the last line as follows:

this.bgLayer = this.map.createBlankLayer(
    0, tileset, 0, 0, TILEMAP_WIDTH, TILEMAP_HEIGHT,
    TILE_WIDTH, TILE_HEIGHT) 
this.mazeLayer = this.map.createLayer(1, tileset, 0, 0)

but I only see a black screen. In fact, I found out that just changing the first parameter from 0 to 1 in the createLayer call in the original code produces the same result.

What is the correct way to insert a layer “below” my current one, if I want to generate the content for both dynamically?

2

I think I found the answer to my own question. It appears make.tilemap() always stores the data content associated to a layer named “layer” with index 0, so it doesn’t allow to inject a background. Instead, this approach works:

    this.map = this.make.tilemap({
        tileWidth: TILE_WIDTH, tileHeight: TILE_HEIGHT, 
        width: TILEMAP_WIDTH, height: TILEMAP_HEIGHT
    })
    var tileset = this.map.addTilesetImage('tiles', null, TILE_WIDTH, TILE_HEIGHT, 1, 2);
    this.bgLayer = this.map.createBlankLayer('background', tileset);
    this.bgLayer.putTilesAt(/*2D array of desired background here*/,  0, 0, true)
    this.mazeLayer = this.map.createBlankLayer("foreground", tileset)
    this.mazeLayer.putTilesAt(this.lv.tile_map, 0, 0, true)