Calculating angles and moving objects accordingly

One of the most common tasks in Flash game development is calculating angles. This becomes important in even simple 2D games such as shooters where the player can fire bullets in all directions. If you're anything like me, you're probably not very good with math. I typically will find other ways to get the job done, and indeed I had my own way for figuring bullet paths, but eventually I decided to use real angles and I'm pleased to say it really isn't that bad.

I first decided to give it a shot a few years ago after watching one of Lee Brimelow's tutorials on carousels from In the video, he said all you have to do is remember to use cosine for x and sine for y. Well, that's pretty simple, right? So let's take a look at making a small application that will allow you to input an angle (in degrees) and then fire a slow-moving bullet at that angle.

To start, we'll just open a new AS3 fla file in Flash. We'll put a small ball (the bullet) in the top left corner and name it bullet_mc. We'll then put an input textfield in the upper right corner and give it a name of angle_txt. This text box is where you will input the angle you want to shoot the bullet at. There really isn't much code to this one, so let's take a look at all of it at once.

stage.addEventListener(MouseEvent.CLICK, oc);

var speed:int = 2;
var angle:int = 45;
var rads:Number;

angle_txt.restrict = "0-9";
angle_txt.text = angle.toString();

function oc(evt:MouseEvent):void
	bullet_mc.x = bullet_mc.y = 0;;, 0xcc0000, 1);
	angle = int(angle_txt.text);
	rads  = angle * Math.PI  / 180;		
	if(stage.hasEventListener(Event.ENTER_FRAME) != true)
		stage.addEventListener(Event.ENTER_FRAME, oef);	

function oef(evt:Event):void
{, bullet_mc.y);
	bullet_mc.x += Math.cos(rads) * speed;
	bullet_mc.y += Math.sin(rads) * speed;, bullet_mc.y);

The code here is pretty simple. First we set up an event listener so that when the stage detects a mouse click, we'll reset the bullet's position, get our angle, convert it to radians and start moving the bullet. Next we set up a few variables we'll need; one for the bullet's speed, one for the angle (which we default to 45) and one to hold the result of our degrees to radians conversion. We do this because the built-in Math functions in Flash are based on radians, not degrees.

After setting up our variables, we restrict the textfield input to only numbers, no letters, and set the value based on our default angle. Next up is the mouse click handler. In here we first reset the bullet's position and clear any drawing we may have done already. Then we reset our line style, grab the angle from the input textfield and finally convert that angle from degrees to radians using the formula: angle * PI / 180. Lastly, we add an enter frame event listener if we don't have one already. The enter frame handler will update the bullet's position according to our angle so let's look at that next.

As you can see, we first move our graphics drawing object to the bullet's position. Then we update the bullet's x and y positions using cosine for x and sine for y as mentioned earlier. We then multiply these values by our speed; otherwise the bullet would move very slowly. Finally we simply draw a line to the bullet's new position. This allows us to chart the bullet's path along the angle as it moves.

That's all there is to it. See? I told you it wasn't that bad. You can try out the application below and also play around with another angle calculator I created that dynamically draws and measures the angle created by the mouse cursor from the center of the grid.

Download Source

Bookmark and Share

5 Responses to “Calculating angles and moving objects accordingly”

  1. so cool. i like it.

  2. Juv says:

    Thank you, your line

    rads = angle * Math.PI / 180;

    helped me figure out what I was missing and why my bullets were not going the right direction!


  3. bess says:

    nice and thanks.

  4. Mohit Shukla says:

    This does look cool. I am a beginner and was atleast able to try out the code above in my application. However my end goal is to make something like the one on the bottom, and superimpose it on a camera to create an angle measurement application. Any tips?

  5. Rhuno says:

    Sounds like a cool app! I’m not sure much would change, but it may be up to the user to ensure the perspective is correct.

Leave a Reply

Subscribe to RSS feed FGS5 Badge