Ghost trails, also called after images, give you feedback on your player’s movement, and show its trajectory.
They are similar to smears in animation, the process of blurring or extending characters’ limbs to exaggerate a fast motion or improve its readability. You can use ghost trails to smooth out a quick movement and make it more readable, or as a stylistic choice, as in Castlevania games on Nintendo handheld devices.
In this tutorial, we use particles once again to create these trailing ghosts for 2D games.
You are going to learn to:
In our effect, we are going to use a spaceship for our character. So let’s add a Sprite to the scene and a Particles2D. Rename them as PlayerShip and GhostTrail, respectively.
Select both nodes and drag the topdown-player.svg, available in the FileSystem dock, under the assets folder, and drop it on the Texture property. Rotate the PlayerShip by 90 degrees to make the tip of the spaceship face right.
We want these particles to always be behind the main sprite. For that, in the Particles2D turn on the Show Behind Parent property.
Next, in the Material property, create a new “ParticlesMaterial”. You should see some spaceships falling and disappearing right the way.
If you rotate the Particles2D around, you should notice the particles look pinned. This effect happens because the particles are drawn in local coordinates, meaning they follow the Particles2D node’s transform: rotation, scale, position.
Let’s fix that.
Select the Particles2D again and search for the Local Coordinates property and toggle it off, with that the particles won’t suffer from changes in the Particles2D transform, you can test it by rotating the Particles2D node again.
Right below the Local Coordinates property, in the Draw Order property, left-click where it says “Index” and change it to “Lifetime” instead. Doing so makes the first particles appear behind the most recent ones. By now, the Drawing category should look like this:
Now, in the Material property, right-click in the ParticlesMaterial and from the dropdown menu, select the “Edit” option. The Inspector should focus on the ParticlesMaterial resource and its properties.
Let’s also prevent the particles from falling, so they stay in place when created. Search for the Gravity property and make sure you set all values to zero.
If you rotate the PlayerShip node, you should notice that the particles don’t follow its rotation.
We can use the Align Y property to make the particles align with the particle system’s global rotation.
To activate the align feature, go to the Flags category in the ParticlesMaterial and click the checkbox next to Align Y.
At this point, the particles still don’t align with the PlayerShip. They are flipped vertically because our particles have a velocity of 0. In the particle shader, the align property relies on each particle’s velocity to rotate it. If the velocity is 0, the particles do not turn to align with the particle system.
Find the Initial Velocity -> Velocity property and assign it a value of 1 to fix the issue. Also, set the Direction > Spread property to 0 to prevent some particles from having a slight offset.
Depending on the orientation of the sprite itself, you might need to change the Direction property as well. By default, the ParticlesMaterial assumes the sprites or meshes you emit are pointing to the right.
But our ship’s texture is pointing up, so we need to update the Direction accordingly.
The Direction is a Vector3 unit vector representing the emission direction of our particles. That’s the direction in which the Initial Velocity will take them, not the direction in which the texture is looking. The default, Vector3(1, 0, 0) means your particle emits to the right, that is, the positive X-axis.
In our case, we need to use 0 for the x and z values and 1 for the y value, which makes the particles emit downward and, thanks to the Align Y flag, makes the texture look up.
Now, if you move the Particles2D around, you should see it leave a trail of spaceships behind it. You can rotate the node ship to see the trail follow the rotation.
We can use a Gradient resource to animate the particles’ opacity and make them fade out. In the ParticlesMaterial, search for the Color Ramp category and create a new GradientTexture. Click on it, and in the Gradient slot, create a new Gradient.
Change the color on the left corner to a semi-transparent white and the one on the right corner to a fully transparent white.
To make a color transparent, click on the color stop on the gradient, then click on the square representing the color at the right of the gradient. Doing so opens a color picker.
In the color picker, drag the “A” slider to the left to make your color more transparent.
The ghost trail is ready! All that’s left is to tweak the Amount and Lifetime properties to fit your game’s feel better. To me, for the ship, an Amount of 8 and a Lifetime of 0.5 looks good.
If you want to use this effect for a one-time mechanic, like dash over a fixed distance, you can toggle the One Shot property of the particle system. It makes the particle system emit only one cycle after setting their Emitting property to true.
Using a particle system as we did works for individual sprites, but if you split your character into multiple sprites that you animate in Godot, you are going to need to make some changes.
You have three alternatives to get a trail as in this tutorial. You can: