A Vanity Website
I’m a little bit rusty in the math department, especially when it comes to geometry, which I haven’t touched since middle school. But with just about any type of game development comes mathematical work, with a pretty big focus on geometry. Now I was able to find code samples on the internet that moved the objects around like I wanted them to - but I don’t want to copy in pieces of code without understanding how they work, so in the interest of understanding this a bit more (and maybe even helping someone else out that finds this), let’s take a look at calculating directional movement.
First off, although we typically think about angles of direction in terms of degrees, this is not the ideal mathematical measurement. What we really want to be working with is Radians! A radian is just the radius of a circle pushed up against its curvature, and you probably already know how many radians make up half of a circle; that’s right, 3.14... aka Pi. So given that we end up with a very easy way to convert degrees into radians:
Radians = degrees * (PI / 180)
So when we want to move an object in a game in a certain direction, what we really want to know is how much should we move it per frame on the x axis and how much should we move it on the y axis. So we have an angle, x value, y value; does that bring to mind a certain shape? That’s right it’s a triangle! Fortunately when calculating angles and distances in triangles we have three handy trigonometry functions to work with. Sine, Cosine and Tangent.
The Sine function looks like this: sin(angle) = length of opposite side / length of hypotenuse
By opposite side we mean the side farthest from the angle and the hypotenuse is the longest side in a triangle. Now let’s just say that the length of the hypotenuse is some arbitrary length since what we are really interested in is how big or small is the opposite length for a given angle. So to make calculations easy let’s just say the length of the hypotenuse is 1. We already know what the angle is in the game and are more interested in figuring out what the length of the opposite side is so we can do our y movement. So to figure out that y value we just need to do this:
length of opposite side = sin(angle)
So either using a graphing calculator (you can find them easily on the web) or our code, let’s find how big our y value is for a 25 degree angle. But wait, we want to use radians not degrees so let’s first do:
25 * (3.14 / 180). A 25 degree angle is really .436 radians! Now let’s find the opposite side of the triangle with this:
sin(.436). Type this into a graphing calculator to find .422. So now we know how much to increase our y-value per frame, how do we find that for our x value? With the cosine function, which is: cos(angle) = adjacent side / hypotenuse.
The adjacent side lies next to the angle, it is the x value we have been looking for. So like above we will simplify it to:
length of adjacent side = cos(angle)
So for that same 25 degree angle (.436 radians), let’s calculate cos(.436). This gives us .906. So let’s step back and think about that a bit. A 25 degree angle triangle should have a small opposite side and a larger adjacent side; .906 is more than double .422 so that makes sense.
So that does it, we now understand how to update our x and y values per frame to move an object in any direction!