Fireworks

Phaser 3
1

Has anyone managed to develop fireworks? This is the closest I can get::

https://labs.phaser.io/edit.html?src=src/game%20objects/particle%20emitter/create%20emitter%20from%20config.js&v=3.55.2

Wondering if there’s a better method out there.

2

I don’t know how to share examples like others have in the past. Here is the code.

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#000',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.atlas('flares', 'assets/particles/flares.png', 'assets/particles/flares.json');
}

function create ()
{
    var particles = this.add.particles('flares');

    for (let i = 0; i < 10; i++)
    {
        let x = Phaser.Math.Between(400, 300);
        let y = Phaser.Math.Between(400, 300);

        var emitter = particles.createEmitter({
            frame: [ 'red', 'blue', 'green', 'yellow' ],
            x: x,
            y: y,
            speed: 40,
            lifespan: 1000,
            maxParticles: 40,
            scale: { min: 0, max: .07 },
            alpha: { start: 0, end: 1 },
            quantity: 3,
            blendMode: 'ADD',
            delay: Math.random() * 2000
        });

    }

}
1 Like
3

2 Likes
4

Improved I think (full page):

3 Likes
5

Render texture:

3 Likes
6

Thank you so much, it helps a lot

7

Actually, there should not be empty space created at the center of the particles.

8

I added some particle processors that slow the flares down after the explosion. Looks a bit more like real fireworks.

3 Likes