Mask behaviour when there are nested containers.

[kanthi0802]

Hi,

We have a component kind of List. It basically extends Container and creates children which are also of type Containers. Each of these children contain a background image and some text objects to display data, they are aligned vertically in the parent list container. Now the issue is when we are trying to apply mask to the parent container , the text children in second level containers are not being rendered at all. Only the background image is rendered.

Further more input events seems to be working on the game objects which are masked .

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[RollinSafary]

even if you have sprite in container mask isn't working

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 640,
    height: 480,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var loadBar;
var t = 0.0;
var text;
var game = new Phaser.Game(config);

function preload() {

    this.load.image('swirl', 'assets/pics/color-wheel-swirl.png');
    this.load.image('checker', 'assets/pics/checker.png');
    this.load.bitmapFont('gothic', 'assets/fonts/bitmap/gothic.png', 'assets/fonts/bitmap/gothic.xml');
}

function create() {
    var container = this.add.container()
    loadBar = this.add.graphics();

	var checker = this.make.image({
		x: game.config.width / 2,
		y: game.config.height / 2,
		key: 'checker',
		add: true
	});


    var swirl = this.make.sprite({
    	x: game.config.width / 2, 
    	y: game.config.height / 2, 
    	key: 'swirl',
    	add: true
    });
    container.add(swirl)

    loadBar.x = game.config.width / 2;
    loadBar.y = game.config.height / 2;

    swirl.mask = new Phaser.Display.Masks.BitmapMask(this, loadBar);
    text = this.add.dynamicBitmapText(game.config.width / 2 - 20, game.config.height / 2 - 15, 'gothic', '0%', 32);

}

function update()
{
    var step = Math.abs(Math.sin(t)) * 400;

    loadBar.clear();
    loadBar.lineStyle(40, 0, 1);
    loadBar.beginPath();
    loadBar.arc(0, 0, 100, 0, Phaser.Math.DegToRad(-step), false);
    loadBar.strokePath();
    loadBar.closePath();

    t += 0.01;

    text.setText((step / 400 * 100).toFixed(0) + '%')
}

[photonstorm]

From the docs:

 * 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.

[kanthi0802]

Hi Rich ,
Thank you :) I've gone through the docs prior to opening this issue. However what i do not understand is, if the mask does not apply to the children in the container at all, it should not to any of the children.

But as i explained above , I can see the mask being applied ( as intended ) to the Image objects nested in the containers, but the text objects are not even being rendered at all.

Also from #3491 , I see a quote mentioning
"When we add Containers you can apply a mask at the root level (i.e. the Container itself can have a mask, which will impact all children)". By this I understand that mask also gets applied to the children in a Container. Please correct me if i'm wrong.

[photonstorm]

My comment was directed at the post above by @RollinSafary which clearly has a child of a container with a mask enabled on it, which isn't going to work.

It doesn't entirely surprise me that a container within a container doesn't pick-up the parent mask properly, but I'll need to spend time creating some tests to see it happening.

Also, there's no way the input system can tell if an object is masked from view or not, so you're absolutely going to have to deal with that situation yourself, regardless of the outcome of the main part of this issue.

[kanthi0802]

Hi Rich ,
If you require a code example i'm happy to provide it. Please let me know. Currently we have project considerably complex that runs on Phaser V2 . We are planning to migrate it to V3. We see some hurdles like blurred text mentioned in 3528, which I'd hope will be fixed with ScaleManager implementation. The mask in Phaser V2 did work as per our needs in the example mentioned above. These are the only things currently stopping us from migrating to V3. Rest all works pretty awesome . Cheers 👍

[photonstorm]

Masks in v2 were all geometry based, do you see the same thing happen with containers with a geometry mask? (and yes, if you have a demo that'd be extremely useful)

[kanthi0802]

Hi Rich,
I've come up with an example. Please check it here. The mask applied to the container is Geometry mask. When run on mobile device under CANVAS render mode the mask does not even apply at all and the FPS drops to ~20 also when used BitmapText instead of Text it does not render BitmapText Objects at all.

[barvynkoa]

Disappointing... I decided to move my games to phaser 3 and I've also found this. When I have global parent container (I'm using it for scaling all game objects) and want some child to be masked - seems I can't do that. The heart is broken :(

[RollinSafary]

@flahhi it's resolvable, you can extend from Phaser.GameObjects.Container and by overriding setScale() method get what you wish ) Children that you have added in group (in v2) you can push to any array in your class to have reference on them, and add them to scene, so giving mask will work and setScale() after override too
I'm understanding that it's not the expected way to resolve the problem, but it's one of ways )

[kanthi0802]

@RollinSafary I did't quite understand what you said.

[kanthi0802]

@photonstorm . Hi Rich. Any update on this :) ?

[photonstorm]

No, not yet. Like I said, I need to spend time creating examples to reproduce this, because yours was far too large for what is needed for debugging. Example code should be isolated and as tiny as possible.