Thread by @reuno

Let's talk about tweening curves! These curves are amazing, I use them all the time and I've built myself a set of tools to access them everywhere. Here's a thread about CURVES. 👇

#madewithunity #gamedev #unitytips

A few days ago, @wilnyl posted a great tweet about animation curves and that reminded me that I never shared that tween cheat sheet I created a while back.

You can check it out (on desktop) at moremountains.com/assets/resourc…

The word "tween" comes from the frames "between" key frames in traditional animation, and we can use tweens to update values over time in interesting ways. Position instantly comes to mind, but you can alter opacity, lights, or even timescale with tweens.

Tweens are math expressions where position is a function of time : p = f(t).

If we draw that first function, EaseIn_Quartic, for a [0,1] range, this is what it looks like :

And once you've got that function, it's easy to use it to modify a value over time. In this example we bounce time back and forth between 0 and 1, and just evaluate that time value through the function, which gives us the new x position of our object.

And this is what you get if you put that script on a cube. Of course we could remap that value, multiply it, etc.

Tweens usually come in 4 different flavours : linear, ease-in, ease-out, and ease-in-out. In my cheat sheet, for each of them, you can see the curve, and examples of scale, rotation and position interpolation.

First there are linear tweens. Linear tweens are the worst. It's subjective, but also true. Stuff rarely moves linearly in the real world, so any linear interpolation in a game or animation will look weird. Also linear tweens are mean to other tweens.

You should always prefer easing to linear, whatever value you're changing over time, you'll want it to have some form of acceleration and/or deceleration, and that's what easing is.

Ease-in tweens start slowly and speed up at the end. I like to use ease-in for stuff that disappears/goes away. Here's the ease-in quartic from before :

Ease-out tweens on the other hand start fast and then slow down at the end. I generally use ease-out for things that appear on screen.

And then there are ease-in-out tweens. Their first half is an ease-in, their second half is an ease-out. They produce really smooth motion that feels quite natural. They're really nice when moving an object from one point to another.

Look at that sad linear tween. Bask in the glory of easing!

Oh and also overshooting is great. It means having a value go slightly higher than the value you're moving towards. It helps sell the impact of whatever it is you're animating.

Over the years, I've implemented tweens into most of my scripts, to leverage their power everywhere. If you own the Corgi Engine or TopDown Engine for example, they're built into the system.

If you want to implement these yourself, I'd recommend reading Robert Penner's chapter on tweening that really helped me back in my Flash days : robertpenner.com/easing/penner_…

I hope you found this thread interesting! Here's the link to the tween cheat sheet again. And remember : linear tweens are the worst thing. 🔫

👉 moremountains.com/assets/resourc…