# <center><i class="fa fa-edit"></i> Basic VFX Graph </center>

###### tags: `Blog Tutorial`

:::info
**Goal:**
- [x] Understand how to use basic VFX graph
:::

:::warning
**References:**
- [Visual Effect Graph - Realtime visual effects In Unity 2018.3](https://www.youtube.com/watch?v=SUZzJcBIK80)
- [Visual Effect Graph](https://unity.com/visual-effect-graph?utm_source=evangelism&utm_medium=social&utm_campaign=evangelism_global_generalpromo_2018-10-23-vfxoverview&utm_content=eva&aid=1011l3LoF&pubref=evangelism-social-vfxoverview)
- [Make Awesome Effects with Visual Effect Graph in Unity!](https://www.youtube.com/watch?v=LhvnIOlmXMM)
:::

[TOC]

## I. Introduction to VFX Graph in Unity

- Particle system is not only tool available in Unity to create VFX

- The visual effects graph is a another tool (and even more powerful) to create stunning visuals in unity projects. The visual effects graph uses nodes and blocks workflow that's quick to learn and familiar to users who have use Unity Shader graph

- The visual effect graph and the existing particle system will co-exist because the both have different advantages & disadvantages. Below is the difference between them that is explained in the [Visual Effect Graph - Realtime visual effects In Unity 2018.3](https://www.youtube.com/watch?v=SUZzJcBIK80) Video in Youtube
<div style="text-align:center">
<img src="https://i.imgur.com/xnH3dBt.png"/>
</div>
<br>

- Some VFX suited for VFX Graph:
- environment lit smoke
- fluid simulations
- detailed spell effects

- Some VFX suited for the Current Particle System:
- debris
- sparks
- projectiles

- To learn more on VFX graph, visit [Visual Effect Graph](https://unity.com/visual-effect-graph?utm_source=evangelism&utm_medium=social&utm_campaign=evangelism_global_generalpromo_2018-10-23-vfxoverview&utm_content=eva&aid=1011l3LoF&pubref=evangelism-social-vfxoverview)

## II. Project Setup

- So to make our VFX graph, first, we need to make a new project and remember to use the URP since the renderer cannot work in the regular pipeline. Let's call our project "VFXGraphTutorial"
<div style="text-align:center">
<img src="https://i.imgur.com/lNG2HfI.png"/>
</div>
<br>

- Now, let's delete the examples assets except the floor from the default scene of the URP
<div style="text-align:center">
<img src="https://i.imgur.com/mSL3VzX.png"/>
</div>
<br>

- Next, import the VFX Graph Package
<div style="text-align:center">
<img src="https://i.imgur.com/oCGg16I.png"/>
</div>
<br>

## III. Making a Basic VFX Graph

- Now, let's start creating our VFX Graph. Create the directory & the Visual Effect Graph file named "TestVFX"
<div style="text-align:center">
<img src="https://i.imgur.com/i9mNrX3.png"/>
</div>
<br>

- If we drag the VFX to the scene as an object, we can already see the effects that it makes
<div style="text-align:center">
<img src="https://i.imgur.com/GDUsQXk.png"/>
</div>
<br>

- To edit the VFX Graph, double click it from the directory & we can see the node based strucuture just like what we saw in the Shader Graph.
<div style="text-align:center">
<img src="https://i.imgur.com/yFxqoND.png"/>
</div>
<br>

:::info
**Note:** Don't worry if we don't understand too much right now. Basically, the visual effect graph is like a timeline with nodes. Let's just try to follow the tutorial to see what happens. If ou want to learn more first, then visit https://docs.unity3d.com/Packages/com.unity.visualeffectgraph@12.0/manual/index.html
:::

- First, let's try to manipulate the Spawn Rate in the 1st to 16000 & the Capacity in the 2nd node to 320000
<div style="text-align:center">
<img src="https://i.imgur.com/4xO3khU.png"/>
</div>
<br>

- Suddenly, we can see that the amount of bubbles in the VFX is increased. So that is the function of the spawn rate & capacity
<div style="text-align:center">
<img src="https://i.imgur.com/clZ1plf.png"/>
</div>
<br>

- Edit back the Spawn Rate to 16 & the Capacity to 32. And let's try to add a gravity block in the update node
<div style="text-align:center">
<img src="https://i.imgur.com/8T6sauJ.png"/>
</div>
<br>

- Suddenly, we can see that the bubbles fall
<div style="text-align:center">
<img src="https://i.imgur.com/pVQu8xD.png"/>
</div>
<br>

- Let's remove the gravity and random blocks
<div style="text-align:center">
<img src="https://i.imgur.com/A6r9F5U.png"/>
</div>
<br>

- Now, let's add a set lifetime, set velocity & set position block inside the Init node
<div style="text-align:center">
<img src="https://i.imgur.com/2oDfNbK.png"/>
</div>
<br>

- We can see that our bubbless shoot straight up in the scene, just like what we set in the VFX graph
<div style="text-align:center">
<img src="https://i.imgur.com/7v5Nx7e.png"/>
</div>
<br>

- Since our current VFX is a bit boring, let's add a new sine wave node & connect its output to the x input of the position block
<div style="text-align:center">
<img src="https://i.imgur.com/lcCmHPC.png"/>
</div>
<br>

- Try to modify the value of the input and we can see the position where the bubbles spawn will be changing
<div style="text-align:center">
<img src="https://i.imgur.com/ZTEMa1K.png"/>
</div>
<br>

- To make the change constantly happening, we just add a total time node and connect its output to the input of the sine wave node
<div style="text-align:center">
<img src="https://i.imgur.com/vPAaAda.png"/>
</div>
<br>

- Now, we can already see some OK VFX
<div style="text-align:center">
<img src="https://i.imgur.com/kgL02tE.png"/>
</div>
<br>

- We can also add property like in the shader graph. Let's try it by making a sineMax property from the blackboard & edit the contents to this
<div style="text-align:center">
<img src="https://i.imgur.com/cqVSbkk.png"/>
</div>
<br>

- Drag the sineMax to the graph and make a connection to the Max input of the Sine Wave node
<div style="text-align:center">
<img src="https://i.imgur.com/Ui4KlQG.png"/>
</div>
<br>

- Now, we can edit the Maximum value of the Sine Wave node directly in the inspector panel through the use of the sineMax property. Remember to tick the property to override its default value
<div style="text-align:center">
<img src="https://i.imgur.com/EKxlIcE.png"/>
</div>
<br>

- Because we use the property feature, we can now duplicate the VFX object & make direct individual edit of the parameter without affecting the other object and editing the contents of our VFX graph
<div style="text-align:center">
<img src="https://i.imgur.com/RiFi8a9.png"/>
</div>
<br>

- Next, let's make our VFX more interesting by giving some colors. Add a new gradient property
<div style="text-align:center">
<img src="https://i.imgur.com/lKIoBvl.png"/>
</div>
<br>

- Now, connect the the output of the new property node to the input of the set color over life block
<div style="text-align:center">
<img src="https://i.imgur.com/zVMC3VJ.png"/>
</div>
<br>

- Let's add some cool colors
<div style="text-align:center">
<img src="https://i.imgur.com/f8yVEke.png"/>
</div>
<br>

- We can also edit the spawn rate
<div style="text-align:center">
<img src="https://i.imgur.com/"/>
</div>
<br>

- Let's also edit the Main Texture
<div style="text-align:center">
<img src="https://i.imgur.com/HMnXxlV.png"/>
</div>
<br>

- And we have some cool VFX with colors. Of course to make it more beautiful, we need to do more work
<div style="text-align:center">
<img src="https://i.imgur.com/uJlYbGs.png"/>
</div>
<br>

## IV. Fire & Smoke VFX from VFX Package Samples

- Now of course we do not have to make our own VFX from scratch everytime. Unity actually provide us some basic VFX from the package. To use them, first import the VisualEffectGraph Additions package
<div style="text-align:center">
<img src="https://i.imgur.com/19mUz8h.png"/>
</div>
<br>

- Next, navigate to the sample VFX directory to see some premade VFX
<div style="text-align:center">
<img src="https://i.imgur.com/Jkwb4Dm.png"/>
</div>
<br>

- Here, we have a bonfire VFX from the sample asset
<div style="text-align:center">
<img src="https://i.imgur.com/zqqqKZG.png"/>
</div>
<br>

- We also have a smoke VFX from the sample asset
<div style="text-align:center">
<img src="https://i.imgur.com/ZQbsEpM.png"/>
</div>
<br>

- To further study the insides of the sample asset VFX graph, just double click it and we can see how it works
<div style="text-align:center">
<img src="https://i.imgur.com/KM8VJ2v.png"/>
</div>
<br>

## V. Advanced VFX Samples

- Besides the provided VFX sample in the VFX graph package addition. Unity has also provided some advance VFX samples from Unity's Official Github.

- To download the project, visit https://github.com/Unity-Technologies/VisualEffectGraph-Samples

- Next, open the project from Unity Hub
<div style="text-align:center">
<img src="https://i.imgur.com/M2b3YKZ.png"/>
</div>
<br>

- Now, we can load & study some really cool VFX like this morphing face down here
<div style="text-align:center">
<img src="https://i.imgur.com/9YwpLnu.png"/>
</div>
<br>

## VI. Conclusion
:::success
**Conclusion**
- VFX graph is a node based approach to create stunning VFX
- We can create our own VFX graph just like we can create the shader graph
- Unity has provided some simple VFX samples and also some advance VFX samples so that we can study and reuse it
:::