SpineContainer delayed masking, or not masking at all, with lower depth spine below

[FloodGames]

Phaser Version: 3.54

Description

1 SpineContainer, containing 1 ship spine and 1 mask 1 SpineObject, a wave, with SpineContainer.depth+1 Result: Masking is somehow delayed.

Here is a gif of the bug:

Example Test Code

Please add my example code to labs.phaser.io - Spine. Like: SpineContainer with Mask In this sample, the mask stops working (try commenting out the const coin line!):

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#2d2d66',
    scene: {
        preload: preload,
        create: create,
        update: update,
        pack: {
            files: [
                { type: 'scenePlugin', key: 'SpinePlugin', url: 'plugins/3.8.95/SpinePluginDebug.js', sceneKey: 'spine' }
            ]
        }
    }
};

var controls;

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('logo', 'assets/sprites/phaser.png');

    this.load.setPath('assets/spine/3.8/spineboy');

    this.load.spine('boy', 'spineboy-pro.json', 'spineboy-pro.atlas', true);

    this.load.setPath('assets/spine/3.8/coin');

    this.load.spine('coin', 'coin-pro.json', 'coin-pro.atlas');
}

function create ()
{
    const spineContainer = this.add.spineContainer(200, 400);

    const spineBoy = this.add.spine(0, 50, 'boy', 'walk', true).setScale(0.5);
    spineContainer.add(spineBoy)

    //add mask to spineContainer
    spineContainer.maskShape = this.add.graphics()
    .fillStyle(0x7fff00, 0.2) //for debugging purposes
    .setVisible(true) //set true for debugging purposes
    .setDepth(5)
    .fillRect(
      Math.ceil(100),
      Math.ceil(100),
      Math.ceil(300),
      Math.ceil(300)
    )
    const mask = new Phaser.Display.Masks.GeometryMask(this, spineContainer.maskShape)
    spineContainer.setMask(mask)

    const coin = this.add.spine(200, 300, 'coin', 'rotate', true).setScale(0.3);

    var cursors = this.input.keyboard.createCursorKeys();

    var controlConfig = {
        camera: this.cameras.main,
        left: cursors.left,
        right: cursors.right,
        up: cursors.up,
        down: cursors.down,
        acceleration: 0.06,
        drag: 0.0005,
        maxSpeed: 1.0
    };

    controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
}

function update (time, delta)
{
    controls.update(delta);
}

[FloodGames]

Updated with sample code.

1) please add to labs.phaser.io "SpineContainer with Mask" 2) please fix if possible

[FloodGames]

The example I can "fix" with by not giving a depth to the mask. .setDepth(5)

Still, in the game I have:

UPDATE If you put the coin first in the create - or with lower depth than the SpineContainer - it will mess up, this:

to:

Note that the coin is not related to the SpineContainer and its mask in any way. Somehow it visually destroys everything.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.