Real Coroutines Have Curves
Everybody love animations, from Super Mario scaling up after hit a mushroom, until more elaborated ones, like a fight scene from Metal Gear Solid. For complex animations you have animators and artists dealing with huge timelines with thousands of keyframes and properties, but simple ones can be done by programmers like us, using a simple combinations of tools from our utility belt : Coroutines and Linear Interpolation. When we have animations with only two keyframes (yes it happens a lot), a Coroutine lerping between this two values can do the job easily.
As you may notice, for this article a basic knowledge of Coroutines and Linear Interpolation are required, I’ll give a little introduction about the topics, and let a link for deeper information.
COROUTINES
Coroutines are a great way to fake multi threading, when you use it the code runs concurrently with other code (but it keeps running on the main thread). Coroutines has a IEnumerator as return type, which means it always need a yield instruction on the body of the function, to return what is needed. When the function reaches the yield statement it will “pause” its execution until it be satisfied, by an WaitForSeconds, WaitUntil, null (that just wait for the end of frame), or even another coroutine. Then the function get back to its code execution from where it paused.
NOTE : Be carefull with the amount of coroutines used, because it can be a little hard to track the flow of the application since coroutines has its own conditions of pause and run.
LINEAR INTERPOLATION
Linear interpolation, is a mathematical function to find a value that is some percentage between two other values, in programming linear interpolation (lerp for the intimates) usually receive three parameters “value A”, “value B” and a “percent” (that vary from 0 to 1), and returns the found value. Various classes implement they own Lerp methods, as Vector3, Color and float and do the needed math for it behind the scenes.
COROUTINE + LERP
So whats the cool thing about join lerp functions with coroutines ? It easy, let's get back at the beginning example, you want a character to grows up after taking some mushrooms (this may sound in the wrong way), but you really dont know how much you want the character to grow or how fast, so with coroutines + lerp, you can expose these values as public variables and test different combinations on the fly.
Thats awesome to test different animations quickly, and after define the best animation keys and duration you can even make a animation clip with the correct values.
But the animation still feels kinda boring and lifeless, how can we make it more juicy and cool ?
CURVES FOR THE RESCUE
It happens Unity has a variable type called Animation Curve which is a curve (dont say Sherlock), and it has a great editor window to create and edit custom curves. Animation Curves also has a “Evaluate” method, in this method you pass a float that represent a percentage, and it returns the curve value on that specific percentage point.
So what if we use this curve to pass the value to our lerp function calculate non-linear values to our animation ? Let me explain that.
Remember that in a Lerp function our third parameter its a percentage from from 0 to 1, it means that if we keep our curve values range between 0 and 1, instead of pass the percentage we want to the lerp function directly, we pass this percentage to our curve, to Evaluate it, this way the curve will return a non-linear value from 0 to 1 and we can use this new value in the Lerp third parameter making it much more appealing.
Lets change the previous example to work with curves.
BONUS TIME
To speed your productivity, this amazing repo Easing Curves has the most common curves known converted to Unity Animation Curves, access the link and follow the instructions, which consist in, just download the file and put it inside a “Editor” folder inside your project, and now you can select between lot of curves and test your animations.
You can too create your own libraries of custom curves in Unity and export them to use in future projects.
CONCLUSION
If you need something more plug-and-play, Asset Store has this awesome FREE asset called Itween , however now you know how to make you animations look more attractive and also how to combine basics skills to make more advanced behaviors.
Thats it for today, thanks for reading =)
