Rotating A Gun Barrel towards The Target using ActionScript Trigonometric functions

As I already discussed in my previous post, based on trigonometric function, CREATING ROLLING EYES USING TRIGNOMETRIC FUNCTIONS. Here is the simple and small example on the same topic I am going to share with you.
You guys might be or some time played any shooting games like firing the bullets on the target or targeting bow-arrow to aim from fixed centered position. You may noticed, the gun or arrow rotates towards aim while you move the cursor towards aim.
But how it works…? Let’s see with Gun Barrel Example.
When we plan to develop this kind of games, generally we find the 3 main steps to develop, 1. Rotating gun barrel towards the your mouse pointer or the target. 2. Firing bullets along with barrel direction. And 3. Detection of collision between bullet and target.
In this example i am going to show you the step 1. Which is Rotating a gun barrel. Don’t worry in later post I will show how we can archive 2nd and 3rd Step.
In this article I am just trying to show you, how we can use ActionScript built in tangent functions and find the angle of Barrel towards mouse move or aim.
Look at the example below.


Just move the pointer around the area. you can see how the gun barrel is rotating towards the mouse pointer direction.
Using few basic formulas in to Programming (ActionScript) you can make your game or application more effective and live. i.e, adding gravity, flood, motion, friction or acceleration in to your applications & games etc. You can calculate the distance to detect collision between objects, you can make more effective timeline animations with ActionScript which you want. Even you can reuse the code & implement code for many other projects.
Look at example. If you wanted to rotation of a MovieClip towards mouse movement, you need to know its degree.
To determining movie clip angle by using sides described by the triangle formed with x and y as two of it sides, see image.
Trignle formed by x and y
Look at the above image, Angle indicates by “A” and Look at the formulas shown in below. you can use the tangent functions to determine angle.
Formulas
Luckily, you don’t have to worry about the formulas for tangent because these functions are built-in into ActionScript, in the Math Library Classes. So, all you have to do is with built-in methods.
See the code below, how we can find the degree of the angle using actionscript Math trigonometry methods.
Here first we need to find cursor x and y distance from the MovieClip(from Gun barrel co-ordinate).

[as3]
// find relative mouse location
var dx:Number = mouseX – mcGunBarrel.x;
var dy:Number = mouseY – mcGunBarrel.y;
[/as3]
Then determine the angle of the cursor from Gun Barrel using ActionScript Math class.

[as3]
var radian:Number = Math.atan2(dy,dx); // angle in radian
[/as3]

And here is the conversion of radian to degree.
[as3]
var degree:Number =360*(radian/(2*Math.PI)); // angle in degree
[/as3]
Once you get the degree, just assign the degree to rotation property of Gun Barrel MovieClip.
[as3]
// point at cursor
mcGunBarrel.rotation = degree;
[/as3]
See complete source code:
[as3]
package {
import flash.display.*;
import flash.events.*;
import flash.ui.Mouse;

public class pointing extends MovieClip {

public function pointing() {
this.addEventListener(Event.ENTER_FRAME, pointToTarget);
}

private function pointToTarget(event:Event):void {
// Moving pointer with mouse
mcPointer.x = mouseX;
mcPointer.y = mouseY;

// Hide mouse cursor
Mouse.hide();

// Move target left to right
mcTarget.x += 7;

// Reset initial state if the mcTarget
// x co-ord more then 600 pixels
if(mcTarget.x > 600) mcTarget.x = -50;

// find relative mouse location
var dx:Number = mouseX – mcGunBarrel.x;
var dy:Number = mouseY – mcGunBarrel.y;

// get radian and convert to degrees
var radian:Number = Math.atan2(dy,dx); // angle in radian
radianbox.text = “Radian: “+radian.toFixed(2);;
var degree:Number =360*(radian/(2*Math.PI)); // angle in degree
degreebox.text = “Degree: “+Math.floor(degree);

// point at cursor
mcGunBarrel.rotation = degree;
}
}
}
[/as3]
Download [point.zip]
I hope you like this example.
Let me know. If there is enough interest, I can move on to things like gravity, springs, friction, collisions and more…….

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *