Hey everyone! Here’s a super brief tutorial. Just to hold you over for another week while I write the next big one ;)
We’ll be modifying the Player.as class so that the player rotates in the direction of the mouse. It only takes a few lines of code. (You can actually do it in one line of code, I’m just spelling everything out to make it nice and simple.)
Put all of these lines inside the bottom of the loop function in the Player.as class.
//calculate these values, which we will use to determine the angle we need to rotate to var yDifference:Number = stageRef.mouseY - y; var xDifference:Number = stageRef.mouseX - x; //this constant will convert our angle from radians to degrees var radiansToDegrees:Number = 180/Math.PI; //this final line uses trigonometry to calculate the rotation rotation = Math.atan2(yDifference, xDifference) * radiansToDegrees;
That’s it. Compile and run your code. I told you it was quick.
If you want to be super efficient with your code, you can even replace all that code with this one line:
rotation = Math.atan2(stageRef.mouseY - y, stageRef.mouseX - x) * 180/Math.PI;
Wait! So why does that code work? It isn’t magic… it’s math. Let’s go through the math, step-by-step.
We are setting the rotation to Math.atan2(stageRef.mouseY – y, stageRef.mouseX – x) * 180/Math.PI
- stageRef.mouseY – y
- This gives use the difference between the y position of the mouse, and the y position of the player
- stageRef.mouseX – x
- Similarly, this gives use the difference between the x positions of the mouse and the player.
- Math.atan2( [ y difference ] , [ x difference ] )
- Math.atan2 is actionscript’s version of taking the inverse tangent. It uses a comma to separate the numerator and the denominator.
- If you know basic trigonometry, you’ll know all about the inverse tangent. If you’re unfamiliar with it, trigonometry is really useful in programming, so you might want to learn the basics, but here’s the general idea: we can use the lengths and angles of a right triangle to calculate new, useful information. Specifically to this tutorial, we can use the lengths of two sides of a right triangle to determine its angles. Using the yDifference and xDifference as the two lengths, we can find what angle the player should rotate to. The only problem: Math.atan2 gives the angle in radians, not degrees. To convert back to degrees, which Flash uses, we need to multiply our value by a constant.
- * 180 / Math.PI
- This converts the angle from radians (between 0 and 2 PI) to degrees (between 0 and 360)
That’s it for today, folks! You can pickup your source files here.
Thanks for reading :-)
Wow that was short haha, set myself up for some coding and barely did anything :P
Question, with code like this, do you write it off the top of your head? Or do you have reference code that you refer to when wanting to achieve a desired outcome such as this?
Well, to be honest, I’ve used this code so many times that I just remember how to do it. But if I didn’t remember, I’d try to figure it out using the math I know (I’ve taken a lot of math classes). If I still couldn’t figure it out, I’d definitely look it up and try to find some reference code.
Im currently building off of Ben’s Tutorial, you can check the forums if your interested.
short and sweet, great little, found it quite hard to fully understand so I’m going to go and learn trigonometry then do it again, thanks Ben :)
Excellent tutorial mate :) I’m new to this site, so how often can I expect new posts?
Hi Tom, thanks for reading :-)
Sometimes life gets busy and I’m unable to write another tutorial for a while. I’d say on average, I end up writing 1 or 2 posts per month. (I’m working on the next one right now, but my longer posts can take many hours to code, write, proofread, and post).