Let’s begin by creating a new scene with a Node2D as the root and naming it “Fireball”. This scene is where we’ll collect the effects that make up the fireball.
We’ll first create the core of the fireball by using Particles2D to create flames that surround the core’s shape.
Add a new Particles2D node to the scene and name it “CoreFlames”. We’ll use the puff.png image inside the Assets/ folder as the CoreFlames Texture.
In order to achieve a good shape, we need to increase the Amount property. A value of 32 works nicely, but feel free to adjust it.
Change the Drawing > Draw Order to “Lifetime” as we’re going to use a Gradient to tint the particles over time and we want the older particles to draw in front of the newer ones.
Since the fireball has movement, we need to disable the Local Coord property so the fireball leaves behind the core’s flames as it moves.
Let’s use a static texture to clearly show the fireball’s shape. Add a Sprite node as a child of FireBall that uses the white_glowing_circle.png image as its texture. You can find it in the Assets/ folder. Let’s rename it to “Glow” and change the Scale to 1.5 in both the x and y axis.
Now let’s design the particles’ behavior. In the CoreFlames Process Material, create a new ParticlesMaterial.
We’ll use one third of the current scale so the particles fit the core’s shape. Set the Scale > Scale property to 0.3.
After that, let’s change the Emission Shape to distribute the particles around the Glow. Change the Shape property to “Sphere” and the Radius to a value that matches the Glow’s radius. If you aren’t using the same scale or texture as we are, you can use the Ruler Mode tool to measure the radius of your core shape. In our case we’ll set it to 20.0.
Now let’s add motion to these flames. In real life, flames often rise slowly as they burn. To achieve this, we’ll change the Direction > Direction to point upwards. Set the y axis to -1 and leave x and z as 0.0. To prevent the particles just moving straight up, change the Spread to 15. This rotates the movement by an angle in degrees between -15 and 15.
Let’s prevent the gravity force from pulling our flames downwards. In Gravity > Gravity, set x, y and z to 0.0.
Finally, let’s make our particles move in their emission direction. Increase the Initial Velocity > Velocity to 120 and, to add some variation, slide the Velocity Random value to 0.5. This gives a 50% variation in their velocity.
With the shape in place, let’s make it look like fire.
We’ll reuse the Explosion effect Gradient and tweak it a bit to better fit our design.
In the Color > Color Ramp property, load the explosion_gradient_2.tres Resource that is inside the Explosion/ folder. You can drag and drop it from the FileSystem dock to the Color Ramp slot.
Before we do any changes to this Gradient, it’s very important we make this Resource unique to prevent the changes we’re going to make affecting the Explosion. Right-click the Gradient Texture in the Color Ramp slot and select “Make Unique”.
We need to do the same with the Gradient itself, otherwise each Gradient Textures will use the same Gradient. On the Gradient slot, right-click and select “Make Unique” from the dropdown menu.
Now we can make changes safely. To achieve our fireball design, we just need to make a few tweaks in the Gradient.
In the first “stop”, use a full opaque white and change the last stop from a dark gray to a completely transparent red. We can copy the color from the red stop on the left and just change the alpha channel. Move the opaque red stop to the right a bit so the flames spend more time in red before they fade.
Since we’re going to reuse this gradient on the FireTrail, let’s save it to the disk. Left click the GradientTexture on the Color Ramp slot and from the dropdown menu select “Save”. You can save it next to the Fireball scene, in our case in the Fireball/ folder. Let’s name it fireball_gradient.tres.
We’ll make the flames feel alive by adding physics and scale curves to the particles which will add depth and make them spin.
To prevent the particles from being static textures moving upwards, we’ll make them spin by changing their angular velocity. This technique also helps to fill gaps in the core’s shape; decreasing the transparent areas. It also helps to add movement to the edges of the shape.
In the ParticleMaterial, let’s increase the Angular Velocity > Velocity property to 200.0 and the Velocity Random property to 0.5. As you know, this varies the final value by up to 50%.
We’re also going to make each particle have a different initial angle to prevent two particles that happened to have the same angular velocity looking exactly the same.
Set the Angle > Angle value to 360.0 and the Angle > Angle Random to 1.0. We use these values so we can get any angle between 0 and 360.
Now let’s make the flames shrink in their final moments. Together with the color gradient, this effect will help the flames complete their lifetime smoothly instead of just disappearing.
In the Scale > Scale Curve property, let’s create a new Curve Texture and draw a shape that looks like a cliff; with a plateau at the beginning and a slope at the end.
In our fireball design, sparkles gather in the air and are drawn into the ball of fire which ignites the fireball.
To achieve this effect, we’ll reuse the SparkleParticles2D from the explosion as a starting point. Godot provides a way to quickly merge Nodes with their Resources from one scene into another.
For that, right-click the Fireball node and from the dropdown menu select the “Merge from scene” option. Search for the Explosion.tscn scene and select it. From the popup menu select the SparklesParticles node.
To prevent changing the explosion scene, make in the sparkles ParticleMaterial unique to the FireBall scene like we did with the explosion_gradient_2.tres.
The current behavior makes the particles move away from the emission shape which is opposite to our design.
To better fit the fireball’s core shape, decrease the Emission Shape > Radius from 50.0 to 30.0.
Let’s make the sparkles gather towards the emission shape by changing the Radial Accel > Accel to a negative value. This is the same technique we use in the Charging Particles effect. For this effect, set it to -100.0.
To make the particles move straight to the center instead of swirling, set the Tangential Accel > Accel to 0.0.
Since we’re dealing with fire, we want the core to be a light source. So let’s add a Light2D node to the Fireball scene.
We give Light2D a texture to indicate how the light will look. From there, you have a number of properties to dictate how this light should interact with the environment. These include how it tints other Nodes, the Color, what layers the light affects, and even if it casts shadows or not.
For our fireball, we’ll use the same white_glowing_circle.png image we used in the Glow. Let’s set the Light2D > Texture Scale property to 5.0. so the light shines around the fire’s core.
In the Color property, we’ll use the color #ff3a3a which is a saturated red. This’ll light the environment in a reddish color.
Since the fireball is a light source, we want our Light2D to add its color to the environment, make sure the Mode property is set to “Add”. This makes whatever color we set in the Color property add to the environment’s color. This is important to know because we’re going to use a glow post process effect and we may reach the HDR threshold in some cases, making objects glow. You can tweak the Light2D > Range to prevent some objects from interacting with this light.
If you remember, the greater an object’s color is compared to the HDR threshold, the more it glows. The Energy property dictates how much of the Light2D’s color interacts with the environment. As our fireball emits many particles that glow, we’ll use an Energy value of 0.3. This means our Light2D adds 30% of its color to everything it interacts with.
With that, we have our fireball core finished and looking beautiful!