Making Hearts Fly With Unity VFX Graph

Have you ever wanted to make your apps look more spectacular without spending a lot of time and effort on graphics? Here, you’ll learn how to use Unity’s VFX Graph to make stunning visual effects. You’ll use simple, node-based visual logic to control complex simulations, like a flock of flying butterflies. You’ll then see how to adapt the techniques learned to a wide range of other effects you might want to create.

In this tutorial, you’ll learn how to:

1. Create and navigate a VFX Graph
2. Design background visual effects
3. Spawn on-demand visual effects
4. Control properties of visual effects as they run
5. Author and use Point Caches

For this tutorial, you’ll need Unity 2020.3 (LTS).

Getting Started

Download the starter project by clicking the Download Materials button at the top or bottom of the tutorial. To begin this project, you’ll first need to prepare the needed template and folders.

Starting With the HDRP Template

You must make several important choices when setting up a new project, so take it slowly. First, create a new project using Unity 2020.3.

The next decision is to pick a template. Select High Definition RP. This template has many of the resources and project settings you’ll use in this tutorial. The project’s name and location are up to you.

After everything loads, you’ll find a shiny, gold ball in the SampleScene. There’s some great stuff in that sample, which you’ll get to shortly. But it’s best to organize the project a bit first.

Setting up Project Folders

To manage the files and assets that you’re about to make, create some room in the project Hierarchy. First, create Assets/RW to store everything you need for the project. Next, create subfolders for the following types of assets:

1. PointCaches: Holds the Point Cache you’ll create.
2. Scenes: Holds the scene you’ll create.
3. Scripts: Holds the script you’ll create.
4. Sprites: Contains the sample art.
5. VFX: Holds the VFX Graphs you’ll create.

Now that you’ve set up your project, it’s time to add the sample artwork.

Importing Sprites

Open the starter project from the materials you downloaded earlier. It contains two sprites, butterheart and butterheartfull, that you need to create these visual effects.

Drag these sprites into the RW/Sprites folder. Once they’re imported, select each sprite and set Texture Type to Sprite (2D and UI). Next, set Read/Write Enable to True and click Apply.

Now save the project and you’re ready to start hunting for some butterflies. :]

Observing a Box of Butterflies

Unity now provides templates for many common scenarios and some excellent example visual effects. These assets are a great starting place. To find some butterflies, you don’t have to go far, because there are some real beauties right there in the SampleScene.

Finding the Butterflies

With the SampleScene open, find and select VFX ▸ ButterFlies in the Hierarchy. Switch to Scene view and press F to focus on your selection. Do you see them? They’re pretty small, so try zooming in and panning the camera to get a closer look.

Selecting the ButterFlies highlights them and provides access to the Play Controls dialog. Experiment with the controls. You can pause the butterflies in mid-flap and make them zip by increasing the playback Rate.

The Visual Effect itself also contains controls. In the inspector for the ButterFlies, under Properties, you can change the Count, Radius and even Wing Animation Speed. Try it! Just remember to Stop and Play the Visual Effect after changing its properties to see them take effect.

Although these sample butterflies are awesome, you don’t want Unity just giving you cool stuff, right? You want to create that cool stuff yourself. So it’s time to find out how to make these butterflies. After you have a handle on that, you’ll try creating your own effects.

Examining Butterfly Art

The first thing you need to create this effect is art for the wings. Navigate to Assets/Art/Textures/VFX/ButterFlies_8x1 and select the texture to examine it in the inspector. All the butterflies you see in the scene come from this texture. And although all butterflies have two wings, you need only one of each style to create the effect.

Opening the ButterFlies VFX Graph

The second thing you need to create a visual effect is a VFX Graph Asset. In the inspector for the ButterFlies GameObject, look for the General section of the Visual Effect component. Click the Edit button to open the ButterFlies VFX Graph Asset. Maximize the window to get a better view. Some handy controls include MouseScroll to zoom and holding Alt (or Option) (or Middle Mouse Button drag) to pan the graph.

There’s a lot of complexity behind the simple beauty of a butterfly, so it’s worth a stroll through each section to understand how it all works. Before doing that, it’s helpful to understand the basic approach to this kind of animation.

Understanding a Flapping Animation

Like most complex things made using Unity, these butterflies were created by connecting and reusing smaller, simpler things. Complex visual animations are no different. For example, if you wanted to create a character clapping, you could start by making one hand that makes a clapping motion. Then, you could duplicate the arm and mirror it. And voila! A clapping character.

For this butterfly animation, you use the same technique. You start by animating a single wing that flaps. Then, you duplicate it and mirror it. What do you get? A flying butterfly!

That’s why you need only one wing for the art.

Animating a single wing is pretty straightforward. If you’ve animated a door, you’re already familiar with the approach. Pick an edge to be the axis and rotate the door around the axis. Set some limits so the door doesn’t swing too far in one direction or the other, then let it ping-pong between the limits, as needed.

So if you can swing a door in Unity, then you’re halfway to making a butterfly… well, fly!