Tweening in Game Design: Bridging Frames for Better Gameplay

Tweening, also known as inbetweening, is a crucial aspect of game development. It has been used in video games since the earliest days, even in consoles like Atari and Sega. Creating individual frames for games can be a challenging task, especially given the high frame rates that modern games require. Generating frames can be computationally expensive and time-consuming for developers. As a result, tweening has emerged as an effective solution to address this challenge.

Here is a visual graph to explain what Tweening is:

In the graph on the left, we are moving from x to y. Imagine we are trying to develop a game that targets 60 FPS. If we asked the player to move for one second, we would have needed 60 positions each second! Imagine having to calculate how much a player would move every 0.0166666667 seconds. This is where Tweening would come to the rescue. Tweening is extremely light (in most cases) and does frame calculations for you automatically.

This is how basic movement is without tweening. I am just adding one to the X position of the object when moving right, and subtracting one when moving left. Mathematically speaking:

$\text{PositionX} = \text{PositionX} + 1 \text{ or}$ $\text{PositionX} = \text{PositionX} - 1$

This is the same thing but with tweening. Instead of just teleporting to the next position, I am asking the computer to automatically generate the movement between the two positions. Mathematically speaking, this is using a very basic version of the cubic hermite spline function which is defined as:

$p(t) = (2p_0 + m_0y - 2p_0 + m_0)t^3 + (-3p_0y + 3p_0 - 2m_0y - m_0) t^2 + m_0t + p_0y$

Tweening doesn’t only apply to movement though, you can apply it to almost anything. For example,

You could do the same for setting the object’s scale from zero to one and vice-versa.

There are multiple tools available for tweening for different game engines – and you can even make your own if you want. Here are a few that are loved by the community:

• DOTween (HOTween V2) for Unity.
• Fresh Cooked Tweens for Unreal Engine.
• Godot has Tweening baked into the engine.
• GMTwerk for Game Maker.

For the sake of ease of use, here is the exact code you would use to move the player through code in C# in Unity:

/// <summary>
 /// Moves to the right without tweening.
 /// </summary>
 public void NonTweenMoveRight()
 {
    character.transform.localPosition += Vector3.right*stepSize;
 }
 
 /// <summary>
 /// Moves to the left without tweening.
 /// </summary>
 public void NonTweenMoveLeft()
 {
    character.transform.localPosition += Vector3.left*stepSize;
 }
 
 /// <summary>
 /// Sets the scale to zero.
 /// </summary>
 public void NonTweenPopOut()
 {
    character.transform.localScale = Vector3.zero;
 }
 
 /// <summary>
 /// Sets the scale to one.
 /// </summary>
 public void NonTweenPopIn()
 {
    character.transform.localScale = Vector3.one;
 }
 
 /// <summary>
 /// Moves to the right with tweening.
 /// </summary>
 public void TweenMoveRight()
 {
    character.transform.DOBlendableLocalMoveBy(Vector3.right*stepSize, timeToMove);
 }
 
 /// <summary>
 /// Moves to the left with tweening.
 /// </summary>
 public void TweenMoveLeft()
 {
    character.transform.DOBlendableLocalMoveBy(Vector3.left*stepSize, timeToMove);
 }
 
 /// <summary>
 /// Sets the scale to one.
 /// </summary>
 public void TweenPopIn()
 {
    character.transform.DOScale(Vector3.one, timeToMove);  
 }
 
 /// <summary>
 /// Sets the scale to zero. 
 /// </summary>
 public void TweenPopOut()
 {
    character.transform.DOScale(Vector3.zero, timeToMove);  
 }

Tween.js has an incredible graph to showcase the different ease curves you can use, and all major Tween libraries on respective game engine platforms have support for them.

In this blog, we have learnt what a tween is, and the functional importance of it. With tweening also comes the ability to create sequences as well. You could probably make entire cutscene animations out of just tweens, which is what we have done in all of RipeSeed’s games. You can now use this knowledge to create a functionally better game. Be sure to check out this incredible timeless video on making your game juicier as well!