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.

A quick and dirty version. Press ‘c’ to start confetti.

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

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

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.

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).

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…

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) => {…

@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 lapt…

The default particle emitter frequency is 0 (1 burst per frame). You can change the frequency to 1000 / 60 (60 bursts per second).

Confetti effect

Phaser 3

Milton July 13, 2021, 6:17pm 4

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

Topic		Replies	Views
Confetti effect in Phaser 3 Phaser 3	1	662	September 24, 2021
Rain effect in Phaser 3 Phaser 3	11	4424	May 6, 2024
How can I do this in Phaser 3 Phaser 3	5	1520	November 17, 2020
Stars zoom effect in phaser 3 Phaser 3	3	361	August 9, 2022
Problems adding emitter Phaser 3	4	1886	October 13, 2020

Confetti effect

Related topics