Nested Containers

Phaser 3
1

Hello, can’t Phaser3 have nested containers?

I am working on setting padding/margin to my custom widgets.

Each Widget is a child of Container and it has background and childrenContainer as children, where background is Image and childrenContainer is a Container object.

I wanted to clip children according to the size of the parent so I set mask to both Widget and its childrenContainer and it seems like the mask to childrenContainer does not work.

When I masked the Widget itself, masking works fine so I think it is the problem of nested containers.

Without nesting containers I think it will be very hard to implement Widgets and Layouts.

Are there any better ideas on implementing these with masking?

+) Nested Groups
I am working on nested Groups and Group has another problem that it can’t handle events itself.
One way seems like setting HitArea to input but this way makes the event visible from outside of my Widget.
When I used Container, I could just call setInteractive() and handle its event inside same class and hide the event from outside.

2

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

3

I know that conainers can be nested, though it is not that recommended.

In my case, masking in nested containers are not working.

In my class Widget, which is a Container, I have

  1. background (Image)
  2. childrenContainer (‘Container’)

Applying mask to Widget itself works and clips its children well,

but applying same mask to the childrenContainer does not work at all.

    this._clipPaddingMask = this.scene.make.graphics();
    this._clipPaddingMask.fillStyle(0xffffff);
    this._clipPaddingMask.beginPath();
    this._clipPaddingMask.fillRect( this.x + this.margin.left + this.padding.left,
                                    this.y + this.margin.top + this.padding.top,
        this.width - this.margin.left - this.margin.right - this.padding.left - this.padding.right,
        this.height - this.margin.top - this.margin.bottom - this.padding.top - this.padding.bottom);
    if(this._clipToPadding) this.childrenContainer.mask = this._clipPaddingMask.createGeometryMask();
    else this.childrenContainer.mask = null;

If I apply that mask to the Widget like,

this.mask = this._clipPaddingMask.createGeometryMask();

then the masking works.

But it also clips background so I have to apply it to childrenContainer.

1 Like