More than a year since the last tutorial! I’ve been busy. It’s not like I had a ton of tutorials here either.
In this tutorial I will show you how to make a very simple idiotic rain VFX that I did myself (with a lot of trial and error). It will be more of a breakthrough than a tutorial from scratch because I wanted to share this in case anyone can find it useful.
First things first I want to thank this guy that made this tutorial:
This tutorial opened my eyes to a lot of VFX Graph functionalities and it’s really worth it. I will try to explain even some details even tho the effect is quite simple, I also want to have a place I can go back to so I can remember what I did. (I’m a begginner on this VFX Graph stuff)
Now, for my Rain VFX I used Unity 2020.3.15f2 with the VFX Graph package and URP.
In this default project generated for the URP template, let’s create a new VFX graph asset on Create -> Visual Effects -> Visual Effect Graph
Double click to open it up, it will give us this screen
Let’s remove Set Size over Life from the Output Particle Quad node (Right click on it and Delete)
Create a new float node (Right click in the black background or use the Spacebar) to set the Constant Spawn Rate on the Spawn node. This will set how much particles are going to spawn and be alive at the same time.
Drag the output value of the float node to the input value called Rate on the Constant Spawn Rate block.
Let’s make this float node an exposed property called RainRate so we can set it from the inspector later on.
Right below it there is the Initialize Particle node, change the capacity to 2000, we plan on setting the spawn rate to 1000.
That means there is enough particles available, even if there is 1000 alive there are 1000 more to show up when the particles start disappearing after their lifetime is over. If you set the capacity to 1000, it will create a vague interval between particle spawns. In our case this is bad because there will not be enough time to see particles fall from the sky continuously and end their lifetime so there is more particles available to keep falling from the sky (I hope I could explain properly). That’s why capacity at 2000, so there is always particles available even if there is 1000 still alive and falling.
Now at the same block of the Capacity property, let’s create a new node for the bounds. That is nice for us to control the size of the area where the particles will be showing and also modify it through the inspector.
Create a AABox node and expose it.
Drag and drop it’s value to the Bounds property of the block.
Drag and drop your VFX asset file to the scene so we can look it while we edit it.
Go into the Properties through the inspector and mark the checkboxes of both RainRate and BoundingBox
Set RainRate to 1000 (if it isn’t already) and you can either configure the BoundingBox through it’s scene editor on the Show Property Gizmos button.
Or through the inspector itself. I will use the size (20, 20, 20) and centered at zero.
Back to the Output Particle Quad node at the bottom, let’s set it up. This is what we have now:
We are going to keep most of the options the same, we are just going to change 2 things: The Main Texture from the main block and the Color from the Set Color over Life block.
I’m going to use a texture that I created in Paint.NET for the drop of the rain
For the color i’m going with this gradient:
The specific values are (13,58,99) for both the extreme colors and the middle color is (81, 102, 191). Now for the alpha values at the extremes is 163.
On the Initialize Particle node, in the Set Velocity Random block we are going to change the min and max values for the Y axis, and clearing the other values for the X and Z axis.
I will chose between -30 and -60, so we have a random velocity applied on the Y axis of each particle of a value between -30 and -60.
Leave the lifetime as it is, between 1 and 3, it is enough since our particles are going down pretty fast.
If you notice now on the preview of the VFX (when clicking on the VFX Graph asset) it shows our particles already falling from the same point.
Now it comes a more complicated part, in which we will setup where each particle starts, so they are occupating all of the bounding box and falling from the top. So let’s add a couple more blocks to the Initialize Particle node.
First is the Set Position node
This will allow us to set the particle’s position.
Then the Set Size node and Set Scale nodes.
Set the Size of the Set Size node to 1, and the scale depends on how you want it to be. I’m gonna go with (0.7, 1.4, 0.7) for the scale, so it stretches a bit more on the height of the drop of rain.
Now, the Set Position node is already in place and by just keeping it at zero you can see that the rain is falling from the middle of it’s bounding box on the preview
What we want is all the particles falling from the ‘sky’, which is the top of the bounding box.
For that we will create a new Divide and Add nodes. Those are mathematical operation that we will use to set the Y value of the particle’s position.
To get the top area of the bounding box what we need is the center position’s Y value PLUS the size’s Y half value. That is the middle height of the box and half the size of the height, so we can move the particle position UP to the top part of the bounding box, where it begins.
Drag and drop the Y field from the SIZE of the Bounding Box to the A value of the Divide node and type 2 on the B value, we won’t drag any input to that, we want the half value of the size’s Y.
Now drag and drop the Y field from the CENTER of the Bounding Box to the A value of the Add node, and for the B value we drag and drop the result field of the Divide node. That is because we want to sum the center Y with half size Y. That will result in the top position that we want.
With the result of this operation we connect it on the Y field of the Set Position node.
You can already see on the preview the particles coming from the top of the bounding box.
Now for the X and Z values of the position we will make pretty much the same calculation. Which is to set a random value between negative half size of the bounding box and positive half size of the bounding box. If the bounding box X/Z values are 20 and the center is 0, then our random number should be between -10 and 10. So each particle appears randomly at some point of these axis. Take a look at the visualization of what I described as if we were looking at the Bounding Box from above it.
Let’s start with the X value. First we create a Divide node. Drag and drop the Bounding Box size’x value to the A value and type 2 at the B value as we did before.
Now instead of adding a number, we already have the maximum value of the X corner, which is 10 (the result from 20 / 2). What we will do now is create a Multiply node.
And with the result of the Divide node we connect to the A value of the Multiply node and type -1 on the B value.
That will give us the negative number of the division’s result, which is -10.
Now we have the minimum and maximum number to calculate a random number between them.
Let’s create a Random Number node.
The seed field should be Per Particle and uncheck the Constant field. You can see we have Min and Max values on this node.
Drag and drop the result of Multiply node to the Min value, and the result of the Divide node to the Max value. That way the Divide node gives us 10 (max) and the Multiply node is giving is -10 (min).
The result of this Random Number node should go on the X value field of the Set Position node.
Now we do the same thing for the Z value.
I could just show you the final result but I will give you a cool tip!
Select the Divide, Multiply and Random Number nodes.
Type Ctrl + D and you will see it will duplicate all 3 nodes. Drag and drop them to the bottom where there is no nodes.
Now the connections with the Bounding Box and the Set Position node are the only thing you have to do. Using the Bounding Box size’s Z value on the A value of the Divide node and dragging the Random Number node result to the Z value field of the Set Position node.
And that will give us this preview.
Now the particles are positioning themselves on random X/Z values at the beginning of their lives and at the top area of the bounding box for the Y value.
If hit Ctrl+S to save your graph and go to the scene you will see that it’s WORKING!
If you zoom out too much the FOG will make it disappear but simply disable the fog on the Scene view here:
And click on the edit gizmos for the bounding box
And you will see this:
Just like we could expect, they are starting from the top of the bounding box and positioning themselves randomly on the X/Z.
And that’s it for this tutorial! Thank you for reading through the end and I hope this could help if you are just starting with VFX Graph like me. The nodes we used here can be used to a lot of other simple and tricky stuff like snow or even some fireflies with nodes we didn’t use here like Sin/Time. I believe you can do those since there is a lot of resources available on youtube and even the unity documentation.
Bye!
