Tweens

No, I’m not talking about kids between the ages of 10 and 12 or a creature in Dungeons & Dragons … I’m talking about to the idea of “inbetweening”.

Tween02In animation tweening refers to the creation of intermediate frames between two key points often called key frames. All modern animation software today lets animators interpolate objects between two positions or orientations. However, it’s typically not just a straight linear interpoloation between two values, the interpolation is customized with what are called easing curves.

Simply speaking, an easing curve defines how a property or object will interpolate between the start and end values. For example, an easing curve can allow you to do effects like changing positions faster at the start and slower in the end. Translated into something concrete might be swinging sword fast at the start and then slow at the end, this makes the start of the swing look like it has a lot more power while at the same time making the entire swing feel less stiff or rigid. Lots of animation software allows the animator to visually define a custom easing curve that feels good for the animation.

Tween01Tweens aren’t just limited to animation packages though, for the RPG I’m using tweens literally everywhere. The player walks around they tween from one location to another using tweens. Clouds slowly float up and down, lights slowly change from one color to antoher, UI menus slide on and off of the screen, and lots of stuff fades in and out.

If you need super performance from your tweens, it’s probably best to just roll your own using the standard set of tweening equations that have gained popularity in recent years available from Robert Penner. If you’re using Unity, a good alternative with great performance is HOTween, as a bonus the author is super awesome and helpful too!

HOTween

I’ve gotta say that using tweens everywhere makes the game look and feel incredibly cool with so many things being smoothly animated and changing all over the screen, it’s one of the primary things that helps improve the visual quality of the experience.