Using BitmapMask on TilemapLayer?

Hi, I’m creating a 2D sideview game where a character can mine underground to extract minerals. The underground tiles are represented by a Tilemap, and my goal is to have the visual effect of tiles being chipped away while the character is mining. A BitmapMask appears to be the perfect tool for this, but neither TilemapLayer nor Tile extends from Phaser.GameObjects.Components.Mask. Any suggestions would be appreciated, thanks!

I’ve thought about using a RenderTexture to copy the current Tile frame being mined, setting the position of the rt to that of the tile, removing the tile, and then applying BitmapMask to the rt, but this seems kinda hacky and not ideal.


I think you just need to change each tile alpha or visible. No mask.

Thanks for the reply, samme! I do have that logic in the end, after the player is finished digging the tile, but I want to show progress, like 1/4 of tile missing, then 1/2, then 3/4, etc. Having a mask would make this very fluid, without me having to create separate sprites/tiles to achieve a similar effect.

You can use a bitmap mask. Create it from a render texure (probably) and then mask the tilemap layer. It may be simpler if you invert the mask and then draw black to hide the tiles. Only alpha matters in the mask source.

TilemapLayer does not extend Phaser.GameObjects.Components.Mask, though :frowning:

Yeah, that’s odd. I think you can still do

tilemapLayer.mask = mask;
1 Like

Oh WOW! That actually does work. I’m using Typescript, so it’s complaining about setting this property. I think a bug should be filed to address this issue, but thanks so much for the help, @samme!

Have you had any problems with this?

Nope, works perfectly! I just have to hack bit around TS types, e.g. (this.scene.soilLayer as any).mask = .... See image below, with BitmapMask applied to TilemapLayer

1 Like