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.
What is Tweening?
Here is a visual graph to explain what tweening is:
Tween Graph Visualization
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.
Movement Without Tweening
Non-Tween Movement
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$$
Movement With Tweening
Tween Movement
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$$
Beyond Movement: Scaling and More
Tweening doesn't only apply to movement though, you can apply it to almost anything. For example:
Scale Without Tweening
Non-Tween Pop In/Out
You could do the same for setting the object's scale from zero to one and vice-versa.
Scale With Tweening
Tween Pop In/Out
Popular Tweening Libraries
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
Code Implementation Example
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);
}Easing Curves
Tween.js Easing Functions
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.
Conclusion
In this blog, we have learned 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!