Tweening in Games

As a game developer, you’ve most likely come across the word ‘tweening’ and as a gamer, you’ve most likely come across games with UI and game mechanics that are snappy, smooth and look good. 

Tweening is a form of animation (short for ‘Inbetweening’) that allows you to animate elements from one state into another – whether this be smoothly sliding from position A to B, scaling from X to Y, or basically anything that requires you to update an element visually. 
These examples will be using Javascript and a library called Tween.js. However, many plugins and libraries exist for various languages and engines – such as Surge for Unity.

Lost? Let’s take a look at a simple example: 

A super simple Tween example

See the circle moving above – notice how it speeds up and slows down as it gets closer? That’s thanks to easing functions. There’s many of them out there, but this one is using ‘ExponentialOut’ – this essentially means that the speed of the circle increases exponentially until it gets close to max speed – where it slows down to ease out. I’ve also made it bounce back to the original location – known as a ‘yoyo’. The code behind this is super simple to – you don’t have to do much except tell it what object to edit, how to edit it (x,y,z positions, rotations, scale, etc.) and how to ease. In Javascript, the code looks like this: 

new TWEEN.Tween(circle)
    .to({
	x: 560,
	y: 60
    }, 500)			 
    .easing(TWEEN.Easing.Exponential.Out)
    .yoyo(true)
    .repeat(1)
    .start();

In simple terms, all this code is saying is ‘Hey Tween.js – take my circle, move it to x: 560, y: 60 in 500ms using ExponentialOut easing and yoyo it back once. This of course, is a super simple example and you can virtually tween anything you want – 2D objects, 3D objects, HTML elements, or just even just numbers. 
For example, if you had a score counter in a game or a money counter, and you added to that counter, you could make a super quick tween that incrementally adds to that counter and updates the text. 

This particular tween utilizes Tween.js onUpdate function – which returns the currently tweened value. Using this, we can simply tell Tween.js to take 0, tween it to 1238 linearly and onUpdate, set the value of the score text to the updated value. 

And as a last example – here’s a quick mock-up of what an End scene could look like where you show your user the score (n.B. I am not a graphical designer, so this isn’t the prettiest mock-up!)

This tween basically just has the counter as seen above, and the stars are done by scaling them down from 2x to 1x. onStart they are made visible, and each have a delay so they animate after each other – it is also possible to chain tweens together so they start automatically after each other without having to do delay calculations. 

Easing Functions

As mentioned earlier, Tweens use easing functions that tell the Tween how quickly to progress to the end. There are a lot of commonly known Easing functions such as Sinusoidal, Quadratic, Exponential, and Elastic cleaverly thought out by Robert Penner.

Easing functions included in Tween.js

These graphs allow us to visualize how quickly our object will interpolate towards its target. If we take Exponential.Out as an example, we can see that the curve very quickly rises up and then takes a long time at the top before hitting the end – this translates directly to our object. It will very quickly reach close to its target, but in the last few steps it’ll slow right down and ease into it.