A bug? When I move a masked image, the mask doesn't move with it

Phaser 3
1

Hi, I am making a mask using a sprite/bitmap to mask another image.
It works perfectly, but the main issue is when I move the main image, you can see the image moves out from the mask area.

Is this a bug?

How can we make sure the mask move together with the main image?
Do I have to manually move both mask and main image?

What about scaling and rotating?

It is weird for a mask to move independently from the main image.

Is there an alternative solution?
Can we create a new texture out of the new masked image? How do we do that if we could?

Thanks.

2

A mask works in global space on any number of game objects. So you have to move/rotate/scale the mask source.

An alternative is to use a CanvasTexture and do the masking yourself.

3

Do you know any examples on how to use CanvasTexture? and do masking in that?
Thanks.

4

I figured it out and just going to share it; Feel free to fix it if there is a better way to do this, thanks!

let canvasTest = this.textures.createCanvas('cnvsTest', 500, 500);
canvasTest.drawFrame('the_mask', 0, 0);
canvasTest.context.globalCompositeOperation = 'source-in';
canvasTest.drawFrame('the_main_image', 0, 0);
this.imageTest = this.add.image(0, 0, 'cnvsTest');
1 Like