Making Hearts Fly With Unity VFX Graph

Sky and Fog Volume Settings

Now, you’re going to make a romantic setting for your flying hearts.

Select Sky and Fog Volume to change its settings. In the Visual Environment, set the Type to None and the Ambient Mode to Static. For the Exposure, set the Mode to Fixed and set the Fixed Exposure to -1. Make sure you enable both of those checkboxes.

Next, remove the Fog Override. Finally, add a Vignette Override and set its Mode to Procedural and its Intensity to 0.4. Be sure to enable each.

Scene Light Settings

For your next step, you’ll add some mood lighting.

Select the default Spot Light and rename it HeartLight. Next, set its Position to (X:-0.75, Y:3, Z:-5). Then, change the Light Type to Point and the Mode to Realtime.

Change the Shape Radius to 1. Finally, for Intensity, select Ev 100 in the drop-down and set the Intensity to 11. Yes, you can laugh if you want.

VFX GameObject

Now that the mood is set, it’s time to settle the butterflies!

In the VFX folder, find the ButterfliesNotes graph and duplicate it. Name the new graph asset BoxOfHearts.

In the Hierarchy, add a Visual Effects ▸ Visual Effect GameObject and call it BoxOfHearts. Next, set its Position to (X:0, Y:2, Z:-5). Then, set the Asset Template to the BoxOfHearts VFX Graph asset found in the VFX folder.

Try toggling the HeartLight on and off to see the impact of the light on the particles, and make sure it’s positioned near the top left of the screen. To see it better, try toggling the Volumetrics for the light as well.

Now that you have a new Visual Effect GameObject connected to a new VFX Graph Asset, it’s time for those butterflies to metamorphose into something new: a box of hearts!

Replacing the Wing Art

First, you’ll replace the butterflies with something more your style: butterhearts, pretty winged hearts.

In the Hierarchy, select the BoxOfHearts. Then, in the inspector, click Edit for the BoxOfHearts graph asset. To better see changes with each step, work from the bottom to the top of the graph.

Setting the Output Block

In the Output Block for both the left and right wings, change the Uv Mode to Default and Use Alpha Clipping to False. For Base Color Map, replace the default butterfly art by assigning the butterheart from the RW/Sprites folder.

Update Block

In the Update Block, remove the Turbulence and Force block and related node inputs. Next, add a Tile/Warp Positions Block and set the Size to (X:3, Y:3, Z:3).

Setting the Initialize Block

In the Initialize Block, you have several changes to make. Start by removing the Tex Index Block and related node inputs. Then, do the following:

1. Boost the Capacity to 75
2. Add a Set Color Block. Instead of choosing a single, boring color for all the particles, you’ll use a Gradient and some simple logic to add a lot of variety.
3. Open the Blackboard, add a new Gradient variable and call it Wing Color. Then, set Exposed to True so you can edit the gradient in the scene.
4. Drag the Wing Color variable from the Blackboard to somewhere close to the Set Color Block, but don’t connect them yet. To add variety, you first need to apply some randomness.
5. Add a Sample Gradient Node and connect the Wing Color variable to the input and the output to the Set Color Block.
6. Add a Random Number Node with (Min:0, Max:1) and Constant set to false. Then, connect that to the Time input. Now, each particle will select a random color from the gradient you provide in the GameObject.

Setting the Output Block Inspector

To make the colors pop, there’s one more setting to change. First, arrange your windows so you can see both the inspector panel and the graph panel. Next, select one of the Output Blocks and look at the inspector, which reveals a hidden trove of extra settings. Then, find the Color Mode drop-down and select Base Color and Emissive, which makes full use of the HDR colors. Repeat this step with the Output Block of the other wing.

Save the graph and close the window to return to the Game view.

Setting the Visual Effect Properties

Select the BoxOfHearts in the Hierarchy and set new Properties in the inspector. Check each property to enable it. Next, increase the Count to 75 and set the Radius to 2.

Click the Gradient to open the Gradient Editor. Setting a gradient is an art, so take some time to experiment and tune the results to your liking. These example values are set to create a broad mix of darker and lighter shades, with a few highlights of ultra-bright color.

Set the Mode to Blend and create four pins for color on the bottom of the Gradient bar at Location 15, 70, 90, 95. Use these color values for each pin:

• 15%: (R:191, G:0, B:29, Intensity:1).
• 70%: (R:191, G:29, B:48, Intensity:3).
• 90%: (R:191, G:29, B:48, Intensity:3).
• 95%: (R:191, G:10, B:29, Intensity:10).

Toggle BoxOfHearts on and off to refresh the Visual Effect with your new property values.

Return to the Game view to bask in the glow of your new BoxOfHearts.

Toggle HeartLight on and off to see the impact the light has on the color of the nearby butterhearts.

Experiment with the Exposure settings in Sky and Fog Volume to see the impact across all the butterhearts.

When you’re done experimenting, return the values to their defaults, and save the scene and the project. Your background visual effect is complete. But wouldn’t it be cool to have the effect spawn when the user performs an action? Now, it’s time to create an on-demand visual effect.

Controlling the Launch

First, create another VFX Graph asset, starting with a copy of the BoxOfHearts graph and calling it HeartOfHearts. Save it to the RW/VFX folder.

In the Hierarchy, add a Visual Effects ▸ Visual Effect GameObject and call it HeartOfHearts. Set its Position to (X:0, Y:2, Z:-5). Then, set the Asset Template to the HeartOfHearts VFX Graph asset found in the VFX folder.

Unlike the BoxOfHearts graph, you want to control when and where the HeartOfHearts graph spawns butterhearts. To control the visual effect, you need two things. First, you need a script that receives and processes input. Second, you need control variables in the VFX Graph asset that receive and apply changes to the graph.