How to change the tilemap transparency

Phaser 3
1

This is what i tried to change the background transparency, but i just see the background image with alpha:1

cargarFondo(){
   this.map = this.add.tilemap('level1');
   const tileset = this.map.addTilesetImage('tiles', 'gameTiles');
   this.bgLayer = this.map.createStaticLayer('backgroundLayer', tileset);
   this.hierbaLayer = this.map.createStaticLayer('hierbaLayer', tileset).setDepth(100)
          
/* 
    To change the transparency, this is not working:
    this.bgLayer.setAlpha(0);
    this.bgLayer.alpha = 0;
    this.hierbaLayer.setAlpha(0);

    map.layers[0].alpha = 0;
    map.layers[1].alpha = 0;
    map.layers[2].alpha = 0;

    map.layers[0].opacity = 0;
    map.layers[1].opacity = 0;
    map.layers[2].opacity = 0;

    map.layers[0].visible = false;
    map.layers[1].visible = false;
    map.layers[2].visible = false;
 */
    this.collisionLayer = this.map.createStaticLayer('collisionLayer', tileset);        
    this.collisionLayer.setCollisionByExclusion([-1]);
}
2

It looks like each layer has an alpha property you can set - https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.StaticTilemapLayer.html#alpha__anchor

I believe the reason its not working is because you are accessing the layers wrong. map.layers doesn’t actually hold a reference to the layers themselves, but the layer data. The API implies that you need to use https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html#getLayer__anchor to get the actual layer that you’d set the alpha property on.

2 Likes
3

worked with me changing StaticLayer to DynamicLayer