The mask of the container does not work on some of its objects

Phaser 3
1

Hi there :grinning:

I have read the FAQ, and the mask source is not in the container. This is not the cause of my problem. The following code shows my confusion.

Firstly, I created a container with a mask that only displays the right side of it.
Then I created a group and override the constructor to add the newly created object to the container.
Then I found that the mask did not work properly on this object.

However, when I moved the call for adding the object to the container from the constructor to the createCallback, the mask worked correctly.

I tested other types of game objects and the results were the same. The problem seems to be with my use of groups.

So why does adding object to a container in the constructor cause the container’s mask to not work properly?

And when I use group to create object and need to do something with the created objects, should I use createCallback or override the constructor?

Thank you for your time and help.

import * as Phaser from 'phaser';

export default class Demo extends Phaser.Scene
{
    constructor ()
    {
        super('demo');
    }

    create ()
    {
        //A mask composed of a black rectangle on the left
        const textMaskGraphics = this.make.graphics();
        textMaskGraphics.fillStyle(0x000000);
        textMaskGraphics.fillRect(0,0,600,600)
        const textMask=textMaskGraphics.createGeometryMask()

        //a container with the mask
        let maskedContainer = this.add.container()
        maskedContainer.setMask(textMask)

        //a rectangle in a group, with createCallback
        let group2 = this.add.group(
            {
                classType:
                    class myRect extends Phaser.GameObjects.Rectangle{
                        constructor(scene){
                            super(scene,400,300,700,400,0x0000ff)
                            maskedContainer.add(this)
                        }
                    },
                //If I use createCallback instead of adding rectangles to the container in the constructor, the mask works properly
                //createCallback:(item)=>maskedContainer.add(item)
            }
        )
        group2.get()
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: Demo,
};

const game = new Phaser.Game(config);
2

The group get() → create() adds the game object to the scene display list (i.e., outside the container), and that happens after the myRect constructor. (I assume the mask problem is that the rectangle doesn’t appear masked.)

So you could avoid classType, get(), and create():

group2.add( new myRect(this, 400, 300, 700, 400, 0x0000ff) )
3

Thank you for your answer. Your suggestion resolved my problem perfectly.
I would also like to apologize for accidentally sending duplicate topics yesterday, which was caused by some network issues.