Juicy Lerps — The Art of Spicing Up Motion

I first came across the concept of ‘juice’ from watching Martin Jonasson and Petri Purho’s presentation on YouTube and was very keen to try it for myself. To my surprise, it is extremely simple to implement in both Unity 3D and Unreal Engine 4 (UE4). Presumably this is also true for other game engines although I’ve not tried it.

Unity 3D and UE4 both provide several different flavours of interpolation within their maths libraries. For this post I am going to consider the case for linear interpolation, also known as Lerp. The technique described here could also easily be applied elsewhere in your game and I leave that as an exercise to the reader.

Linear Interpolation

Linear interpolation, as defined in the Unity documentation, “Interpolates between the points a and b by the interpolant t. The parameter t is clamped to the range [0, 1]. This is most commonly used to find a point some fraction of the way along a line between two endpoints (e.g. to move an object gradually between those points).” In plain English that means if you have two points, a and b, t can be used to find a point on a straight line drawn between a and b. The linear interpolation (lerp) functions declared in Unity and UE4 are:

Unity, C#:

public static Vector3 Lerp(Vector3 a, Vector3 b, float t);

UE4, C++:

template<class T, class U>
static T Lerp
(
    const T & A,
    const T & B,
    const U & Alpha
) 

Easing

Easing allows us to apply a simple effect to convert linear motion into non-linear motion, e.g. to add an acceleration/deceleration curve. In real life almost nothing moves at its maximum velocity from rest nor comes to a complete standstill in an instant. Instead, there is a period of acceleration, it travels at some constant velocity, then decelerates to rest. Heavy objects may even bounce several times before stopping.

This type of motion can be described by an ‘easing curve’ of which several are described on the open source Easing Functions Cheat Sheet

Easing Linear Interpolation

To apply easing to linear interpolation, rather than use t or Alpha direct, we instead call an easing function, so, in UE4,

FVector current = FMath::Lerp(startPoint,
                              endPoint,
                              distance);

becomes

FVector current = FMath::Lerp(startPoint,
                              endPoint,
                              easingFunction(distance));

It really is that simple.

Conclusion

Applying easing to a game is much easier than I originally thought, mostly because of how the engine APIs have been implemented.

Although I’ve only considered the case of moving from one point in 3D space to another, it’s easy to see how this could be applied to, say, a rotation, or scale of an object. It can also be applied to other items too such as image transparency or sound effect volume/playback speed.

References

Photo by Halacious on Unsplash