Confetti effect

Phaser 3
1

Guys I need to do this confetti effect in Phaser 3 https://codepen.io/cerpow/pen/RwNaeOb

Can you guys give me some pointers on how I can do it?

If there’s a way to just use the exact same code but make it draw over the Phaser3’s scene, even better.

2

A quick and dirty version.

Press ‘c’ to start confetti.

1 Like
3

Erm…nothing happens

4

Strange. Works for me with Chrome/FF on Linux/Windows.
What platform do you use, and what does console say?

5

Nothing happens. Nothing on the console. Just an anime pic.

6

And you pressed ‘c’ at least once (after making sure you have focus in the window)?

7

Oh sorry I missed the part that I needed to press ‘c’. Yes, it worked, thanks. What did you do? It seems like it’s overlaying the phaser3 scene. You are not using “transparent: true” in the config either.

8

I did nothing really, just took out a bit of jQuery. You should be able to diff it with the original, hardly any changes. The confetti div container is added/removed every time you press ‘c’, so it goes on top (high z-index).

1 Like
9

For anyone looking for a falling confetti effect in Phaser3, you can use the particle emitter and rotate and scale the particles. You can do this by adding functions to the scaleX and rotate.properties. Btw you can either choose scaleX or scaleY doesn’t matter, the idea is that it makes the confetti’s look like they’re flipping over and over.

Copy&paste the code below into the Phaser3 Sandbox to see the effect

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.spritesheet('raster', 'assets/demoscene/sunset-raster.png', { frameWidth: 16, frameHeight: 16 });
    }

    create ()
    {
        this.add.particles(0, 0, 'raster', {
            speed: 100,
            lifespan: 5000,
            gravityY: 100,
            frame: [0, 4, 8, 12, 16],
            x: { min: 0, max: 800 },
            scaleX: {
                onEmit: (particle) => {
                    return -1.0
                },
                onUpdate: (particle) => {
                    return (particle.scaleX > 1.0 ? -1.0 : particle.scaleX + 0.05)
                }
            },
            rotate: {
                onEmit: (particle) => {
                    return 0
                },
                onUpdate: (particle) => {
                    return particle.angle + 1
                }
            }
        });
    }
}

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

const game = new Phaser.Game(config);

The only down-side to this code is that the animatioin depends on the monitor refresh rate. Meaning, the particles will flip and rotate faster on a device with a 144hz monitor as compared to a device with a 60hz display.

1 Like
10

Here’s a way to time it, using lifeT.

const TAU = 2 * Math.PI;

this.add.particles(0, 0, 'raster', {
  speed: 100,
  lifespan: 5000,
  gravityY: 100,
  frame: [0, 4, 8, 12, 16],
  x: { min: 0, max: 800 },
  scaleX: {
    onEmit: (particle) => {
      return 1;
    },
    onUpdate: (particle) => {
      // 5 cycles per lifespan
      return Math.cos(TAU * 5 * particle.lifeT);
    }
  },
  rotate: {
    onEmit: (particle) => {
      return 0;
    },
    onUpdate: (particle) => {
      // 1 cycle per lifespan
      return 1 * 360 * particle.lifeT;
    }
  }
});
3 Likes
11

@samme You are right that fixes the rotate and flip animations :+1: very cool code update, thank you. Btw the onEmit function can be removed with the new onUpdate code, because the properties don’t need to be initialised.

But I just noticed something else besides the animation. I can switch my laptop monitor between 144hz and 60hz, and when I run the test code in Phaser3 Sandbox with 144hz there are noticably more particles onscreen when compared to 60hz :thinking: Must be something with the particle emitter…

1 Like
12

The default particle emitter frequency is 0 (quantity particles per frame).

You can change the frequency to 1000 / 60.

13

Windy leaves

1 Like