[4.0.0-rc.6] Using Phaser.BlendModes.ADD on a ParticleEmitterConfig can bleed into other sprites on the same layer

[saintflow47]

Version

• Phaser Version: 4.0.0
• Operating system: Windows 11
• Browser: Google Chrome

Description

Using Phaser.BlendModes.ADD on a ParticleEmitterConfig blendMode that is part of a container can bleed into other sprites on the same layer that should not be influenced by that blendMode.

Example Test Code

Reproducable Code when run at: https://labs.phaser.io/
card2 should not be influenced by blendMode, but receives it. I am not exactly sure if this is the same issue I'm experiencing in Bubbits as there are a lot more containers sprites and layers involved, but this was the smallest code example I could come up with that seems to show a similar issue.

`class Example extends Phaser.Scene
{
preload ()
{
// this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
this.load.image('bg', 'assets/skies/darkstone.png');
this.load.image('flare', 'assets/particles/white-flare.png');
this.load.image('slug', 'assets/pics/card1.png');
this.load.image('fox', 'assets/pics/card3.png');
this.load.atlas('walker', 'assets/animations/walker.png', 'assets/animations/walker.json');
}

create ()
{
    this.add.image(400, 300, 'bg');
    const testLayer = this.add.layer();
    const container = this.add.container();
    const card1 = this.add.image(225, 300, 'walker', "frame_0000")
    const card2_2 = this.add.image(575, 300, 'slug')
    const card2 = this.add.image(575, 300, 'fox')
    

    const emitZone1 = { type: 'edge', source: card1.getBounds(), quantity: 42 };
    const emitZone2 = { type: 'edge', source: card2.getBounds(), quantity: 42 };

    const emitter = this.add.particles(0, 0, 'walker', {
        frame: ["frame_0000", "frame_0001", "frame_0002"],
        speed: 24,
        lifespan: 1500,
        quantity: 1,
        scale: { start: 0.4, end: 0 },
        alpha: { start: 0.4, end: 0 },
        advance: 2000,
        blendMode: "ADD",
        emitting: true,
        emitZone: [ emitZone1, emitZone2 ]
    });

    const emitter2 = this.add.particles(0, 0, 'walker', {
        frame: ["frame_0000", "frame_0001", "frame_0002"],
        speed: 24,
        lifespan: 1500,
        quantity: 1,
        scale: { start: 0.4, end: 0 },
        alpha: { start: 0.4, end: 0 },
        advance: 2000,
        blendMode: "ADD",
        emitZone: [ emitZone1, emitZone2 ]
    });

    container.add(card1)
    container.add(emitter)
    container.add(emitter2)

    testLayer.add(card1)
    testLayer.add(card2)
    testLayer.add(emitter)
    testLayer.add(emitter2)

}

}

const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000',
parent: 'phaser-example',
scene: Example
};

const game = new Phaser.Game(config);
`

[BenjaminDRichards]

This is related to #7235 and #7237 .

The precise situation is, blend modes carry over to siblings inside a Container when applied TWICE. Which seems awfully specific!

It also seems awfully suspicious, as RC6 included a fix to a similar problem (#7201 ). And indeed, I made a mistake in the code for that fix.

The first problem was, blend modes were carrying on into Containers within Containers, as they were just passing a DrawingContext down the render stack. I fixed this by deliberately creating a new DrawingContext for a Container to use as a base, preventing leaks down the stack.

However, for some reason I then added a fallback that would use this base DC every time a blend mode wasn't swapped. So two blend modes of the same type would trigger the base to return. Ordinarily, this might cause an unexpected switch in behavior. But in a further oversight, the base didn't actually activate, so the previous blend mode would stay in effect.

That fallback was all unnecessary. Without it, the code follows one of two paths:

• If the Container has a blend mode, it's on the base, and all the children will use it, so never bother switching.
• If the Container is in pass-through mode, and the blend mode changes, it will create and use a new DC with that blend mode.

And that is sufficient to cover all use cases. I double-checked #7201 and it behaves correctly, so I'm confident in this fix.

Here's the example running with the blend leaks:

And here's the example running correctly: