Hour 20. Particle System

Hour 20. Particle System
What You’ll Learn in This Hour:
What particles are and why you should use them
How to add 2D particles to the scene
How to modify 2D particles to suit your wishes
How to add 3D particles to the scene
How to modify 3D particles to suit your wishes
Say you’re building a platform game where the player runs over grassy tiles. To make it look amazing, blades of grass and dust clouds fly into
the air with every footstep. You could achieve this effect by creating many Sprites with every footstep, make them fly away randomly, and delete
them several seconds later. But that would be a pain to make, and a huge performance hog. Instead, one can use particles!
In this hour, you’ll learn what particles are and when to use them. You’ll also learn how to add 2D and 3D particles to your scene and how to edit
their (many) properties to make them behave.
2D Particles
A particle is the smallest unit of something. For example, a single raindrop is a particle. When lots of particles of the same type work together
(to create rain in this case), we call it a particle system. Using a particle system is extremely useful for two major reasons:
You can instantiate/delete many particles without a significant effect on the performance of the game.
You can control all these particles and make them work together without writing a line of code.
Common uses for particles are rain, snow, fire, sparks, stars, smoke, and other visual effects.
The Particles2D Node
To add particles to your game, choose the
Particles2D node.
A single
Particles2D node can only control a single type of particl
e
. It can’t do raindrops and smoke at the same time, for example.
To set the image for the particle, go to the node’s properties and load the image in the Textures > Texture field (Figure 20.1).
FIGURE 20.1
The default Godot icon set as the particle texture.
The Process Material
Once the texture is loaded, it will display in the editor, but nothing will happen. To process the texture as a particle, we need to create a
Process Material. Go to the properties, find the Process Material > Material field, and create a new
ParticlesMaterial (Figure 20.2).
FIGURE 20.2
A standard ParticlesMaterial loaded as the Process Material.
Why use a whole new material for this? Because process materials process the particles on the GPU — the graphics processing unit of every
computer. This is seperate from the CPU, which is the main computational unit used for game logic and everthing else.
Now you should see the particles moving and animating in the editor! This default
ParticlesMaterial does only one thing: add gravity to
each particle. It can, however, do much more.
To edit the material, click on it in the Inspector. You’ll be greeted by a huge list of properties (Figure 20.3).
FIGURE 20.3
All the properties of a ParticlesMaterial.
Don’t be intimidated; it’s all pretty self-explanatory. Let’s walk through the most important properties:
Emission Shape: Determines where particles start their lives. By default, it’s set to Point, which means they all start at the same point.
Another common option is the Sphere, which means every particle starts somewhere within a circle.
Direction: Determines the direction particles will move.
Spread: The range of directions in which particles are created. If you set it to 180 (degrees), particles appear in every direction (it emits
111111111
22222222from −180 degrees to 180 degrees, which is 360 degrees total). If you set it to 90, particles only appear on one side.
Gravity: The gravity exerted upon the particles, which goes downward by default (as you’d expect). By setting it to Vector3(0,0,0), you
remove all gravity.
Initial Velocity: The velocity at which each particle starts moving. The direction of this velocity is determined by the direction and the
spread.
Angular Velocity: The velocity at which each particle starts rotating.
Linear Accel: How quickly a particle’s moving velocity accelerates.
Radial Accel: How quickly a particle’s rotating velocity accelerates.
Damping: How quickly a particle’s velocity decelerates. For example, in an explosion, each particle starts with a huge velocity but slows
down the further it gets from the blast. It acts like friction.
Angle: The angle at which each particle starts. (Note that this does not mean the direction the particle moves. It literally means the
rotation of the particle Sprite.)
Scale: The scale at which each particle starts.
Color: The hue modification for each particle. Using the Color Ramp property, you can make the color change over time. (For example,
a flame might start bright white and end in a faint red.)
Hue Variation: Using this, you can give each particle a slightly different color to get more variation.
Random Properties
As you probably noticed, almost every property also has a Random field. This property is a slider that goes from 0 to 1. When it’s 0, there is no
randomness. When it’s 1, there is complete randomness. For example, say we set the Velocity property to 50, then set Velocity Random to 1.
Every new particle will has a random velocity between 0 and 50 (Figure 20.4).
FIGURE 20.4
An example of the Random property in the editor.
Curves
Additionally, many properties have a Curve field. This allows you to change the property over time, similar to the Color Ramp. For example, you
might want particles to start at a certain size but end as a different size.
To create a curve, click on the property field and select New CurveTexture. Once created, click on it to edit the texture. This should open a
new Curve window at the bottom of the editor (Figure 20.5). Here, you can edit the curve by dragging around points and modifying the bend.
You should see results immediately in the editor.
FIGURE 20.5
The Curve editor window. This particular curve starts the particles on full scale (1.0) but ends the particles so small, you can’t see them
anymore (0.0).
TRY IT YOURSELF
Creating a Flame/Torch
In this Try It Yourself, we’ll create a simple particle system that simulates a flame or a torch.
1. Create a
Particles2D node.
2. Create or find an image of a white square or a white circle. Set this image as the Texture.
3. Create a Process Material. Disable the gravity, set the direction to −45, and increase the initial velocity. This ensures that the
particles fly upwards.
4. Create a Color Ramp. Click on the property to create a new GradientTexture. Click the GradientTexture to edit it. In the edit
window, create a new Gradient.
5. Edit the gradient. Create new points and make a gradient that moves from white to orange to red. It should look like Figure 20.6.
FIGURE 20.6
A gradient. You can create new points by clicking anywhere, delete points by right-clicking on them, and edit the color of the point
by clicking on the big solid square on the right.
6. Create a Scale curve so that particles get smaller and smaller as they get higher and higher.
7. Play around with other properties to get the most realistic fire you can possibly make.
111111111
22222222Particles2D Settings
Whereas the Process Material determines what process the particle goes through, the properties of the
Particles2D node determine how
a particle starts and ends (Figure 20.7).
FIGURE 20.7
The properties of the Particles2D node.
Let’s take a look at what everything means:
Emitting: When this is turned “on,” the node will continually emit particles. When turned “off,” it does nothing.
Amount: The number of particles created. When a particle dies (at the end of its lifetime), a new one is automatically created (at the start
of its lifetime) to keep the number steady. The time between particles being created, therefore, depends on the Lifetime property.
Lifetime: How long a particle lives in seconds. In Figure 20.7, particles will live four seconds. This means that every 4/8 = 0.5 seconds, a
new particle is created.
One Shot: When turned “off,” the default behavior of particles is used, which means they are constantly generated. When turned “on,” the
node will shoot all of its particles at once and then stop.
Preprocess: Determines how many seconds of particle simulation is preprocessed. Preprocessing means before the particles are
shown, the node already calculates a few seconds of simulation and saves it. This is useful if, for example, you start a scene with many
particle nodes immediately emitting. If you don’t preprocess, the screen will likely lag for a few seconds when the scene is loaded.
Speed Scale: Used to speed up or slow down the particles. A number higher than 1 will speed everything up. A number lower than 1 will
slow everything down. (This also influences the settings in the Process Material, not just how fast particles are created.)
Explosiveness: By default, there’s a constant interval between new particles that are created. By setting a high explosiveness, you
change this. Many particles are created shortly after each other at the start of their lifetimes instead of distributing their creation evenly
along their lifetimes. It’s an explosion of particles.
Randomness: Adds overall randomness to all (physics-related properties of) particles.
TRY IT YOURSELF
Creating an Explosion
In this Try It Yourself, we’ll create a particle system to simulate a bo
mb exploding.
1. Create a
Particles2D node.
2. Again, use an image of a white square or a white circle. Set this image as the Texture.
3. Create a Process Material. Disable the gravity and set the Spread to 180. Set a very high initial velocity and use some
damping.
4. Create some randomness in the initial scale of particles. You can create a Scale curve, but this time, make the particles bigger
as they get further away.
5. Create a Color Ramp again. This time, let it fade from white to white, but make the alpha of the end color 0. This makes the
particles fade away the further they get from the blast.
6. In the node settings, create a huge amount (say, 50 or 100) of particles. Set the Explosiveness to 1 and turnOne Shot “on.”
7. Now, every time you toggle Emitting “on,” it will explode.
Animated Particles
You can animate particles the normal way (with keyframes), but it probably won’t look good. All particles follow the exact same animation,
regardless of when they started.
In 2D, we can animate particles with a spritesheet (Figure 20.8). Instead of providing an image as texture, you can provide an image
containing multiple frames of an animation. Using the H Frames and V Frames properties, you can cut it into frames.
FIGURE 20.8
A spritesheet as texture, cut into the right dimensions.
Now, go to the Process Material and then to the Animation property dropdown menu (Figure 20.9). If you set the Speed property to anything
higher than 0, it starts animating the particles by going through the frames from left to right and top to bottom. At the bottom, there’s also a
toggle to make the animation Loop.
FIGURE 20.9
The animation properties of the Process Material.
111111111
22222222Local Coordinates versus Global Coordinates
In a sense, the
Particles2D node is the parent of all its particle children. That’s why, by default, it actually behaves like a parent node. If you
move the
Particles2D node, all of its particles move with it, even the ones that are already halfway through their lifetime. This property is
called Local Coords (Figure 20.10), and is found under Drawing.
FIGURE 20.10
The Local Coords property.
By default, it is turned “on.” This means every particle’s position is remembered local to its parent and follows wherever the parent goes.
If you turn it “off,” this does not happen. Every particle remembers its own position in the scene. When the
Particles2D node moves, all
existing particles do not respond. Only new particles start from the new position.
When should you turn off Local Coords? For example, you have a race car in your game and there’s smoke leaving the exhaust pipe. It looks
odd if the smoke moves with the car—it should go in the other direction. The smoke is independent of the car, so that’s when you’ll want to use
global coordinates instead.
Scripting Particles
Just like every other node, the
Particles2D node can be scripted. Every property is accessible and editable withGDScript. However,
because particles aren’t nodes themselves, you can’t script each individual particle. (You should be glad you can’t, as it’s what makes them so
extremely fast.)
As a quick example (Listing 20.1), the following function is called on a particle node to make it explode.
LISTING20.1 Scripting Particles
Click here to view code image
func explode():
set_explosiveness(1.0)
set_oneshot(true)
set_emitting(true)
3D Particles
As you probably know by now, 2D and 3D are each other’s mirrors inG
odot. Whatever node exists in 2D also exists in 3D. So, naturally, the
Particles2D node has a 3D alternative called the
Particles node.
The Particles Node
The
Particles node emits 3D particles. Instead of a texture, it requires a mesh. If you look in the properties, however, you’ll find not a mesh
property, but a property called Draw Passes (Figure 20.11).
FIGURE 20.11
The Draw Passes property with one pass set to a cube.
The reason for this is that the
Particles node can emit multiple meshes at the same time. By increasing the Passes property, more
passes are added below the first one. Each of those can be set to a (different) mesh, and all of the passes are combined with the particle
that’s emitted.
Order is important here. The meshes are drawn from the first pass to the last. So, if we add a mesh to pass 2 that is much bigger than the
cube, it completely hides the cube.
The Good News
Everything else in 3D works the same as in 2D! You need to set at least one Draw Pass and a Process Material, then you’re good to go. You
can edit the same set of properties with the same effect.
Using 2D in 3D
In Hour 13 (3D Graphics), it’s mentioned that 2D nodes work in 3D as well, but they’re fixed to the camera. The same is true for the
Particles2D node—it can create flat 2D particles in a 3D game.
One may be tempted to think this is easier and leads to better performance than 3D particles. For example, if your player is shooting bullets,
you can replace them with flat images instead of actual bullet meshes. While it sounds good, it’s not what the node was made for, and the
calculations you’d have to do (to reposition the particles properly) are not worth the effort.
Instead, it’s often best to use a flat Plane or Quad mesh that hold the 2D texture that you want in 3D space.
TIP
111111111
22222222The Bullet Example
We used bullets as an example because many beginning game developers use it when they first embark on a particle adventure. In real
games, however, it’s never used this way.
Why not? First and foremost, particles are for visual effect only and are supposed to be unpredictable. An explosion (generally speaking) looks
the same on every computer, but the details will be random, and thus different. In the case of a bullet, you need to control exactly where it goes.
Second of all, your game will most likely shoot hundreds of bullets per second, and it has to check whether any of them collided with anything.
On top of that, they move too fast to see. No computer can handle this, not until we get quantum computers.
Instead, games often shoot a straight line from the player’s gun and see what object it hits first. Then they draw a bullet hole on that object and
drop a shell casing for effect. No bullet is actually shot. (It feels like a magician’s trick, doesn’t it?)
About Performance
The previous tip neatly leads to our next subject: performance. Particles were invented to increase performance of scenes with many, many
objects or visual effects of the same type. So, for most use cases, particles won’t be a performance problem.
It must be said, though, that a 3D mesh requires more computational power than a 2D texture. You’re likely to hit the limit much earlier with the
Particles node than with the
Particles2D node. The easiest solution is to keep your meshes as simple and straightforward as
possible.
Alternatively, you can abandon the
Particles node altogether and see if the
MultiMeshInstance node is faster.
TIP
Smart Use of Particles
Particles are mostly used for visual effect. They can create smoke, fire, rain, dazzling sparkles, and much more to make your game look
amazing and real. This also means, however, that they are useless when off-screen.
If you have many particles in your game and you notice they are hurting the game’s performance, you might save a lot by disabling all particles
that are off-screen.
Summary
In this hour, you learned how to add the 2D and 3D particle nodes to your game. You learned the steps that enable them to work and display
something. (In 2D, this means adding a texture and process material. In 3D, this means adding a draw pass and process material.) You
learned how to edit the process material and set properties to get the particle effect you want. You learned how to make properties change
over time with ramps and curves. You also learned how to edit the node’s properties to gain even more control over your particles. Finally, you
learned about performance and practical use of particles.
Q&A
Q. In the “bullet example” tip, you mentioned it’s possible to check if particles collide. How do I do that?
A. Unfortunately, inGodot 3.0 there is no such option, but there is inGodot 3.1. Additionally, there are other particle nodes not mentioned,
such as the particle attractor, which attracts all particles within its vicinity (like a magnet or the gravity of a planet).
Q. Is there a limit to the number of particles a node can emit? Or the amount of particle nodes in a scene?
A. If you test this, you’ll see the limit is around 100,000 (for the number of particles). As usual, there’s no limit to the amount of particle nodes;
you just need one for every single particle effect. However, if you ever hit a limit, you can be sure that you’ve gone too far and must kick
down your particle use a notch.
Q. What happens to the particles when I rotate or scale the parent node?
A. Everything rotates and scales with it, even the gravity. That’s why if you want to make your particles jump upwards at the start, for example,
it’s not useful to rotate the node 180 degrees. It makes the gravity go upwards as well.
Workshop
Now that you have finished the hour, take a few moments to review and see if you can answer the following questions.
Quiz
1. True or False: one Particles(2D) node can emit multiple types of particles.
2. True or False: each individual particle can be scripted.
3. The determines when a particle starts and ends; the determines how the particle develops over time.
4. True or False: it’s impossible to animate particles.
5. To get an explosion, one must edit the , turn on , and turn off/on .
6. True or False: the Particles node can also use 2D textures.
7. True or False: you cannot have a Particles node with zero draw passes.
111111111
222222228. Say you’re making a game with a flying character, using a jetpack. Smoke and fire are released underneath him all the time, using
particles. Would you turn the Local Coords property on or off?
9. Continuing from the last question, how would you turn the smoke from dark gray (at the start) to transparent (at the end)?
Answers
1. False. They can only emit one type.
2. False. They work together as a system and are mainly used for visual effects with no influence on the actual gameplay.
3. Particles(2D) node, Process Material
4. False; you can animate them with keyframes (though it’s recommended to use curves for that) or by adding a spritesheet as texture.
5. Explosiveness, One Shot, Emitting
6. False. It can only use meshes.
7. True. You always need at least one (with a mesh in it).
8. Off. The character moves around, and the particles should not move with him once released.
9. Create a Color Ramp. Set a gradient, which starts with dark gray (with alpha channel set to 255), and ends with the same dark gray (but
with alpha channel set to 0).
Exercises
Exercise 1: Make rain pour from the current mouse position.
1. Create a
Particles2D node. Set the texture to something that looks like rain. (A thin, long rectangle that’s blue-ish and slightly
transparent usually works.)
2. Tweak all the properties until you’re satisfied.
3. Create a script on the node. Give it an update function and update the position to the mouse position.
Exercise 2: Make fireworks explode when you click at the mouse position.
1. Create another
Particles2D node. Tweak the properties so that it’s explosive and creates many particles that fly off in random
directions and have different colors. (You can also play around with scale.)
2. Create a script on the node. Give it an input function and perform set_emitting(true) if the mouse is clicked. (Make sure the
particle node has the right position.)
3. Alternatively, you can write a script to move the particle node upward (decreasing its y-position). Once it has reached a certain height
near the top of the screen, that’s when the fireworks explode.
Exercise 3: Perform the previous exercises, but for the
Particles node instead.
111111111
22222222