rotation angle and spawn point of laser beam in flash game

Question

I am trying to figure out the rotation angle and generation point of a laser beam that shoots up from a Cannon on Mouse Click. I am using ActionScript 3 and Flash for the same.

I rotate the beam based on my mouse cursor position which I feel works just fine. The The issue is the generation point of my laser beam and it goes out of order. I want it to snap to the cannon ie its rotation point has to be the cannon. How do I do this in Flash?

Please have a look at the image file to get so that I am more clear.

Here is the code snippet that does the rotation and position logic in actionscript

laserBeamRight = new RightLaserBeam();
stage.addChild(laserBeamRight);
laserBeamRight.x = 812.65;
laserBeamRight.y = 400.1;
var angle2:Number = Math.atan2(stage.mouseY - laserBeamRight.y, stage.mouseX - laserBeamRight.x);
laserBeamRight.rotation = 180 * angle2/Math.PI;

I have hardcoded values for the position. They represent the right cannons position in the stage.

Here is the image file that shows the problem. enter image description here

So I want the beam is targeting the mouse crosshair which is fine but I want it to be fixed and rotated around the cannon.

Another image with two beams at different angles. X position is right but Y position looks out of place because of the angle

enter image description here

One last image which clearly shows my problem.

The X position is right so is the Y position but it is originating from the center point of the beam and not the end point or the tail of the beam. I want the tail of the beam to be snapped to the cannons position. I tried changing the pivot point of the beam movie clip inside flash to the tail but that did not help.

enter image description here Any idea?

Since your laser beam's position is the same as your tank, the code looks like it should work. Do either the cannon or laser beam have graphics that are offset from their absolute positions? Can you post the graphical code for the laser beam? It seems like origin point for the laser beam's rotation is incorrect. — Gigggas
Thanks for helping out. May I ask you what do you mean by graphical code for laser beam. I am sorry but I am kinda new to Flash and don't understand what you mean by it. Also both the cannon and the laser beam which you see in the screenshot are basically just movieclips with actionscripts attached to them. I have no code inside the actionscript file for laser beam. The rotation code which I shared is inside the cannon script. The code snippet which I shared in my first post is put under a function which gets called on mouse click event. That's about it in the code :) — Htlcs
In that case, it could be that your hard coded x and y variables are not correct. Does the laser beam always originate from the same incorrect spot? — Gigggas
The X position seems to be correct but the Y position always seem to be out of place. If I try to move the Y position of the beam to where the cannon's Y position is it gives weird results. I have pasted another image in my original post with two beams originating at different angles above the beam. — Htlcs
Okay I can think of two different things. 1. Can I move the laser beam layer behind the cannon layer. Right now it overlaps the cannon. Somehow If I can have it behind the cannon, it might solve the issue to some extend but not completely. 2. Does the beam generation have anything to do with its pivot point or registration point? — Htlcs

Vesper Vesper · Accepted Answer · 2014-06-06T07:03:26

First of all, adjust laser MC so that its anchor point is at its beginning instead of the middle, then align it to the turret's center as you do already. Then, when you are about to hit an object at specific (x,y), calculate rotation using Math.atan2() for the translated coordinates of mouse cursor (employ turret.globalToLocal(new Point(event.stageX,event.stageY)), then you should scale the laser so its end will hit the cursor position, change its scaleX. Note that you should do all transitions in one coordinate space (turret's), you apparently turn the turret's cannon part already, so you can do the same for your laser, and add it as part of a turret, probably positioning it behind the cannon part. An example:

// laser MC is like this: *>>>>>>>-------
// * is anchr point, laser is aligned righwards
const laserlength:Number=500; // the length of the laser, the X of the point you want to hit the cursor
....
function fireLaser(e:MouseEvent):void {
    // creates a laser
    var laser:Laser=new Laser();
    laser.x=turret.centerX; // where to position the laser beginning
    laser.y=turret.centerY; // relative to the turret
    turret.addChildAt(laser,0); // add as a part of turret, behind everything
    var cursor:Point=turret.globalToLocal(new Point(e.stageX,e.stageY));
    laser.rotation=Math.atan2(cursor.y-laser.y,cursor.x-laser.x)*180/Math.PI; 
    // rad-to-deg conversion
    laser.scaleX=Point.distance(cursor,new Point(turret.centerX,turret.centerY))/laserlength;
    // lasers.push(laser); // expecting you to do this so laser should fade with time
}

rotation angle and spawn point of laser beam in flash game

1 Answers