Curves for Games

Curves are really useful for game development. They allow you to describe different properties over time (like the lifetime of a particle or its speed), a jump curve, a curved skill, soft cutting corners, etc. You will most certainly need to use a bezier curve at some point in your game dev journey. Sometimes it is provided by the engine or framework. But if it isn’t, this article will describe in an easy and understandable language what they are and how to calculate them.

Table of Contents

• What is a curve?
  • Why are they useful?
• Linear interpolation
• Quadratic Curve
• Cubic
• Conclusion

What is a curve?

A curve is a special kind of function. The goal is that given a start and end points you can draw a smooth curved line between them using some clever math. You do this by calling the function and sampling points on it and eventually connecting them. You have already seen some functions in basic school math and the idea of a function is that you can get a value back from a given set of parameters. Well doesn’t this sound familiar – it is the definition of functions in programming as well.

So the most basic form of a line is the constant function:

$y = F()\newline F() = 5$

In math functions are pure and there isn’t any object-oriented programming involved. This makes it a bit easier to wrap your head around. So our y parameter would be equal to 5 no matter what any other parameter does.

Besides a constant function, there is a linear one. In 2D graphics, this would be a straight line from one point to the next. This is also known as a linear interpolation or a linear function. Linear interpolations are quite useful for programming games since they are used for solving a lot of problems.

Going from there Bezier curves are curves that include a third (or even maybe a fourth) point called a handle. Then to calculate the curve you would use the previously mentioned linear interpolation from the start to the handle, from the handle to the end, and finally a linear interpolation between the results of the first interpolations.

Why are they useful?

The curve functions can be used for creating paths to follow, for smoothing out animations or movement, or for defining how some other value should behave. For the final example imagine that you want to have a car acceleration that would drop off with the more speed that the car gains. You would define a top speed and you would use a curve that would limit the acceleration when we start to get closer to the top speed. In that case, our start point would be when we have no speed, and the end point when we reach our top speed. The current speed will help us determine our current speed value taken from the curve.

Linear interpolation

Let’s start with a linear interpolation though since it will be a lot simpler. The interpolation is a function with three parameters – point A, point B, and the third parameter is a value between 0 and 1 called weight. This value indicates a weight between A and B so if we pass in 0 we will get the location of A, if we pass in 1 we will get B and if we pass in 0.5 we will get the middle between A and B.

A common use of linear interpolation would be if you want to move a character from point A to point B in a time of 3 seconds. To move the character smoothly you will calculate a linear interpolation between A and B and with each frame update, you will get the passed time so far and divide it by the total of 3 seconds. This way you will get a weighted value between 0 and 1 that would indicate where should the character be in this frame.

This linear interpolation has a mathematical expression as well and the function is often called “lerp”:

$\textrm{lerp(start, end, weight)} = \textrm{start}*(1 – \textrm{weight}) + \textrm{end}*\textrm{weight}$

So given a start point, end point, and a weighted value of progress you can get any point on the line between start and end. This is pretty powerful in game development and is used to smooth out motions, play animations or even for gameplay functionality like moving an elevator.

Quadratic Curve

Now that we have the linear interpolation the quadratic formula is a lot simpler. You will see that it adds one more parameter called the handle and uses linear interpolation to smooth out a curve.

$\textrm{quadratic(start, end, handle, weight)} = \textrm{lerp(lerp(start, handle, weight), lerp(handle, end, weight), weight)}$

Here is a control that you can play around with and see how the curve will move when you move the points or the handle:

Quadratic is used for drop-off curves. You can use it also for jump pads, skill projectile paths, or other gameplay elements where you want a smooth path.

Cubic

The cubic curve is a version of the quadratic curve but with two paths.

$\textrm{cubic(s, e, hs, he, w)} = \textrm{lerp(lerp(lerp(s, hs, w), lerp(hs, he, w)), lerp(lerp(hs, he, w), lerp(he, e, w)), w)}$

And again you can play around with the points and handles with the following control:

Conclusion

Well, I hope with this article I gave you a bit more knowledge about the math that solves those curves. Next time you need something curved like a path, or you need to smooth out an animation or a movement you would know how to calculate them for yourselves or implement them in code.