Neon Trigger Devlog #8: How to create a dissolve effect in Unity

Hello everyone, welcome to our 8th devlog for Neon Trigger. My name is Aidan, and I am our team's UI programmer and one of our Gameplay Programmers. Today, I will be going over how I created our dissolve effect for whenever our player or enemies die.  
The first thing we want to create is the custom shader graph for our dissolve material. Our starting point is a Simple Noise node that is used to generate the dissolve pattern. I liked the scale number for 100, but feel free to experiment with any other number you like. This node will connect to the alpha channel and the Step node. The other node leading into the step node is the dissolve variable. The dissolve variable is used to set how much of the material we want to be transparent or dissolved at a point. The add node should be a number around 0.02, but this number can be increased or decreased to increase the size of the emission on the edge of the dissolve. Next, we multiply the step node with a color node to set the color of the emission border to any color you want.

This leaves us with material that looks something like this when the dissolve is set to 0.25.

Now, to animate the dissolve effect, we just need to change the value of the dissolve variable over time. In the example I am going to be doing I will just be applying this effect to one object but using loops and arrays it is possible to expand this to apply to multiple objects at one time.

The first thing we need to do is set up the variables we need, which are a material with the shader graph we just made, how long the dissolve effect takes (in my case, I found 2 seconds to be a good length, but change this to whatever you want), and then we have private variables to store the objects original material, the objects renderer, and the game object we are dissolving. Next, we have the function that needs to be called with the object you want to dissolve. The first thing this function does is assign the variables for the game object, renderer, and original material of the object. It then assigns the dissolve material and starts the coroutine function we use to animate the material.

For the coroutine that animates the dissolve all that we are doing is changing the dissolve value from 0 to 1 over the duration of the dissolve effect. We do this by lerping a value from 0 to 1 based on the time the coroutine has lasted, divided by the duration we assigned. After the duration has passed, we set the dissolve value to 1 as the loop will usually end right before the actual dissolve value reaches 1. Then we disable the dissolved target and restore the original material to the object if it ever needs to be enabled again.

Here is a clip showcasing it in our game