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!
Files
Get Magic Circle Generator
Magic Circle Generator
A completely customizable magic circle builder
Status | In development |
Category | Tool |
Author | Game Dev Goose |
Tags | 2D, Fantasy, Generator, Magic, Procedural Generation |
More posts
- Unity package now available!Jun 19, 2023
- Drawing Animations! New options, and v1.0.6May 20, 2023
- Text Lines, Export Options, and 1.0.5Jan 27, 2023
- Animated GIFs and v1.0.4Dec 07, 2022
- Browser Support and v1.03Nov 22, 2022
- v1.0.2 SVG support, Font Preview, and moreOct 25, 2022
- Thank you and v1.0.1Oct 20, 2022
Comments
Log in with itch.io to leave a comment.
pretty awesome, even a grognard troglodyte like me might be able to follow that