Confetti Particles in Godot 4.3

Demo

A much higher quality sample of the effect can be found here.

Intro

I was recently looking for a good example or tutorial detailing a confetti particle effect in Godot and I discovered there isn't much out there. There's one YouTube tutorial and I totally appreciate the author's contributions to the community, but it's really more of a "sparks explosion" effect than it is confetti.

I then stumbled across a convincing confetti effect on Reddit which gave me a reference to work off of, as well as a few hints detailing how the author did it.

Here I'll walk you throw the creation of a confetti explosion step by step in Godot 4.3. If you're a beginner to particle effects, this will be a great intro.

Note: I'm not a Godot expert. Just a lowly software engineer learning as I go while I make my game. There might be better ways to do things. If you have any tips or suggestions, please leave a comment here or on my Reddit post!

Walkthrough

Create the effect and load our sprite

Start by creating an empty Node2D scene in Godot. I've named mine ParticleSandbox.

Then, in the scene's node tree, let's create a GPUParticles2D node.

You'll see a warning about a missing material. That's totally fine. Let's add one and resolve the issue. In the node's inspector, select the "Process Material" dropdown and add a New ParticleProcessMaterial.

Now you should see the particle effect actually emitting something. That something is single white pixels that are falling from the particle effect's origin. Go ahead and use the "move" tool to center the particle effect within the viewport window so that it's easy to see. You'll see something like below.

Now let's add our sprite for our confetti effect. To get a convincing "confetti twirling" effect we'll use a sprite sheet with two frames. Each frame is 12px by 12px. The first frame has an 8x10 white rectangle. The second frame has a 2x10 white rectangle. The skinny frame will give the illusion that the confetti is twirling. If you want to use my sprite, freel free to do so with a CC0 License (I wave all rights to the file). You should be able to download it by right clicking the image below and "save as". Make sure it saves as a PNG.

And here's what it looks like zoomed in (don't download this one, it's just a screenshot).

Put the downloaded PNG file somewhere in your Godot project and drag it into the "Texture" property of your particle effect.

You should end up with something like this.

Particle effect sprite animation and some upward velocity

Okay, now the particle effect has our sprite attached but it still looks like garbage. Let's make this start to look like confetti.

We want to animate our ugly little sprite. I think the steps required to animate a sprite are super obtuse, so pay attention.

To enable animation we have to go to Canvas Item -> Material. Animation for a particle isn't set up in the GPUParticles2D part of the inspector. Yes, it's confusing.

Add a new CanvasItemMaterial to the Canvas Item as shown below.

Click the new material and check the box that says Particles Animation. Set H Frames to 2 (there's 2 frames in our sprite sheet) and V Frames to 1. Enable Particles Animation Looping.

Great, now the first part of the obtuse particle animation process is done. The sprite looks a bit less ugly. Now that we've told Godot to enable animation for the particle effect, we have to tell it how to go about doing the actual animation.

Navigate back to the GPUParticles2D section of the inspector and click on the ParticleProcessMaterial to open it up. We want to expand Display -> Animation.

Speed is how fast the animation will loop. Let's set min: 2, max: 5. Offset controls where in the order of frames the animation could start. Let's set min: 0, max: 1 which will result in a random start frame, which should give more variety to our confetti animation (rather than all the pieces of confetti starting on the same frame.)

Finally, let's add some basic initial upward velocity to our confetti explosion, and reduce the gravity. Navigate to ParticleProcessMaterial -> Spawn -> Velocity. Set the direction to x: 0, y: -1, z: 0 and the initial velocity to min: 130, max: 160.

Let's also navigate to ParticleProcessMaterial -> Accelerations -> Gravity and reduce the Y gravity to 75.

You should end up with something like this.

More realistic movement

Let's add some variety to our confetti. I'm assuming you've got the hang of things a bit, so I'll be brief with my instructions since we're just configuring more properties the same way we have been.

Let's increase our particle count to 20 to add some more confetti.

Make the confetti twirl/rotate more. ParticleProcessMaterial -> Animated Velocity -> Angular Velocity with settings min: -180, max: 180.

Increase Time (not within the ParticleProcessMaterial) -> Explosiveness to 0.97 to make it appear like a burst of confetti instead of a steady stream. While we're here let's increase the particle lifetime as well. Set Lifetime to 4 seconds.

Let's add a bit of linear acceleration so that gravity and initial velocity aren't the only things applying force to the particles. ParticleProcessMaterial -> Accelerations -> Linear acceleration set to min: 10, max: 30

Let's simulate some air friction to make the confetti look like paper instead of like random falling boxes. ParticleProcessMaterial -> Accelerations -> Damping set to min: 74, max: 78. Damping slows particles down, but applying a constant damping force doesn't look very natural. To fix this let's add a new damping curve. Set the curve's minimum to 0 and maximum to 1, then make the shape I have in the picture. The curve starts at 1 to immediately slow down the confetti. This simulates air drag which usually halts confetti's momentum pretty quickly since it doesn't have much mass but has a lot of surface area. After the initial dip, we drop below 1 to let the confetti start to move after its initial halt. We want it to slowly drift toward the ground. However, once it starts to fall, confetti sort of "floats" down to the ground again due to it having very little mass with a lot of surface area. To simulate the lazy drift toward the ground we dip back above 1 to slow the fall of gravity as it kicks in. You can get the curve to go above the max curve value by using the little handles that pop out of a curve point when you click on it. Finally, we finish back at 1.

I honestly am no expert here (nor am I good at physics) so I just played with damping a lot until I thought it looked good. Changing the damping curve's min and max will massively change how the values set in the damping minimum and maximum work.

You should end up with something like this.

Polish

Okay, our confetti looks kind of convincing now. Time to make it pretty.

Let's start with fixing the scale. We can make the confetti smaller and add variety to size. My game window is 640 x 360, so the default size of the sprite is a bit big for me, but this obviously depends on your use case. ParticleProcessMaterial -> Display -> Scale set to min: 0.25, max: 0.55 looks nice to me. Play around with it. When I reduced the size I noticed that 20 particles felt a bit small for the amount so I cranked it up to 50 for my Amount value.

Now let's make the particles shrink just before the end of their lifecycle. This, combined with a fade out effect with alpha/transparency, will make it look nice when the particles disappear instead of an abrupt/harsh disappearing particle. To do this, add a Scale Curve (just below the scale settings you just entered). Keep the curve at 1 until nearly the end and then have it drop off. Here's what looks nice for me.

Let's add some color to our confetti! ParticleProcessMaterial -> Display -> Color Curves -> Color Initial Ramp. Create a new GradientTexture and click on it. Pick 2 or 3 colors to add to the gradient. One trick here is to duplicate colors and drag the points right next to each other in the gradient to force really hard transitions for the initial color of the confetti, so that we don't have weird in between colors. See my example below.

Let's add a bit of hue variation (to your own taste). ParticleProcessMaterial -> Display -> Hue Variation set to min: -0.02, max: 0.02. A little bit goes a long way.

Let's pop back over to "Color Curves" and work on our alpha/transparency fade out effect. ParticleProcessMaterial -> Display -> Color Curves -> Alpha Curve and create a new curve texture, and then a new curve within that texture. I like the look of a fade out to around 0.5 right at the end. Here's my curve.

You did it!

That's it! You did it! You should end up with something like this, minus the confetti rain.

A much higher quality sample of the effect can be found here.

What Next?

There are a million values to play around with inside a particle effect. Try looking at Tangential Acceleration next to add some more life to the confetti. For the "confetti rain" effect you see in the animation, I just duplicated the existing particle effect, removed the initial velocity, removed almost all of the damping, and then I let gravity take care of the rest. Then to spread the confetti rain out, I changed the spawn area to be a rectangle instead of a point. There's all kinds of fun things you can do to modify it. Play around with it and most importantly, have fun. I hope this helped you!