To give our game worlds some depth and appeal, we want to add some life to the background. Particles can be a good option to achieve effects like falling leaves, rain, and twinkling stars.
In this tutorial, we are going to use particles to create an animated star field that covers the entire screen.
You will also be able to use the techniques we’re going to explore for many other visual effects:
To follow this tutorial, you need to know:
Let’s get started creating the star field using Godot’s particle system.
For that, create a new scene and add a Particles2D node as its root and name it StarField.
To make the particle system spawn stars, we need to assign a texture to its Texture property. You can find it under the Textures category in the Inspector.
In the File System dock, you can find the image of a star in the star_field folder. Drag and drop the star.svg file on the Texture property in the Inspector. As soon as you did so, you will see stars spawning from your particle system.
The stars are disappearing too fast. We can increase the Lifetime from 1 to 6 seconds to fix that.
With that, we can create our particles’ material to control the spawn location and the animation of the stars.
To add a new material, you can search for the Material property in the Inspector’s search bar at the top. Left-click on the Empty slot next to it and select the New Particles Material option from the drop-down menu.
The particles should start to fall.
From here, we are going to focus on this material resources. While we can expand or fold the resource by left-clicking on it, we can also “enter” it and make it use the whole Inspector. To do so, right-click on the material slot and click on Edit.
Now, the Inspector should only show the material’s properties.
By default, the particle system spawns particles at a fixed location. We can change that so it distributes stars inside a predefined shape.
As our screen is rectangular, we need a rectangular shape to cover it.
Unfold the Emission Shape category, and click on the drop-down menu, where it says Point. Select the Box option.
The box shape uses extents to define its area, which is the equivalent of a radius but for rectangles, meaning that when you set its x property, the width of the box is double that. So we need to use half the screen’s horizontal size for x, half the screen’s vertical size for the yvalue and leave z as zero. Respectively set the Box Extents’ x and y components to 512 and 300.
The particles now spawn across a large rectangular shape instead of a single point. Let’s move the StarField to the center of the screen by setting its x position to 512 and its yposition to 300. That way, our particles will cover the entire screen.
Now we set up the particle material, let’s give our stars some animation to make our background feel alive. We are going to make the stars rotate, and scale up and down, so they don’t pop out of nowhere.
First, we need to turn off the gravity, so the particles stay where they spawned. Search for the Gravity property under the Gravity category and set all its values to 0.
Next, let’s make the stars scale in and out over their Lifetime. Under the Scale category we have the Scale Curve property. It allows us to animate each particle’s scale over their Lifetime. Left-click on the [empty] slot and create a curve texture by clicking New CurveTexture.
Click on the CurveTexture, then on the Curve inside of it to display the graph editor.
In the curve editor, the horizontal axis represents the particle’s Lifetime, and the vertical axis represents its scale relative to the Scale property. A value of 0.5 in the curve’s vertical axis with a value of 2 in the Scale property means the particle will have the same size of its source texture.
For our effect, we will make the stars twinkle instead of just fading in and out once. To achieve that, we need to add some extra points in our curve to have the particle scale up and down at least twice.
To add points, right-click anywhere on the curve and select Add Point.
Click and drag on a point to move it. You want to move points so the scale animation starts at a y value of 0 and ends at zero. Your final curve should also look like an M shape, making the star appear and disappear twice.
Also, increase the Scale Random above the Scale Curve up to 1 to randomize the animation and add variety to the stars’ animation. Your Scale Curve should look something like this:
Now the stars appear and disappear, we’re going to make them rotate. Expand the Angular Velocity category. These properties control the starting angular speed of individual particles. Set the Velocity to 50, and increase Velocity Random to 1. The random slider makes it so each particle will have an angular velocity anywhere between 0 and 50 degrees per second.
We are not going to work with curves here, because the spinning speed will be constant along the particles’ life span.
With that, our material is ready. Only some tweaks left, and our effect will be ready.
Let’s go back to the StarField node. Click the back arrow at the top of the Inspector to go back to the previously edited object.
When we open the scene or first load it in a game, stars slowly appear as the particle system starts to spawn them. You can test how the effect will look like the first time it loads by Left-clicking on the Particles menu at the toolbar and Restart the particles.
This is because we are using an Explosiveness of 0, this means the particles will spawn one after the other. The Explosiveness property represents how fast the effect will reach the Amount number of particles along its Lifetime duration.
We can pre-process the particle system so stars fill up the screen from the moment we load the scene. For that, we have to change the Preprocess property. It starts the particle system’s simulation at the Preprocess time in seconds. Set it to 6 seconds, like the star field’s Lifetimeproperty, to start from a complete cycle. By the end, this is how the Time category of the Inspector should look like:
The Visibility Rect of the particles controls when they show on the screen or not. If this rectangle is outside of the game’s view, the particles disappear. We need to increase the size of this rectangle, so the stars don’t become suddenly invisible when we scroll the view.
Expand the Drawing category of the Inspector and set the Visibility Rect to:
x: -512y: -300w: 1024h: 600The x and y values move the rectangle, so it’s centered on the particle system. We set them to half the w and h values that control the width and the height. These values make the rectangle cover the whole screen.
If you want to add depth to your background, you’ll want it to scroll slower than your camera. To do so, you can use a ParallaxBackground node with a ParallaxLayer. You can layer the stars by adding multiple layers and instancing a StarField inside each of them.
Change each ParallaxLayer’s Motion Scale property to make them move at different speeds. Also, set the Motion Mirroring to the screen’s size. This property makes the layer duplicate the stars effect seamlessly as the camera moves.
With that, our effect is ready! Here is how it looks like with a Camera2D moving around.