Mask inside gameobject

Phaser 3
1

How to create a masked content object with mask inside the class?
Mask must be a class member (changes self coordinates according the parent gameobject).

For example:
Green rectangle is a content area.
Red circle is a mask.

Picture 1 before masking:
1

class MaskedCont extends Phaser.GameObjects.Container {
    constructor(scene: Phaser.Scene, x: number, y: number) {
        super(scene, x, y);
        const rect = scene.add.rectangle(0, 0, 300, 300, 0x00bb00).setOrigin(0);
        const mask = scene.make.graphics({x: 0, y: 0}, false);
        mask.fillStyle(0xff0000, 1);
        mask.fillCircle(150, 150, 150);
        this.add(rect);
        this.add(mask);
        rect.setMask(mask.createGeometryMask());
    }
}

export class GameScene extends Phaser.Scene {
    constructor() {
        super({ key: "GameScene" });
    }

    create(): void {
        const cont = new MaskedCont(this, 50, 50);
        this.add.existing(cont);
    }
}

Picture 2 after masking:
2

2

A mask source must not be in a Container.

3

Ok. How I can masking a container without knowing it global coordinates inside class, for ex. in render method?

4

If the goal is to apply a circle/round-rectangle mask on a specific texture, you might try this plugin (demo).

5

No, circle is an example mask.
The goal is a creating whole component with mask (usual scroll list and etc).

6

Scrollable panel, Grid table, which are parts of rexUI. BTW, rexUI does not use built-in container.

7

Thanks! But unfortunately, this is not suitable for use.
The only way is to use mask for nested scroll lists as root scene element with calculating global coordinates for masked objects.
Do I understand correctly?

8

I did not know if that is the ‘only way’.
For rexUI plugins, children game object are put in scene’s display list (as you mention, global coordinates), then mask part of children game object which are at bounds.
i.e. not all children are masked, reducing masked game objects could improve performance, BTW.