The actual VFX itself

Now it’s time for the main guest of the event — the VFX Graph! Let’s dive into it right away and create a new Visual Effect Graph object from the Project Browser window.

Create Visual Effect Graph object

A new window should pop up with a VFX Graph editor itself. It will contain a basic system built of 4 main sections: Spawn, Initialize, Update & Output.

In the Spawn section we can tell the particle system how many particles we want to spawn and which way we want them to go: in a bursts or constantly.

The Initialize section allows us to setup some initial (d’uh) values for each particle emitted. We can also set the capacity — how many particles our system can handle or even the bounds for our particles.

We can then change the properties of our particles — such as position, rotation, size and so on. To do this we are using the Update section of VFX Graph.

How each particle is rendered is defined in the Output section as you have probably guessed right now. We can choose from points, lines, quads or even meshes or decals to render our each individual particle.

Visual Effect Graph editor

The VFX Graph uses a Quad as the default output. Our effect requires a Line Output so we have to change it. In order to do so you can right-click on an empty space and select the “Line Output” option from a popup menu. Now just connect the Update section with newly created output node and delete the old Quad Output as shown below:

Line Output setup

In order for the particles to have some sort of a trail, we have to set the Target Offset to vector (0, -1, 0). Before we move to the next step we should add one more thing — a new block that controls the particle color during lifetime. In our case we want our particles to glow with an intense green color at the beginning and then turn bright red and eventually fade out at the end.

Target offset

We should have some sort of a fountain of sparks if we add our newly created VFX Graph to the scene like in the image below.

Time for the tricky part. We have to get the positions on our model where we want our particles to be spawned at. We’ll use the pointCache buffer that we‘ve created in the previous step. In order to access it in our VFX Graph we have to create following parameters :

Texture2D PointCache — reference to the buffer texture

— reference to the buffer texture Float Size — that will hold the size of the bounding box of our characters

PointCache and Size parameters

By dragging and dropping the particle system object from the Hierarchy panel onto the Project panel we can easly create the prefab. It will be useful for referencing it in our Summoner script.

Visual Effect Graph prefab

Summoner. cs and Visual Effect Graph setup

Now we have to relay the pointCache buffer data from our script to the VFX Graph. To do so we have to import our VFX namespace first.

Import VFX

Afterwards, we are going to modify the Summon method to pass the data itself. Additionally we want to sync the position and rotation values between our VFX Graph and our characters.

Summon modification

We are now ready to access and use the newly available data in the VFX Graph itself. Let’s modify the graph and the script as well (as shown below) to be sure that we are writing and reading to/from the pointCache correctly.

Point Output temporary changes

Summoner.cs temporary changes

We should now be able to see a semi-transparent sparkling ghost dancing next to the model as below. That proves our code and graph are working correctly. At this point we have achieved something really appealing that can be used in the future in a totally different way.

PointCache test result

So far so good. We can now revert the last changes and move on as they were meant only for debugging.

We are ready to relay more data between the script and the graph. Let’s take the ClippingLevel and Emit parameters and transfer them as we did in the previous step. The Emit parameter determines if the particle system should spawn the particles or not. It’s obvious that we have to create those parameters in the VFX Graph as well.

Summoner.cs ClippingLevel and Emit

Using the ClippingLevel we can hide the particles which start from the point above the value by setting their lifetime to 0.

Visual Effect Graph ClippingLevel parameter

To control spawning of the particles we will use the Emit parameter with the use of a simple Branch node.

Visual Effect Graph Emit parameter

If we would like to test our scene now, we should have something similar to the image below — our model that vanishes into thin air.

Visual Effect Graph ClippingLevel and Emit parameters result

The particles are spreading in all directions now. That is not exactly how we want them to behave. We want them to swirl and we can use the Update section of the VFX Graph to do so.

I added three forces to system:

the force that pulls them up and keeps them at certain height,

second one is the force that determines the swirl direction

the third force is the centripletal force that keeps the particles on the orbit.

Visual Effect Graph — new forces

I also added a new block to the Output section of our system that will set the scale of the single particle based on its speed.

Visual Effect Graph scale by speed

To improve the overall look of our effect I’ve increased the amount of the particles that is emited, resulting with something like this:

Add forces result

It’s looking pretty neat right now, but the swirl part looks a little bit too dull. Let’s bring some chaos into it.

I’ve used two techniques In order to do this. I’ve modified the forces that are added to the particles. Now every particle has its own sinusoidal orbit with a random frequency. Then I’ve added the block called Turbulence that pushes particle in a pseudo-random direction and rotates the turbulence field around the X axis.

Visual Effect Graph add some chaos

We are almost there folks, finally!

Visual Effect Graph chaos result

All we have to do now is make the particles move to the position of the character we would like to show next. Luckily we don’t have to do anything more in the Summoner.cs script as it has all we need.

When the Emit parameter is set to false, the particles won’t be spawned anymore but the pointCache buffer will still be updated. With the use of the ID property we can assign a new destination for each particle using the data from the provided pointCache. To make the particles move, we will use a new block called Conform to Sphere. Each particle will now try to conform to a different little sphere positioned on a mesh (via the pointCache). I’ve reduced the radius value of the spheres that are being generated to 0.01.

Visual Effect Graph Conform to Sphere

Ladies and gentlemen — The Final Result!