Introduction to the Visual Effect Graph
In this Visual Effect Graph tutorial, you’ll learn how to easily create complex visual effects in Unity with a node editor. By Harrison Hutcheon.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Introduction to the Visual Effect Graph
35 mins
- Getting Started
- What Is the Visual Effect Graph?
- Exploring the VFX Graph
- Mouse and Keyboard Shortcuts
- Creating a Simple Particle Burst Effect
- Initializing the Particles
- Setting Random Velocity
- Adding More Variation With Turbulence
- Changing the Particles’ Size and Color
- Setting up the Complex Particle Effect
- Parameter Binders
- Controlling Particle Movement
- Adding Noise
- Understanding Point Caches
- Creating a Point Cache
- Using Point Caches
- Adding a Size Change to the Particles
- Triggering the Visual Effects in the Sample Project
- Adding the Burst Effect
- Adding the Material Stream Effect
- Where to Go From Here?
Mouse and Keyboard Shortcuts
You can navigate much of the interface with the mouse, but here are some handy shortcuts:
Mouse:
- Left-click: Select.
- Left-click and drag: Select multiple objects.
- Shift-Left-click: Lasso selection.
- Right-click: Open the context menu for the hovered node.
- Middle-click and drag or Alt-Left-click: Move the graph.
Keyboard:
- Space: Opens the Node menu if hovering over an empty space or the Block menu if hovering over a context.
- A: Zooms out to show the entire graph.
- F: Focuses the view on the selected node.
- [ and ]: Switches to the next or previous block or context in the graph.
- Tab: Cycles through input fields.
Now that you have a basic understanding of the interface and its workflow, you’ll add a visual effect to your scene and configure its properties.
Creating a Simple Particle Burst Effect
Start by dragging Burst from RW/VFX into the Scene Hierarchy. This creates a new GameObject for your visual effect.
Now, set Burst’s transform to the scene’s origin: (X:0, Y:0, Z:0) then focus the scene view on it. You’ll see a default particle effect in the scene.
Next, open Burst’s VFX Graph pane and change its configuration to spawn particles only once instead of in a continuous stream.
Click the Spawn context and press Space to bring up the block menu. Select Spawn ▸ Single Burst (Spawn), then delete Constant Spawn Rate and set Single Burst‘s Count to 500.
As you may suspect, this means that 500 particles will simultaneously spawn at the start of the simulation. It should be quite a display!
Initializing the Particles
In Initialize Particle, set the capacity to the spawn count: 500 particles. This lets the main simulation loop accept the maximum number of particles.
The particles should fly out in all directions from the spawn point at the start of the effect. You don’t want the distribution to be too uniform, or the burst will look like a growing dome or sphere.
To create varied outward movement, use Set Velocity Random, which is already in Initialize Particle. You can also find this block by selecting the context, pressing Space and selecting Attribute ▸ Set ▸ Set Velocity Random. Don’t confuse Set Velocity Random with Set Angular Velocity Random!
You can also use the search bar to locate any block.
Now that you’ve found the right block, you’ll set it so the particles’ movement doesn’t look too uniform.
Setting Random Velocity
Set Velocity Random takes two Vector3 values, which define a range for the randomization. For your burst, the particles should fly outwards and upwards from the origin.
Set A to (X:-3, Y:0.1, Z:-3) and B to (X:3, Y:3, Z:3). This ensures that each particle will fly up and out from (X:0, Y:0, Z:0), but at different velocities, creating a scattered burst.
Testing your effect is a little difficult since it only triggers when certain values change. This isn’t ideal if you want to observe your effect immediately after a change. To trigger the burst at the press of a button, you’ll create an Event context.
Right-click the empty space in the graph and select Create Node ▸ Context ▸ Event. The event is labeled OnPlay by default. Connect it to the Start slot on Spawn. Now, you can trigger the effect by clicking the Send button on Event.
Adding More Variation With Turbulence
Burst looks good so far, but you can add even more variation to its behavior with a physical force, like turbulence. Select Update Particle, press Space, and select Force ▸ Turbulence (Force).
Set the Intensity to 5.78.
Now, when you trigger the effect, the particles fly out like before, but turbulence disrupts their trajectory. This makes for a much more interesting effect!
Now that your shape is correct, you’ll make some changes to the size and color of the particles.
Changing the Particles’ Size and Color
Your effect looks good, but you can make it even more interesting with just a few tweaks.
In Output Particle Quad, set the Main Texture to Default-Particle. Don’t confuse this with DefaultParticle. Next, click the line graph in Set Size Over Life to open it.
You want to reverse this graph, to make particles get smaller over their lifetime instead of larger. To do this, edit the first key to (X:0, Y:0.5) and the second key to (X:1, Y:0.08).
Next, you’ll give your particles a warm, fiery glow. In Set Color Over Life, set the first color in the gradient to a deep orange with an intensity of 2 and the last color to a bright yellow with an intensity of 1.2.
Your Gradient editor should look like this:
Your Color editor(s) should look like this:
Finally, your Output Particle Quad context should look like the following:
And your effect is complete!
Finally, drag Burst from the Hierarchy into RW/Prefabs/VFX, then delete it from the Hierarchy. You’ll use this later.
Save your changes, it’s time to work on a different effect.
Setting up the Complex Particle Effect
Your next particle effect is a stream of particles that move from a pool of resources to the top of the tower you’re upgrading.
In RW/VFX, create a new Visual Effect called MaterialStream and open its graph.
Start by creating two Event contexts called OnPlay and OnStop, then connect them to the start and stop slots on Spawn.
Next, in Spawn, delete Contant Spawn Rate and add Single Burst, then set the count to 10000.
In Initialize Particle, set the Capacity to 10000.
Now delete all blocks except Set Lifetime Random. Set the A value of Set Lifetime Random to 4 and the B value to 6.
Add a Set Size block and set its value to 1.
Here is what your graph should currently look like:
For your next step, delete the Output Particle Quad context and replace it with an Output Particle Lit Sphere context. This sets each particle to render as a 3D sphere.
Now, add a Set Color to this context and set it to an RGB value of (R: 255, G: 255, B: 255). Connect the output from the Update Particle context to the input of the Output Particle Lit Sphere context.
This is what you should now have:
Before moving on, take a look at this effect to better understand what needs to happen next.
- You want the particles to move from their respective resource icon to the tower.
- The particles should move in a non-uniform way, so they won’t use a straight line to get to their destination.
- When they arrive at the tower, the particles will take the shape of a sphere.
- While in the sphere formation, particles will shift momentarily, then dissipate.
Now that you’re clear about the effects you want to create, move on to building them.