Microsoft MakeCode

Game Math

Hi -

On some of the more recent Live Advance Arcade streams some Trig functions (sin, cos, tan) have been used. I can follow along, but still do not completely understand when those functions are applicable in games (trying to avoid just memorizing code). I was wondering if anyone know where there are some good resources that goes over this and how it is applied to games.

I believe this functions could be beneficial in creating a Field Goal kicking game, where one bar bounces back forth on the x-axis to determine the kicking accuracy and another bounces up and down on the y-axis to determine the power of the kick. This might be a good idea for a live stream :grinning:

1 Like

It feels like something like in high school or college math.

@jwunderl any ideas here? I’m guessing trig doesn’t get covered in the course…

Yeah, we don’t really go into trig in the course; only thing I see right away is a sin or two in one of the example games at the end :frowning:

So, I’ll have a go at this. The following assumes knowledge of basic algebra (specifially, solving equations).

Trigonometry often comes into play when we are dealing with velocity.

Imagine we have a spaceship and an asteroid. Well, let’s not just imagine. Here ya go:

arcade-Trig

Now, let’s say we want to give the spaceship an appropriate velocity so that it moves toward the asteroid. In this case, we know the coordinates both of the spaceship and of the asteroid, so we can just do some quick subtractions to get an appropriate velocity:

arcade-Trig (1)

Other times, though, we don’t know coordinates. Instead, we have a velocity vector: We know the speed that we want the object to move, and we know the direction of the movement, expressed as an angle:

arcade-Trig-2 (2)

In this case, we know we want to move the spaceship at a speed of 50 and an angle of 30 degrees. We don’t have a way to express this in MakeCode Arcade natively, so we need to translate this information into an x velocity and a y velocity. This is where our trigonometry facts come into play. Remember soh-cah-toa: sine is opposite over hypotenuse, cosine is adjacent over hypotenuse, and tangent is opposite over adjacent:

        opposite
sine = ----------
       hypotenuse
	   
          adjacent
cosine = ----------
         hypotenuse

          opposite
tangent = --------
          adjacent

For our triangle, vy is opposite (or across from) our angle, vx is adjacent (or connected) to our angle, and the hypotenuse (the long side of the triangle) is 50. To figure out vx, we are dealing with the adjacent side and the hypotenuse, so we know we need to use the cosine function. Rearranging the equation a bit, we get

vx = 50 * cosine(30)

Similarly, we need sine to figure out vy:

vy = 50 * sine(30)

Since MakeCode Arcade has access to trig functions, we can let our program do the calculations:

arcade-Trig-2 (3)

Last bit of trickery: Like most programming languages, the functions in MakeCode Arcade do not use degrees to measure angles. Rather, they use radians. Quick conversion: 180 degrees = π (pi) radians. You can see that conversion in the code above.

Now, why would we ever need this? Here’s one example:

arcade-Ball-and-Paddle (1)

Let’s say we have a ball and a paddle at the bottom of the screen controlled by the player. Instead of simply reflecting the ball off of the paddle, we want the player to have some control over how the ball bounces off of the paddle. If the ball hits in the middle of the paddle, then the ball will bounce straight up. The more off-center the hit is, the more sideways we want the ball to bounce. No matter which direction the ball is moving, though, we want it to move at a constant speed.

The code could look something like this:

Feel free to play around with these samples.

To learn more about trigonometry, perhaps give Khan Academy a try.

As always, if you have any questions, feel free to ask!

P.S. Yes, I have written an extension that handles some of this math for you. Check the link below for the Vector Math extension.


See all of my MakeCode Arcade games and extensions here!

8 Likes

@AlexK Thank you for really breaking that down! That does clarifies the use of those functions & I did check out the Khan Academy’s lessons. Let me see if I get this right, looking at the Paddle & Ball overlap code, Delta X is the displacement of the paddle and ball, you are multiplying percentageOffCenter by 90 to make a right triangle, then the bouncleAngleReads iconverts the angle into Radians then once we have that we figure out the vx & vy using the cos & sin.

You did 16 - deltaX because it is 16 pixels from the bottom of the ball sprite to the center of the paddle sprite? Then by dividing by 16 you are putting that into a decimal so it can be converted into a percentage? Am I correct with this?

Again thank you for taking the time to explain this!

I’d say you are on the right track, @rymc88!

One of the things that you get used to when using trig functions is getting the orientation correct. Depending on the application, you may need to do a little bit of magic (e.g. switch vx and vy, make one of them negative, add 90 degrees) to get the numbers that you need.

When dealing with vectors, it helps to know which angle points in which direction:

arcade-Trig-Angles

Zero degrees points to the right; 90 straight up; 180 to the left; 270 (or -90) straight down. I use these values to help me figure out how to handle the displacement (the amount the ball is off-center of the paddle).

If the ball strikes the center of the paddle, I need an angle of 90 degrees. If I treat the displacement as a fraction or percentage, I’ll consider that 100%. If it hits the right side of the paddle, then, I need that to be 0% (or zero degrees). If it hits the left side of the paddle, I need that to be 200% (or 180 degrees).

The width of the paddle is 32 pixels, so I know the greatest displacement (I call this deltaX in the code; delta often refers to change or difference) between the ball and the paddle will be 16 pixels. To get the correct percentages, then, 16 - deltaX gives me the correct numerator (top of the fraction) when the denominator is 16.

Quick tests:

  • If the ball hits the middle, then deltaX is 0. The percentage, then, is (16 - 0) / 16 = 1 (or 100%).
  • If the ball hits the right side of the paddle, then deltaX is 16. The percentage, then, is (16 - 16) / 16 = 0.
  • If the ball hits the left side of the paddle, then deltaX is -16. The percentage, then, is (16 - -16) / 16 = 2 (or 200%).

Also, you might notice that I set vy to 0 - BALL_SPEED * sin(bounceAngleRads). That’s because the calculation gives me a positive value, but I need the ball to go up the screen. So, I need to change the sign (i.e. make vy negative).

Glad you found both the explanation and the Khan Academy tutorials helpful!

4 Likes

Thank you @AlexK! You are a great teacher!

1 Like

You bet, mate! Always happy to help. You’ve given me an idea for an extra chapter in my book. :smiley:

If the book is about game programming let me know when it comes…I will surely be a customer. So this is the game I have been working on, it is an American Football Field Goal game where there is an angle indicator and a power bar. Right now, the angle indicator is bouncing back and forth between 0 - 180 but I have been trying to only bounce between 0 - 90. I don’t know if adding something to the cos & sin functions would help or using a constraint. Any help and/or feedback would be appreciated!

https://makecode.com/_3vD3wYWvLX3k

I love this, @rymc88! Even the title is clever! This is another great use of the trigonometric functions: having an object trace an arc or a circle.

If you want to restrict the angle indicator, you’re going to need to add a set of constraints similar to what you are doing for thePowerIndicator. You’ll want to make your change value a variable instead of using a constant. (I used angleDelta.) When the angle indicator exceeds one of the bounds, reset the angle indicator and switch the sign for the amount of change. (Hint: 90 degrees = π / 2 radians.)

I’ve made the changes to your on update routine and included them below. I’ve hidden them behind a spoiler, in case you want to try to make the changes for yourself first. Click on the image to reveal the spoiler.

You clearly understand math, so I’ll pose the next question: Do you know which shape you’re going to use for the path of the football when the player kicks it?

P.S. Yes, the book is about MakeCode Arcade and game programming. You’ll be among the first to know when I release the preview! Thanks for the interest!

2 Likes

I believe it is going to be a parabola? Thank you for the solution and setting up a spoiler…I eventually looked cause I was having trouble resetting the currentAccuracyAngle because I didn’t think to use a variable for it.

I am excited about the book! Thanks again!

1 Like

While you can directly alter things like a sprite’s vx and vy values, I typically use variables when complex logic or calculations are involved. I find it makes the code a bit neater, even though it’ll be a little longer.

Yup, parabola makes the most sense to me, too. :slight_smile: Three points can be used to define a unique parabola. In your game, one of the points will be the initial position of the ball. The other two points could be determined by the two values of your indicators.

Desmos has a nice calculator that walks you through the steps of deriving the formula for a parabola given three points:

https://www.desmos.com/calculator/lac2i0bgum

Good luck! As always, if you have questions, just holler!

1 Like

Thank you for the advice and I am sure I will be reaching out to you sometime in the future with more questions.

Cheers!

1 Like