Since 3.17 using same asset for an object to be used as a mask will make assets with same key above mask not visible.

[smjnab]

Version

• Phaser Version: 3.19

• Operating system: KDE Neon (Ubuntu)

• Browser: Firefox / Chrome

Description

Up to release 3.16 this works fine, but since 3.17 it seems broken. Here is what I do:

Using a particle manager as a mask for an image.
Using another particle manager for emitters drawn below this image.
Using another particle manager for emitters drawn above this image.
Using setDepth to set the depth of the image and particle managers.

If the particle manager has a depth above the image with the mask, the emitters are not visible. This was previously working, but broke in 3.17. I have used the Phaser 3 examples as a base to recreate the issue, use example code with the links below.

Working 3.16: https://labs.phaser.io/edit.html?src=src/display/masks/BitmapMask%20Masked%20Particles.js&v=3.16.0

Broken 3.19 (also checked 3.18, 3.17 and same issue): https://labs.phaser.io/edit.html?src=src/display/masks/BitmapMask%20Masked%20Particles.js&v=3.19.0

Example Test Code

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

var game = new Phaser.Game(config);

function preload() {
    this.load.image('backdrop', 'assets/pics/platformer-backdrop.png');
    this.load.atlas('flares', 'assets/particles/flares.png', 'assets/particles/flares.json');
}

function create() {
    // BACKGROUND IMAGE
    var background = this.make.image({
        x: game.config.width / 2,
        y: game.config.height / 2,
        key: 'backdrop',
        add: true,
        depth: 0
    }).setScale(2);


    // MIDDLE IMAGE TO APPLY MASK TO
    var middleImage = this.make.image({
        x: game.config.width / 2,
        y: game.config.height / 2,
        key: 'backdrop',
        add: true,
        depth: 100
    }).setScale(2);
    middleImage.setTintFill(0x000000); // Make it darkness


    // PARTICLE MANAGER USED AS MASK FOR MIDDLE IMAGE
    var maskParticle = this.add.particles('flares');
    maskParticle.setDepth(100);
    maskParticle.setVisible(false);

    maskParticle.createEmitter({
        frame: 'green',
        x: 300,
        y: 400,
        lifespan: 2000,
        speedY: { min: -100, max: -400 },
        speedX: { min: -50, max: 50 },
        angle: -90,
        gravityY: 300,
        scale: { start: 1, end: 1 },
        quantity: 5
    });

    let mask = new Phaser.Display.Masks.BitmapMask(this, maskParticle);
    mask.invertAlpha = true;
    middleImage.setMask(mask);


    // PARTICLE MANAGER BELOW IMAGE WITH MASK
    var belowParticle = this.add.particles('flares');
    belowParticle.setDepth(1);

    belowParticle.createEmitter({
        frame: 'yellow',
        x: 175,
        y: 400,
        lifespan: 2000,
        speedY: { min: -100, max: -400 },
        speedX: { min: -50, max: 50 },
        angle: -90,
        gravityY: 300,
        scale: { start: 0.4, end: 0 },
        quantity: 5,
        blendMode: 'ADD'
    });


    // PARTICLE MANAGER ABOVE IMAGE WITH MASK
    var aboveParticle = this.add.particles('flares');
    aboveParticle.setDepth(200);

    aboveParticle.createEmitter({
        frame: 'red',
        x: 425,
        y: 400,
        lifespan: 2000,
        speedY: { min: -100, max: -400 },
        speedX: { min: -50, max: 50 },
        angle: -90,
        gravityY: 300,
        scale: { start: 0.4, end: 0 },
        quantity: 5,
        blendMode: 'ADD'
    });
}

[smjnab]

Found that the issue occurs when you use the same asset key for a mask as for the object you want to draw above the mask. And, this is not only for particles, seems to be for all masks of bitmap type.

To "fix" the problem in the above code example add in preload:
this.load.atlas('maskFix', 'assets/particles/flares.png', 'assets/particles/flares.json');

and then in create:
change maskParticle to use the new 'maskFix' asset key instead of the 'flares' key.

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