Particle Emitter Sort Order

Demonstrates how to control the rendering depth of particles using the sortProperty and sortOrderAsc properties to draw particles based on their horizontal position.

Particle Emitter Sort Order, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.atlas('blocks', 'assets/sprites/blocks.png', 'assets/sprites/blocks.json');
    }

    create ()
    {
        const emitter = this.add.particles(100, 300, 'blocks', {
            frame: 'redmonster',
            lifespan: 5000,
            angle: { min: -20, max: 20 },
            speed: 150,
            frequency: 200
        });

        emitter.sortProperty = 'x';
        emitter.sortOrderAsc = true;

        const text = this.add.text(10, 10, 'Click to change. sortOrderAsc: true');

        this.input.on('pointerdown', () => {

            if (emitter.sortOrderAsc)
            {
                emitter.sortOrderAsc = false;
            }
            else
            {
                emitter.sortOrderAsc = true;
            }

            text.setText(`Click to change. sortOrderAsc: ${emitter.sortOrderAsc}`);

        });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000',
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Particle Emitter44 examples