Mask not redrawing correctly

[Dylan Cristy]

Similar to this post, I am applying a mask to a group, and then clearing and redrawing the mask each update after things are re positioned.

It was working fine, but then I made some changes to some other code that shouldn't affect the masking, but now for some reason the masked area is not updating, even though the Phaser.Graphics.graphicsData.shape appears to be in the right place.

Here's my update code:

if (this.buttonMask) {
    this.buttonMask.clear();
    this.buttonMask.beginFill(0xffffff);
    let buttonMaskWidth = // my calculations to figure out the width
    let buttonMaskLeft = // my calculations to ficure out the X coord
    this.buttonMask.drawRect(buttonMaskLeft, frameBottom, buttonMaskWidth, this.buttonsGroup.bottom - frameBottom + 2);
}

 

And, using the following debug code in render():

if (this.buttonMask.graphicsData) {
    this.buttonMask.graphicsData.forEach((gdata) => {
        this.game.debug.rectangle(gdata.shape, '#0f0', false);
    });
}

I can see that the shape that should be used for the mask is in the right place, but the masking effect is still only occurring where the initial rectangle was drawn when the stage first loads. 

Here's the initial load with masking in the correct place (the green lines are the debug rectangle):

And here is after resizing the browser window and re positioning elements.  The green debug rectangle is in the correct place, and the buttons are in the correct place, but the masking effect has not moved:

 

 

Any ideas as to what could be going wrong?  I'm not seeing any errors in the console.

[Dylan Cristy]

Bump.

Some things I tried which did not work:

• On every update: setting the group's mask to null, then clearing and re drawing the rect, then reassigning the Phaser.Graphics object as the group's mask.
• On every update: killing, then clearing, then reviving the Phaser.Graphics object, and then re drawing the rect.