GeometryMask: Children(sprites) of a container displayed inside a zone

[_ok]

I am trying to get all the children of a container displayed inside a zone.

    var container = this.add.container(200, 200);
    var sprite0 = this.add.sprite(0, 0, 'box');
    var sprite1 = this.add.sprite(0, 100, 'box');
    container.add([ sprite0, sprite1 ]);
    
    var graphics = this.add.graphics();
    var color = 0x00ffff;
    var thickness = 2;
    var alpha = 1;
    graphics.lineStyle(thickness, color, alpha);
    graphics.strokeRect(32, 32, 256, 256);
    graphics.fillStyle(color, 0);
    graphics.fillRect(32, 32, 256, 256);
    container.mask = new Phaser.Display.Masks.GeometryMask(this, graphics);

However when they are outside and overlapping is seems like they are blending on each other? How should I proceed?

[jdotr]

We figured out in discord that this definitely seems to be a bug in container masking; full repro case at https://jsfiddle.net/jdotrjs/59tc3gbu/

will try to update this thread when we get around to filing a bug on it

[snowbillr]

Container's don't support nested masks. Not sure if this is what you are trying to do, but if so it isn't really a "bug".

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Container.html

Quote

Containers can have masks set on them and can be used as a mask too. However, Container children cannot be masked. The masks do not 'stack up'. Only a Container on the root of the display list will use its mask.

 

[_ok]

28 minutes ago, snowbillr said:

Container's don't support nested masks. Not sure if this is what you are trying to do, but if so it isn't really a "bug".

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Container.html

 

In other words I've to set each children in that container to have that mask?

 

I've submitted an issue regardless:

https://github.com/photonstorm/phaser/issues/3746

[jdotr]

So my reading 

36 minutes ago, snowbillr said:

Container's don't support nested masks. Not sure if this is what you are trying to do, but if so it isn't really a "bug".

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Container.html

Quote

Containers can have masks set on them and can be used as a mask too. However, Container children cannot be masked. The masks do not 'stack up'. Only a Container on the root of the display list will use its mask.

Yea, I saw that as well. My reading was that you should be applying a mask to the container for all children instead of attempting to stack the container mask with a child mask and expecting a union of the two masks to be applied or something similar.

In any case there is no nested masking going on -- there is a single mask being applied to a container which (based on docs) I would expect to be used to determine which of it's children should be visible. Even if that isn't the case the existing behavior of displaying the children objects only when intersected seems weird and wrong:

Container with no mask: https://imgur.com/a/qAKnWM6

vs with a mask applied (as defined by the cyan rectangle): https://imgur.com/a/mk76UTa

In fact if you swap from a Geometry to a Bitmap mask it works as I would expect: https://imgur.com/a/KXIfTYJ (code at https://jsfiddle.net/jdotrjs/59tc3gbu/4/)

 

Still think it's a bug; now just with the stencil test for the geometry mask, but if not would be interested to see doc updates to make expected behavior more clear.

[jdnichollsc]

Hello folks, do you know how to get world position of the container to update the position of the mask for that container?

Thanks in advance!