【Phaser3.55.2】パーティクルのdepth(z-index)をコントロールする一つのアイデア

概要

Phaser3のパーティクルにはdepth(z-index)を操作する方法は基本的にはない。

それをなんとかする。

解法の一つ

シーンを重ねることでコントロール

class ParticleScene extends Phaser.Scene
{
    preload()
    {
        this.load.image(
            'my_particle',
            'img/particle.png'
        );
    }

    create()
    {
        const particles = this.add.particles('my_particle');

        this.emitter = particles.createEmitter({
            scale: { start: 2, end: 0.5 },
            alpha: { start: 1, end: 0 },
            speed: { min: 100, max: 400 },
            lifespan: { min: 200, max: 700 },
        });

        this.emitter.setPosition(-1000,-1000);
        this.emitter.setBlendMode(Phaser.BlendModes.ADD);
    }
}

上記のようなシーンを作成し、

メインのシーンのcreateメソッドの中などで

function create()
{
    //最背面にする場合
    const particleScene =  this.scene.add('ParticleScene', ParticleScene, true, {});

    //createの他の処理

    //最前面にする場合は最下部に書いておく
    const particleScene =  this.scene.add('ParticleScene', ParticleScene, true, {});
}

とする