Making Hearts Fly With Unity VFX Graph

Understanding the VFX Graph Using the Butterfly Example

Before you dive into the ButterFlies graph, copy it. Find the graph at Assets/Art/Particles/ButterFlies, then duplicate it (Control-D on Windows, Command-D on Mac), name it ButterfliesNotes and place it in the RW/VFX folder.

This new graph asset doesn’t live in any scene, but you can still edit it. Select the graph asset and select Open in the inspector, or just double-click it.

While you explore the graph, feel free to add some notes directly to the graph as you learn what each block and node does. Add notes by right-clicking and selecting Create Sticky Note.

You can also group nodes into logical sections: Click-drag to select a group, then right-click one of the nodes, select Group Selection and name the grouping. This is a good way to organize your VFX Graph and make it more maintainable.

Now, you’ll take a look at each of the settings you need to create the butterfly animation. After you have a good grasp of how the butterflies work, you can create your own visual effect.

Creating Particles With the Spawn Block

Start by examining the Spawn Block at the top of the graph. Zoom in to get a better look.

Each time you play, or trigger, the visual effect, it spawns a burst of particles. The number of particles it spawns depends on Count, which you can find on the Blackboard. This variable is an exposed float, which is why you were able to change it before in the SampleScene by adjusting the ButterFlies‘ properties.

This is the basic setup for controlling visual effects in real-time. The VFX Graph needs to use variables, which are exposed via the Blackboard and manipulated via the GameObjects’ Visual Effect component.

Setting an Initial Motion With the Initialize Particle Block

Immediately after spawning, each particle initializes with the settings provided in the Initialize Particle Block. In this example, there’s a limit on the system Capacity of 31. Now, no matter how many times the system triggers or how high you set the Count, no more than 31 butterflies will appear on the screen at a time. The particles are also constrained with a bounding cube of size 4.

Each butterfly spawns in a sphere with a Radius controlled by another exposed float variable in the Blackboard. So again, it’s important to note that it’s possible to create values in Properties that are outside the limitations of the graph. When tweaking values, this is the cause of many head-scratching results.

Next, each butterfly receives an initial direction and a random velocity based on that direction.

Finally, a Tex Index is set to correspond with one of the possible styles provided in the art texture, so each butterfly is a different style.

In most systems, you also set the lifetime of the particle in the Initialize Particle Block. Without that, as is the case here, the particle will live forever or until the system stops.

Now, you’ve had a look at the initial settings for the butterflies. Next, you’ll see how to change them over time.

Changing the Particles With the Update Particle Block

A visual affect that doesn’t change looks unnaturally static. To prevent this, the particle changes a little bit in every frame. You control those changes in the Update Particle Block. Take a look at this block to see how these butterflies to have a natural appearance:

• To keep the butterflies flying near the source, Force is applied, nudging the particle toward the inside of the system.
• Turbulence adds variety.
• The Velocity updates with logic that draws on its most recent velocity, so each butterfly can follow a unique flight path.
• The Scale is adjusted to accommodate the original art dimensions, giving the butterflies a broader wingspan.
• The Pivot.X creates a pivot point to use. Just like you’d assign which edge of the door should have the hinge.

Now the Butterfly is moving, it’s time to get the wings flapping.

Moving the Wings With the Output Particle Block

Although there are two Output Particle Blocks in this graph, one is just a mirror of the other. Think “left wing” and “right wing”, each supplied by either common or offset inputs.

Have a look a the settings in each Output Particle Block:

• The UV Mode is set to Flipbook to take advantage of the variety provided in the wing art texture. Flip Book Size is set to match that texture, which is supplied as the Base Color Map.
• Orientation is the same for both wings.
• Position controls the subtle vertical lift associated with the flapping motion. It’s also the same for both wings.
• Finally, Angle.Y and Angle.X are where things get mirrored between the left and right wings and to actually flap the wings.

Flapping Visual Logic With Wing Animation Speed

There’s one more variable in the Blackboard, called Wing Animation Speed. Each butterfly starts with a default flapping speed between 20 and 30. The Wing Animation Speed is then multiplied by the random starting value to get the actual speed.

The graph uses the age of the particle, which constantly increases, and controls the rate of increase with the modified Wing Animation Speed. The ever-increasing number is then converted to its Sine value, which ping-pongs between -1 and 1. These numbers control the bottom and top of the flap.

That sine value is used in two ways. First, it drives the small up-and-down bucking motion of the butterfly via Add Position. Second, it drives the large variation in the angle of the wing, the flap itself, via Set Angle.Y. This flap input is inversed for the second wing to create the mirrored effect.

Now that you understand a working example of a butterfly effect, it’s time to create something new.

Creating the Scene

Create a new scene using the Basic Indoors (HDRP) scene template. Call it MakingHeartsFly and save it in RW/Scenes.

In the Hierarchy, find the default Plane GameObject and delete it.

Adjusting the Camera Settings

Select the Main Camera and set its Position to (X:0, Y:1, Z:-6.5) and its Rotation to (X:-30, Y:0, Z:0). In the Background Type drop-down, select Color. Then, choose a soothing Background Color like (R:200, G:50, B:100, A:255, Intensity:0).