Introduction to the Visual Effect Graph

Understanding Point Caches

One useful tool for setting particle positions is the point cache. A point cache is a map of points based on the mesh of a 3D object. Setting the particle positions using a point cache allows them to take the shape of any 3D object, as shown in this VFX Graph sample scene from Unity:

For your complex particle effect, the particles will form a sphere when they reach the tower. To achieve this, you’ll need a custom point cache.

Creating a Point Cache

In RW/VFX, create a folder called pCache, which is where you’ll store the point cache you generate. Next, open the Point Cache Bake Tool from Window ▸ Visual Effects ▸ Utilities.

Open the Select Mesh window by clicking the Mesh field and selecting the Sphere mesh.

Click Save to pCache File and save it to RW/VFX/pCache.

That’s all it takes to create a custom point cache! Next, you’ll put your construction to good use.

Using Point Caches

In the Material Stream graph, add a Set Target Position from Map block to the Initialize Particle context.

Then, create a Point Cache node to the left of Initialize Particle. Set its Point Cache value to the Sphere point cache you created in the previous step. Next, connect AttributeMap: Position to Attribute Map on Set Target Position from Map.

Now, drag TowerPosition into the graph and connect it to the Value Bias field on Set Target Position from Map. This sets the tower’s position as an offset to the point cache position.

Now that you’ve set the target position, you can use this value in an operation that will move your particles to the point cache once they’ve reached the tower.

For this operation, you need five new nodes. Position these in new, empty area of the MaterialStream graph editing window.

• Age Over Lifetime
• Sample Curve
• Get Attribute: position
• Get Attribute: targetPosition
• Lerp

Configure Lerp to take two Vector3s and set the value of Sample Curve to look like this:

Set the first key to (X:0.25, Y:0) and the second key to (X:0.5, Y:1.0). Then, connect the nodes as follows:

• Age Over Lifetime output to Sample Curve Time input.
• Sample Curve s output to Lerp S input.
• Get Attribute: position output to Lerp X input.
• Get Attribute: targetPosition output to Lerp Y input.

Once you’ve connected the nodes, add a new Set Position block to Update Particle, underneath the first one. Then connect the output of Lerp to its Position slot.

This creates a transition between the current position of each particle and the point cache, which you set in Initialize Particle.

You’re almost done setting up your particles’ movement. There’s just one more step to make your effect look great.

Adding a Size Change to the Particles

For your final touch, you’ll make the particles disappear more realistically. To start, add a Multiply Size to Output Particle Lit Sphere.

Create an Age Over Lifetime and a Sample Curve. Connect them like so:

• Age Over Lifetime output to Sample Curve Time input.
• Sample Curve s output to Multiply Size ‘Size’ input.

This is a simple operation that causes the particle size to jump quickly, then slowly fade. This size change, along with the movement noise, will make the particles shift and dissipate as they reach the end of their lifetime.

Save your work. It’s time to add your new effects to the tower upgrades.

Triggering the Visual Effects in the Sample Project

You’re now ready to integrate your Visual Effects, Burst and MaterialStream into the tower upgrade process.

First, drag MaterialStream into the Hierarchy to create a GameObject. Next, drag that object into RW/Prefabs/VFX to create a prefab of it, then delete the object from the Hierarchy.

Adding the Burst Effect

Open UpgradableTower from RW/Scripts and change the code as follows:

public class UpgradableTower : MonoBehaviour
{
    public Material defaultMaterial;
    public Material highlightMaterial;
    public Material selectedMaterial;
    public Transform upgradeContainer;
    public GameObject burstEffect;           // 1

1. Here, you declare a public GameObject called burstEffect.

In SetUpgrade, at the bottom of the method, add a line:

public void SetUpgrade(UpgradeType newUpgrade)
{
    /* ... */

    upgradeContainer.Find(upgrade.ToString()).gameObject.SetActive(true);
    burstEffect.SetActive(true);            // 1
}

1. In this line, you set burstEffect to Active.

Save your changes and return to the editor. Then double-click RW/Prefabs/Castle Parts/UpgradableTower to edit it.

Drag Burst from RW/Prefabs/VFX into the ParticlePoint container.

Then, drag the Burst you just added onto the Burst Effect field of the prefab’s Upgradeable Tower.

Deactivate Burst by deselecting the box next to its name in the Inspector.

Click Play and give it a try!

Adding the Material Stream Effect

Now, it’s time to put your MaterialStream effect in place.

Open ResourcePool from RW/Scripts and change the code as follows:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.VFX;     // 1

public class ResourcePool : MonoBehaviour
{
    [Header("Values")]
    public float moveRate;
    public float moveSpeed;
    public float baseScaleMultiplier;
    public float scaleMultiplierIncreasePerUnit;
    public int unitsPerIcon;
    public float iconSpawnRate;
    public ResourceType type;

    [Header("Prefabs")]
    public GameObject resourceIconPrefab;
    public GameObject materialPoolEffectObjectPrefab;      // 2

    private VisualEffect materialPoolEffect;      // 3

Here are the changes you made:

1. Added a reference to the VFX name space.
2. Declared a public GameObject called materialPoolEffectObjectPrefab.
3. Declared a private VisualEffect variable called materialPoolEffect.

Now, replace all of ShowVisualEffect with the following:

private void ShowVisualEffect()
{
    shouldSpawnIcons = false;
    StopAllCoroutines();

    poolIcon.SetActive(false);

    // 1
    Transform towerUpgradePosition =
        UpgradeCastle.GetSelectedTower().transform.Find("ParticlePoint"); 

    // 2
    GameObject materialPoolEffectObject =
        Instantiate(materialPoolEffectObjectPrefab); 

    materialPoolEffect = materialPoolEffectObject.GetComponent<VisualEffect>();

    // 3
    materialPoolEffect.SetVector3("StartPosition", poolIcon.transform.position); 

    // 4
    materialPoolEffect.SetVector3("TowerPosition", towerUpgradePosition.position);

    // 5
    materialPoolEffect.SendEvent("OnPlay"); 

    // 6
    Invoke("DeactivatePool", 3.0F); 
}

Here’s what the code above does:

1. Gets the transform you’ll use to set TowerPosition.
2. Instantiates a new MaterialStream.
3. Sets StartPosition.
4. Sets TowerPosition.
5. Triggers the OnPlay event.
6. Uses Invoke to deactivate the pool after three seconds, to wait for the particle effect to finish.

Save your changes to the script and return to the editor, then double-click RW/Prefabs/UI/Pool to edit it.

Drag MaterialStream from RW/Prefabs/VFX onto the Material Pool Effect Object Prefab field of the prefab’s Resource Pool.

That’s it! Click Play and admire your hard work! It looks wonderful. :]