Trigonometry for Game Development
Trigonometry is confusing. Fortunately for us Game Developers, we don't have to remember much of it, and some handy functions can do all the internal calculations for us. But to know when and how to use the functions, we must have a basic understanding of how those functions work.
So, in this article, we'll look at fundamental trigonometric functions like sin, cos, and tan; and how to use them to solve problems.
Resources
Full Course:
GitHub Repository:
Degrees or Radians?
While most people are accustomed to using degrees, Radians are the standard unit frequently used in mathematics and Game Development. So, let's look at what Radians are and how they differ from Degrees.
If we draw an arc = the radius of the circle and connect the arc's ends by two radii, then the angle between those radii will be 1 radian.
While one complete turn in terms of Degree means 360°, one full turn in terms of a Radian means 2π radians or Tau(τ).
Notice that we can convert from Degree to Radians by multiplying the angle by π/180.
Alternatively, we can convert from Radians to Degrees by multiplying the angle by 180/π.
If the formula seems confusing, then luckily for us, Unity provides two beneficial data members:
Mathf.Deg2Rad = π/180
And
Mathf.Rad2Deg = 180/π
So, whenever we want to pass an angle into a trigonometric function (say sin(x in degrees)), multiply x by Mathf. Deg2Rad -> sin(x * Mathf. Deg2Rad) will do the work.
Alternatively, the output is in radians, but we want the result in degrees multiplied by Mathf. Deg2Rad should do the work.
Throughout this article, I'll be using Degrees to explain but keep in mind that most trigonometry function inputs need to be converted to radians before passing them in.
Circles and Triangles
Trigonometric functions are very closely related to Circles and right-angled triangles.
Let's start by explaining how sine waves work.
Sine waves are functions that take in an angle as input and return a value. It can be represented as the following formula:
y = sin(x)
If you input any angle as x, you'll get output on the y-axis, as seen in the image below.
Take a look at the image below:
Observe that as we keep increasing the value of x, the value of y keeps growing from 0 → 1 → 0 → -1 → 0, and it oscillates.
Notice that the value resets itself after an interval of 2π or 360°.
To understand why this happens, let's look at the Unit Circle.
Unit Circle
A Unit Circle is nothing but a circle positioned at the center of the world (0,0,0) and having a radius of 1 unit.
Now let's take a unit vector (a vector with a magnitude of 1 unit) which makes an angle of 45° with the x-axis.
What will be the coordinates of the point where the unit vector touches the circle's circumference?
Well, the values of the coordinates are nothing but the x and y components of the vector, and we can represent it as follows:
Notice how it makes a right-angled triangle.
This is where a bit of knowledge of trigonometry would come in handy.
For a right-angled triangle, we can define the trigonometric functions as follows:
sin θ = opposite/hypotenuse = y/r
cos θ = adjacent/hypotenuse = x/r
Since hypotenuse or r is 1 in a Unit Circle, we can also write
sin θ = y and cos θ = x
Using what we've learned so far, we can easily find the coordinates where the direction vector meets the circumference of the Unit Circle.
NOTE: In Unity, the trigonometric functions take in radians as input, so make sure to convert from Degrees → Radians before passing it onto the function.
Section Conclusion
So if we pass in values starting from 0 radians to 2π radians, then we'll observe that:
- The value of sinθ smoothly moves from 0 → 1 → 0 → -1 → 0.
- The value of cosθ smoothly moves from 1 → 0 → -1 → 0 → 1.
In the graph, we observe the oscillating behavior of both the sin and cos functions. This is also why the value of sin and cos resets after 360°.
The project for the above visualization has been added in the Resources section of the article. In the “Visualization” scene, press Play and hold space to increment the angle.
Applications in Game Development
Even though it seems like we need to do a lot of calculations when trigonometry gets involved, Unity provides us with some handy functions that relieve us from the stress of calculating it every time. Let's have a look at some of the use cases:
2. Moving any value in an oscillating manner
Say we have a coin, and we want to move it back and forth as if it's hovering above the ground. One way of achieving it is by making an animation, but that's not the most flexible way. Say you want to make the coin move twice as fast/slow or move higher or lower, then you have to change the animation every time, which takes a lot of work.
Alternatively, we can use the sin function. Here's how:
In the following code, we're passing in Time.time(This is the time in seconds since the start of the application) into the sin function. The result of the sin function is used as the y-component of the coin's position.
Result:
To speed up the bobbing frequency by multiplying the input by n = 1, 2, 3,…
sin(nx)
To increase the distance(amplitude) of the bobbing, multiply the result of the sin function by n = 1, 2, 3,…
n sin(x)
This method can also move a character back and forth like a patrolling enemy on a platform. Or, you can mix both up to make a bobbing flying enemy that moves back and forth between two positions.
2. Finding the components of a direction vector when the angle is given
This problem was solved while explaining Unit Circle, and we saw how we could use cosθ to find the x component of the vector and sinθ to find the y component of the vector. This can be useful when turning a Game Object from a certain angle.
3. Finding the angle from a direction vector
Let's say we make a direction vector from the user's input, and we want our Character to turn and face towards the direction. This is used a lot in Third Person Perspective games, where the player rotates to face the direction they're moving in.
To find the angle from vector, we use a function in mathematics we call Inverse Tangent or arctan, which takes in y/x as input and gives an angle as output.
Mathematically, the tan function can be represented as:
tanθ = opposite/adjacent
Substituting with the values from the Unit Circle, we get:
tanθ = y/x
If we take tan⁻¹() both sides, we get:
θ = tan⁻¹(y/x)
In Unity, we can access this function by calling: Mathf.Atan() but this function isn't preferred for most cases. Let's try solving a problem to know why.
What angle does the direction vector make with the x-axis?
The answer we get if we test this out in code:
We'll find that the output is 45° which is incorrect because the real answer should be 225°. This happens because if we see the tan graph, we'll see that there are two possible angles for which tanθ is 1.
To avoid such conflicts, we use another function called Atan2.
Instead of taking y/x as input, Atan2 takes y and x separately. The values of x are evaluated based on quadrants to obtain the correct answer.
From the Quadrants, it's clear that our answer lies in the 3rd Quadrant. Atan2 uses this to eliminate the wrong result.
Using the following code:
The output we get is -135° which is equal to 360–135 = 225°.
To know more about how Atan2 is used in Third Person Controller. Check it out below:
Conclusion
If this simple Trigonometry Explanation piqued your curiosity, you should consider opting for The Complete Unity Guide 3D- Beginner to RPG Game Dev in C# offered by Eincode. This course features among the most immersive and practical resources out there.
This course is curated by experienced software engineer and freelance developer Filip Jerga. This course starts with the fundamentals. Then, it progresses gradually to eventually take its subscribers through the journey of developing their own RPG game using Unity 2020 and C#.
Cheers!
Debdas
