We don’t want the effect to feel like it appears or disappears instantly. We’ll instead animate the sparkles that create the fireball first, then the ignition, and finally the fade that happens when the fireball loses its energy.
For this, we’ll add an AnimationPlayer to the Fireball scene. In the Animation interface, create a new animation and name it “Ignite”. Set its duration to 0.5 and, since it is meant to play as soon as the fireball appears, mark it as “Autoplay”.
This animation represents the moment the fireball is created from the sparkles. These sparkles are essentially a Charging effect and aren’t part of the fireball itself, so we won’t cover it here.
The ignition is a sudden burst that stabilizes into the fireball. Think about lighting a match: the friction creates some sparks and suddenly the match bursts into flames and lights up. To achieve this, we’ll animate the Light2D’s Texture Scale and Energy properties, and the Glow > scale.
With the Animation interface open, select the Light2D and add a key for the Texture Scale at the beginning of the animation. The lowest value possible is 0.01 so we’ll use that. At the end of the animation, add a new key with the final value of 5.0.
Let’s do the same with the Energy property. We add a key with the value of 0.0 at the beginning and another key with the value 0.3 at the end.
Do the same thing for the Glow’s scale property; a key with a value of 0.0 on both axis at the beginning and another one with a value of 1.5 in x and y axis at the end.
If you try to play it now, the animation feels dull because it reaches its final value linearly. To achieve that “burst” feeling, we’ll use the Ease Out interpolation between each key. We’ll also add a new key with an extrapolated value right before the final key, which then quickly shrinks to the final value with an Ease Out interpolation.
The whole fireball needs to glow as it ignites. As seen in the Laser tutorial, the glow is a post-process effect that uses a color threshold to apply the glow. In our case, any color that goes over 1.0 triggers the glow. So we’ll animate the Fireball > Modulation color to 1.2 in all channels except for the alpha briefly before going back back to pure white. We’ll use the same bursting approach as we did before; using Ease Out interpolations and extrapolating before it shrinks to its final value.
If we play the animation now, you can barely see the difference. But if we add a WorldEnvironment with Glow enabled, you can see the fireball bursting into life!
To ensure that all the particles we designed for our fireball also emit when it ignites, we’ll turn on each particles’ Emitting property at the start of the animation.
To cool and fade the fireball, we’ll create another animation that turns off the emission of the particles and animates the Light2D Texture Scale and Energy back to zero. It also shrinks the Glow > Scale back to zero. The duration of this animation should be equal to the highest Lifetime of our particles to ensure we can use the queue_free() function when all the particles have faded.