In this tutorial, you’re going to learn how to design a charging effect. To do this, we’ll concentrate energy into one point before releasing a powerful laser beam!
Through this effect, you’re going to learn to:
We’ll use a core animation principle: anticipation. Anticipation tells the player what’s going to happen next. It’s especially important with AI agents, as charging animations give the player some time to react.
We can apply the idea of anticipation not only in the game’s animations themselves, but in mechanics as well. If you’ve ever played a game where you charge your attack to release an ever powerful version, you know what we’re talking about.
For this effect, we’ll first create a new Particles2D node as our root node. Let’s rename it ChargingParticles.
These particles are the energy the character charges to perform the laser shot, so we’ll use the same glowing texture we used in the laser effect. In the Assets/ folder you can find an image called glowing_circle.png. Drag it to the ChargingParticles > Texture property.
In our design, the cannon gathers a huge amount of energy before shooting the laser. For this, you could have a few particles over a longer period of time, or a large amount of particles over a shorter period of time. Feel free to experiment.
Let’s set the Amount to 16 particles and leave the Lifetime as 1.0. Note that the Lifetime isn’t the charging effect duration. In this case, it only dictates each individual particle’s lifespan.
We want the particles to be detached from the emission point. In other words, we don’t want them to follow the emission point if it moves so uncheck the Local Coords property.
Now let’s design how the particles behave during their lifespan.
In the Material property, create a new ParticlesMaterial and left-click on it to edit its properties. A ParticlesMaterial is a built-in particle shader that processes each particle and applies operations on them. It’s through the ParticlesMaterial that we give life to our particles.
For our charge effect, let’s think about fireworks, but reversed. The particles start some distance away from the charging object and move towards the center as if the object is gathering energy from the environment.
Let’s establish this area of the effect. Left-click the Emission Shape > Shape property slot and, from the dropdown menu, select the “Sphere” option. Set the Radius property to 60.0 to have a nicely sized perimeter around our charging object.
You may notice we’re using 3D terminology in a 2D context. For example we use “Sphere” instead of “Circle”. This is because the ParticlesMaterial is used in both 2D and 3D and the node using the ParticlesMaterial processes these properties in the proper context. In our case, this is the Particles2D.
Since the object absorbs the particles from the environment, we don’t want them to fall as if the gravity was stronger than the character’s “charging” force. So let’s disable the gravity. In Gravity > Gravity, set all three axis to have a value of 0.0.
Now it’s time to move the particles in the direction of the charging object. We’ll use the Radial Acceleration property for this. This pushes the particles away from their origin if we use a positive value, so we’ll use a negative value instead.
Set the Radical Acceleration > Accel to -80.0 and to add a bit of variation, change the Accel Random to 0.3. This allows each particle’s Radial Acceleration to vary by up to 30% of the original value.
In our design, the energy accumulates in small blobs before the object absorbs it. We do this to make it feel like we’re gathering energy from the environment before sucking it up.
For this, we need to animate their individual scale along their lifespan. In the Scale > Scale property, decrease the particles’ initial scale to 0.5. This is the base scale for the Scale Curve property.
With scale curves we can design the particles’ scale along their lifespan. Create a new Curve Texture. Right-click the middle of the graph and select “Add Point”, then drag both the left and right most points all the way down to create a mountain-like shape.
As we charge, we want to accelerate the gathering process to add anticipation to the shot and create a growing urge to resolve the charge. For this, we’ll animate some of the ChargingParticles properties.
Let’s add an AnimationPlayer node as child of the ChargingParticles and create a new animation called “Charge”. We’ll have the whole animation last for 2 seconds, so set the animation length to 2.0.
Let’s animate the ChargingParticles > Time > Speed Scale to accelerate the speed at which the character gathers energy. Create a keyframe with the Speed Scale as 0.5 at the start then add another keyframe with a value of 4.0 at the end.
We want to start slowly before accelerating exponentially. Select the first keyframe and in the inspector, right-click the Easing slot. From the dropdown menu select the “In” preset.
The next step works together with a WorldEnvironment node which has the Glow settings turned on. You can read the Laser Beam - Refining the Beam chapter where we explain how this post processing effect works. Let’s merge the WorldEnvironment node from the ChargingDemo scene temporarily to test the animation. We’ll remove it when we finish.
We’ll also animate the ChargingParticles > Self Modulate so the particles’ glow increases and they look more powerful and energetic overtime. Create a keyframe with the Self Modulate as an over exposed white by toggling on the RAW option in the Color Picker menu and set all RGB channels to 1.1. We’ll make the particles glow really strong at the end of the animation by setting the white RBG channels to 1.5.
And there we have it! We have a beautiful effect where we gather energy from the environment and discharge it as a powerful laser beam!