In our Fireball design, the Trail supports the fireball’s movement trajectory. It shows how the fireball moves, the direction it’s going, and at what speed. All of this is important information to player, especially in action games.
We can think about trail effects as brush strokes in drawing software. In our case, the brush is the Fireball which draws to the canvas as it moves.
This is a good analogy because depending on the how fast the fireball moves, we may want to increase the density of the Trail or decrease the particles’ lifetime to increase the resolution. But, just like in brush strokes, this comes at performance costs.
That said, let’s start designing our Trail. Add a new Particle2D to the Fireball scene and rename it FireTrail. In the Assets/ folder drag the puff_smooth.png image to the FireTrail > Texture property. We use this texture because it has transparent edges which create a smoother overlap between particles.
We’re going to disable the Local Coord property to make the Trail stay in place as the emission point moves. Let’s also change the Draw Order to “Lifetime” to draw newer particles on top of older ones.
We’ll use 64 particles for the Amount property and set the Lifetime to 0.5. This creates the same thick trail you can see in the FireBallDemo scene. You can work with different values to fit your demands.
It’s time to design the FireTrail behavior. In the Process Material > Material property create a new ParticlesMaterial and left-click on it to edit its properties.
The first thing we’ll do is change is the Emission Shape to “Sphere”. This setting distributes the particles inside a circle using the Radius property.
The higher the Radius, the thicker the Trail; but it also gets more scattered because its resolution drops. We can play a bit with the Scale properties to try to fill the gaps if the Radius reaches a value too large.
In our case, the texture we’re using is big enough to cover the Fireball’s core shape so we’ll use a Radius of 5.0. This is a small value but just enough to add variation to the Trail’s shape.
Next, let’s change the physics properties. To make the Trail stay in place and follow the Fireball’s movement, we’ll disable the gravity. In the Gravity > Gravity property make sure the x, y, and z values are set to 0.0.
To avoid just being static textures painted on the canvas, we’ll make the particles spin. This also helps the textures fill gaps in the outer areas of the Trail.
In the Angular Velocity > Velocity property, drag the slider to around 200.0 and the Velocity Random to 0.3 to add some variation. We can also add variation to their initial angle by setting Angle > Angle to 360.0 and the Angle Random property to 1.0.
In order to make the Trail wider at the beginning and thinner at the end, we’ll use a scale curve. Decrease the Scale > Scale to 0.5 to better fit the Fireball scale and create a new “CurveTexture” in Scale > Scale Curve.
Right-click on the curve graph and from the dropdown menu go to Load Preset > Flat 1. Drag the point on the right to around 0.25 in the vertical axis. This is because we don’t want the particles to shrink to zero; we’ll instead use transparency to fade them smoothly.
Finally, we’re going to tint the trail in the same way we did with the CoreFlames. In the Color > Color Ramp property, load the GradientTexture we saved as Fireball/fireball_gradient.tres. You can also navigate to the the Fireball/ folder and drag and drop it to the Color Ramp property slot.
With that, we have our FireTrail core shape in place. Let’s add some sparkles to the Trail as well to support the fireball design so as the Fireball moves, it leaves some sparkles behind.
Let’s duplicate the CoreSparkles and rename it TrailSparkles. The trail sparkles shouldn’t move towards the center; they should stay where they’re emitted. Remember, currently both CoreSparkles and TrailSparkles share the same ParticleMaterial and changing one affects the other. To prevent this, let’s make the ParticleMaterial in TrailSparkles unique.
The Trail doesn’t need the same Amount of particles as the Core does, so let’s decrease the TrailSparkles Amount to 16. From here, we’ll change the ParticlesMaterial > Radial Acceleration > Accel to 0.0 to prevent their radial movement. Let’s also decrease the Emission Shape > Radius to 15.0 to prevent them from spreading too much away from the trail’s main shape.
And with that, we finish our Fireball trail!