GeometryMask canvas vs. gl

Phaser 3
1

Hello! Do I have to explicitly use graphics object in new Phaser.Display.Masks.GeometryMask? My case:

  • new Phaser.Display.Masks.GeometryMask(scene, gameObject)
    – works Ok in GL, no mask effect in Canvas

  • var mask = s.make.graphics();
    mask.fillRect(gObj.x-20, gObj.y-20, 40, 40);
    maskedObject.mask = new Phaser.Display.Masks.GeometryMask(s, mask);
    – works Ok in GL and also in Canvas, but I need to “make” graphics object instead of use of original Sprite object

2

You have to use a graphics object.

From a sprite, use a bitmap mask.

3

Thanks. It wasn’t clear from the documentation for me. I expected that the provided sprite object will automatically be understood as a clipping rectangle. And it also was, but only in GL context. :smiley: So it leaves me bit confused. Ok. I will always use explicit s.make.graphics() shapes for defining masks.
Maybe one more ask for help:

var r3 = s.add.circle(gObj.x, gObj.y, 5);
r3.setStrokeStyle(6, 0x35d408, .5);
var rr = s.make.graphics();
rr.fillRect(gObj.x-20, gObj.y-20, 40, 40);

r3.mask = new Phaser.Display.Masks.GeometryMask(s, rr);
s.tweens.add({
targets: r3,
duration: 300,
radius: 40,
yoyo: false,
repeat: 0
}).on(‘complete’, () => { r3.mask.destroy(); r3.clearMask(); r3.destroy(); });

As you can see, it’s just a green circle over the sprite which radius raises over the tile rectangle. If I destroy the r3 circle only, the mask object itself will stay in memory? Will just r3.clearMask(); statement destroy mask itself? …thanks :slight_smile:

4

Well it does say :slight_smile:

graphicsGeometry Phaser.GameObjects.Graphics The Graphics Game Object to use for the Geometry Mask. Doesn’t have to be in the Display List.

You need to both clear the mask from the target game object and destroy the mask itself.

r3.clearMask() won’t destroy the mask but r3.clearMask(true) will.

1 Like