Let’s start with the bursting flames, as it’s the central part of the effect. It is going to dictate the timing of the explosion.
We’ve prepared a cloud-like image for this effect. You can find it in the project’s asset folder: puff.png. From the FileSystem dock, drag the puff.png image to the Texture property in the Inspector.
We’re going to use multiple particle systems for the final effect so let’s first create a node to keep them together. In the scene tree, add a new Node2D and name it Explosion.
Now add a new Particles2D as a child of Explosion and name it FireBurstParticles2D.
In the Inspector to the right, increase the Amount to 64 so we have enough detail in our fire burst.
Click on the Time panel to expand the properties. Decrease the node’s Lifetime to 0.5. This is the amount of time each particle will exist.
Our burst of fire should grow and dissipate quickly, but not all at once. We can control this with the Explosiveness property of the particle system. The greater the explosiveness, the more likely particles will spawn at the beginning of the particle system’s life cycle. For example, an Explosiveness of 1.0 makes the Amount of particles spawn all at once. For now, set Explosiveness to 0.3.
Explosions are chaotic so drag the Randomness property to 1.0. This will add randomness to properties in the ParticleMaterial when we add it later.
We want the particles to have a motion and location of their own, independent of the particle node’s position. Toggle off Local Coordinates in the Drawing panel. Doing so allows us to create other effects like fireballs or chain explosions.
Change the Draw Order property to “Lifetime” instead of “Index” so older particles are drawn behind newer ones.
Here is an overview of the Inspector so far:
Now it’s time to define the behavior of the particles. In the Material property, create a new ParticlesMaterial and left-click on it to open its properties in the Inspector.
To begin with, let’s design a fire-looking gradient.
In the Color category, find the Color Ramp property and create a “New Gradient Texture” from the drop-down menu then click on the newly created Color Ramp and add a new Gradient from the drop-down menu.
Click on the gradient to add multiple color stops.
The center of the explosion is hotter than the edge. To make our particles reflect this, let’s start with a white color stop on the left, then transition to yellow, saturated orange, red, and a brownish-gray. These colors suggest fire bursting with high energy and dissipating, turning into smoke.
To add these colors, click on each color stop and click on the color picker to the right. Alternatively, you can change the colors by expanding the Colors array. Change each color stop to look something like this:
Note how we didn’t push the colors’ saturation to the maximum. We use pastel tones instead. As we use post-processing effects, the engine’s glow is going to make the colors appear more vibrant in the end. Also the glow becomes too intense when the color values are too high.
Let’s save this Gradient in our project’s folder to make it easy to reuse it later. Right-click on the Color Ramp property’s slot, and from the drop-down menu, select “Save”. Save it as “explosion_gradient.tres”.
We want our explosion to burst outwards from a point. Let’s spread the particles in all directions. In the Direction category of the ParticleMaterial, find the Spread property and set it to 180 to make the particles emit in all directions.
Notice that the particles don’t spread yet. We need to give them an initial velocity. Set the Initial Velocity category’s Velocity property to 350.
The particles emit too uniformly, so let’s set Velocity Random to 0.5. Finally, disable the Gravity to prevent the particles from falling by setting the y value of Gravity to 0.
Let’s also add damping to the particles so they slow down as they spread. Set Damping > Damping to 100 and the Damping Randomness to 0.85.
We’ll also have each particle start with a random rotation. Set Angle > Angle to 220 and Angle Randomness to 1.0. This will asign each particle a random rotation between 0 and 220 degrees.
We’re going to use a Scale Curve to make the particles quickly increase in size from zero to their final scale. Then, as the cloud scatters around, we’re going to decrease their size slowly.
In the Scale category, set the Scale property to 2. The Scale property controls the maximum scale of the particles. Again, let’s randomize the value. Set Scale Random to 0.02 to randomize the initial size of each particle a little bit.
Then, in the Scale Curve property, create a “New CurveTexture” and left-click on it to display its properties in the Inspector. Let’s design a hill-shaped curve.
Click on the Curve and drag the point on the left down to 0. At 0.25 on the x-axis, right-click on the curve and add a point. Move that new point to and 1.0 on the vertical axis. Finally, drag the rightmost point down to 0.0 to shrink the particles and make them disappear.
Your curve should look like this:
And with that, we already have the core of our explosion effect in place.
In the next lesson, we’ll see how to create a smoke cloud that follows the combustion and fades in the environment.