How to use drawing animations in Unity

Hi Everyone,

I've received a few questions about how to use the new drawing animations in Unity, so I want to get this tutorial out even though the Unity companion asset is still under development. But this tutorial should give you a good idea of how to achieve an effect like this: 

So first you need to export the animation using the "Create Dissolve Texture" button under the Render GIF section. I'd recommend at least 60 fps for smoother animations. 

Once the file is done rendering, import it into Unity with the following settings:

Then, you're going to need to create a custom shader graph. You can do this by right-clicking> Create > Shader > Universal Render Pipeline(if you're using URP) > The graph of your choice. I used an Unlit Graph.

Then, you want to set your graph up like so: 

The two most important properties are the Texture2D _MainTex which will be the imported image and the Float Threshold which is a 0 to 1 value that controls how much of the circle is shown.  

At the center, there is a custom function called "CombineMagicCircleRGBA" set up like the so:

here is the HLSL code to paste in: 

uint l = UINT_MAX - (uint(data.b * 256.0) << 24) | (uint(data.g * 256.0) << 16) | (uint(data.r * 256.0) << 8); 

float value = min(float(max(0, (threshold * UINT_MAX) - l )), 1.0) * data.a;

level = value;

Basically what this is doing is decoding the texture's colors by combining them into a single number, then comparing that to a threshold value. So any part of the circle that has a lower value than the threshold will be drawn. Then the shader graph combines the single number returned by the custom function into a vector4 which then gets multiplied by a color.

That should give you a good starting point to go off of. If you have any questions please feel free to ask. Also, if you're interested in learning more about VFX I would recommend this: https://vfxdoc.readthedocs.io/en/latest/shaders/alpha-erosion/ as it goes over the technique in more general cases and the site is filled with useful VFX techniques. 

Thanks for reading!