rotation angle and spawn point of laser beam in flash game - actionscript-3

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.
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
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.
Any idea?

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
}

Related

Rotation issue While Reflected (2D Platform Game)

My player's arm is programmed to follow my mouse and rotate accordingly and I've programmed bullets to be fired using this rotational value
(Math.atan2(this._dy, this._dx) * 180 / Math.PI
where _dy is the y location of the mouse (-) the y of my player's arm and the _dx is the x location of mouse (-) the y of my player's arm.
However, when I program the player to reflect when the mouse has crossed the x-coordinates, the bullet angle is also reflected. How would I fix this issue?
I've already tried subtracting 180 from the angle but it still doesn't fire towards the direction of the mouse.
First, make sure you have this parent-child-sibling relationship:
"A" should be the parent of "B" and "C". "B" and "C" should have no direct link. Their connection is that they have the same parent. So when you want to move the character, move the parent, and both will move. Now, for the good stuff:
Use key frames and sibling relationship
beginner level approach
Make the character and the arm both children of the same parent display object container (Movie Clip in this case). Now, instead of flipping anything by xScale, which I assume you did, you can just have both MC children (arm and character) go to frame 2 (or whatever is available) where the graphics are flipped.
xScale body, move arm to frame 2, change z order
moderate level approach (best result)*
Alternatively, you could do that same "sibling" setup as above, and then scale the character but not the arm (I think scaling the arm will mess it up again, but you could have the arm go to frame 2 and have it drawn reversed so the thumb and handle are pointing the right way. Bonus points for changing the z stacking order so the arm goes to the other side of the body. xScale for only the body allows you to only have one set of frames for animation of his legs and torso etc. but also avoid scaling the arm at all).
Global properties
advanced approach
A third option is to use global rotation and global points. I won't illustrate that here because I'm not that advanced and it would take me a while to figure out the exact syntax. If you already have mastered global properties, try this; if not, try one of the ones above.
* Example (best result)
if (facingRight == true && stage.mouseX < totalChar.x){
// totalChar is on the stage
// and contains two children:
// armAndGun and bodyHeadLegs
totalChar.armAndGun.gotoAndStop(2);
// in frame 2 of the arm MC, draw the
// arm and gun in the flipped orientation
totalChar.addChild(bodyHeadLegs);
// re-ads body to parent so it's
// z-order is above the arm;
totalChar.bodyHeadLegs.xScale = -1;// flips body and any animation of legs and head
facingRight = false;
// use a variable or property like this
// to keep him from constantly flipping
}
You'll need similar code to flip him back the other way.

cocos2d-x Actor does not move to touch location

I am trying to make an actor follow the player's finger (long touch). I'm positive I have the math right, but the actor fails to move exactly to where the player touched.
Here is an illustration of my problem:
When the touch is near the top, the actor goes beyond the visible scene at the top.
When the touch is near the bottom, the actor goes out of the visible scene at the bottom.
Same goes for the left and right.
When the touch is performed in the middle of the scene the actor moves perfectly to the touch. In short, the further the touch is away from the middle the more pronounced the distance between the actor and the touch is. In other words; the closer the touch is to the middle, the closer the actor moves towards the touch.
Please note that when the touch was near the bottom or the top the distance between the touch and the actor was more pronounced then when the touch was on the right or the left; as the top/bottom are further from the mid point.
Here is the code used to follow the actor towards the touch:
Lang: Lua
Lib: Cocosd2-x 3.1
local velocity = 1.4
local x, y = self.sprite:getPosition()
-- self.dest[X/Y] are cached coordinates to where the actor should move next.
local angle = math.atan2(touch.y - y, touch.x - x)
local deltaX = velocity * math.cos(angle)
local deltaY = velocity * math.sin(angle)
local newX = x + deltaX
local newY = y + deltaY
self.sprite:setPositionX(newX)
self.sprite:setPositionY(newY)
Things I've tried:
Changed the scale of background layer and sprites. No change
Changed the algorithm used to compute the angle. No change.
Created a red dot and set its position to the exact touch x/y to determine if there was some weird transformation issue when determining the actor's point. The red dot was always perfectly under the touch.
Discovered the issue. When I created the Actor sprite I set its z-index to 100. When I uncommented out the call that set the z-index, everything worked perfectly. In my situation, this particular sprite must always be above all other sprites. What I did to fix the issue is set the z-index much lower than what I had originally set it to; which ended up being 15.
sprite:setPositionZ(15)
From my observation it appears that the sprite is having some type of scale applied to its position the larger the z-index is of the sprite.
Update 1
Using :setPositionZ(int) will unnecessarily scale your sprite bigger in some cases. I now use :setGlobalZOrder(int) with much better success:
sprite:setGlobalZOrder(15)

I want to draw a pipeline image like draw a line that follow the mouse cursor

I want to draw a pipeline image (below) like draw a line, that follow the mouse cursor. When I press down the left button,and move the mouse cursor,the pipeline image draw to the cursor position (Like bessel curve)
. How can I do that? Thank you!
Here’s an example of how to define a “tube” given some mouse points.
The red points connected by red lines represent your mouse points.
The green & blue lines are calculated to be parallel to the red mouse line with an offset of 15 pixels.
The green & blue lines form the outside of your tube.
I'll help you with the math, but styling your tube is up to you.
Requires some trigonometry...ready?
Given that your mouse travels along a polyline (a series of points connected by line segments). Your mouse points are the red line in the illustration.
At each point, calculate 2 points perpendicular to that point and on either side of that point.
When you connect these perpendicular points, they become the sides of your "tube". These are the green & blue lines on either side of the mouse line.
How:
Use Math.atan2 to calculate the angle of slope between [x1,y1] and [x2,y2].
var dx=x2-x1;
var dy=y2-y1;
var originalAngle=Math.atan2(dy,dx);
Use Math.cos/Math.sin to find 2 points perpendicular to [x1,y1]
// a perpendicular angle is always 90 degrees different
// from the angle of the original line.
// (90 degrees == Math.PI/2 radians)
// let's subtract 90 degrees
var perpendicularAngle=originalAngle-Math.PI/2;
// let's get a perpendicular point that's
// 15 pixels away from [x1,y1]
var offsetLength=15;
// use cosine and sine to calculate that perpendicular point
var perpX1=x1+offsetLength*Math.cos(perpendicularAngle);
var perpY1=y1+offsetLength*Math.sin(perpendicularAngle);
// repeat to get the opposite perpendicular point
// This time add 90 degrees to the original angle.
var perpendicularAngle=originalAngle+Math.PI/2;
var perpX2=x1+offsetLength*Math.cos(perpendicularAngle);
var perpY2=y1+offsetLength*Math.sin(perpendicularAngle);
One edge issue you must work around: If the angle of slope is either horizontal or vertical, the cosine/sine calculation won't work. Instead, just add/subtract the offset length to the point.
The math part is done!
Now just style the data-points as you desire. Maybe connect the perpendicular points on each side of the mouse line to form the sides of your tube. Apply some semi-transparent fill to allow the background to show through. Whatever your design requires.
Good luck with your project!

Objects added to stage with coordinates 0,0 appear near the middle...why?

I'm using Flash Builder to build an flash-web application, and whenever I try to add objects to the stage, they appear near the center even if their coordinates are set at 0,0. I've tried track the mouse movement to see what the coordinates of the upper left corner are, and they are always a negative number.
Strangely, the stage coordinates and position of the children change based on how large the flash object is. For example, if the flash object is 500 pixels wide, the top left corner of the stage is at about -130 and if the flash object is 800 pixels wide, its at about -200. Why is the coordinate system wrong? Do I have to alter an anchor point or something like that?
Here is a sample of an object I'm trying to position at 0,0:
var square:Sprite = new Sprite();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = 0;
square.y = 0;
This shows up near the center and I can't figure out why.
Is the object you are using a MovieClip or Sprite? If so then your registration point could be in an incorrect position.
Usually registration points are placed right in the middle of the object instead of lets say the top left as you would want it. So the co-ordinates would be different to the stage.
I fixed this by adding
stage.align = StageAlign.TOP_LEFT;
to the main function.

How to track a point on rotating MovieClip?

I have a MovieClip, that is representing a character in my game. Id like to "create bullets" shooting out from the tip of my characters gun. Problem is that when my character turns around, also the point rotates around the MovieClips pivot.
Is it possible to anyhow easily track this point, so that I could dynamically create new objects at the same location.
I tried to add a new MC as a child to my character, with the initial position at the guntip. In some systems child-objects "follow" their parents around, but it didnt seem to work here.
Is there any other "native" way of doing this, or do I just have to have a Polar-coordinates representation of the point relative to character-MovieClips origin, and add the MC rotation to theta, so that I can calculate the X and Y coordinates?
Try localToGlobal() and globalToLocal() methods to transform coordinates from your character movieclip to its parent.
Set up the movie clip with the gun (I'm assuming it's at the end of an arm?) so that the gun tip is straight across from the pivot point.
Then pass the method that fires the bullet three parameters: the x and y position of the gun MC, and its current angle.
The code for your bullets initial position might look something like this:
public function CreateBullet(x,y:Number, degree:Number)
{
// set start position
this.x = x + ARMLENGTH*Math.cos((degree/180)*Math.PI);
this.y = y + ARMLENGTH*Math.sin((degree/180)*Math.PI);
}
Where ARMLENGTH is the distance from the pivot point to the end of the gun.
Two caveats, Flash can do weird things with angles, so you might have to make an if statement in CreateBullet() with inverted degrees if the player if facing backwards. Also, if you have the gun MC as a child of your character, you might have to make a Point where the pivot point is then do a localToGlobal on it. There's a good reference for that here.