Where does the .x and .y property of a movieclip in actionscript 3.0 measured from? from the centre of the object? or.....?
For instance, given a pro grammatically drawn Sprite:
graphics.beginFill(0x000000);
graphics.moveTo(9.00000000,-7.00000000);
graphics.lineTo(13.00000000,0.00000000);
graphics.lineTo(9.00000000,6.00000000);
graphics.lineTo(-11.00000000,6.00000000);
graphics.lineTo(-14.00000000,0.00000000);
graphics.lineTo(-11.00000000,-7.00000000);
graphics.lineTo(9.00000000,-7.00000000);
graphics.endFill();
Where will sprite.x and sprite.y measure from?
The top left hand corner? Or center of the sprite? or...?
Please enlighten me, thank you guys!
Best Regards.
The origin is always the top left corner of the object. x grows positively towards right and negatively to left; y grows positively towards the bottom and negatively towards top.
0,0 ---- 5,0
| |
| |
| |
0,5 ---- 5,5
Thus the origin of stage/root object is top left corner of the SWF because its coordinates are 0,0. If you add a display object to the root object and set its x and y to 5, (mc.x = 5; mc.y = 5;), and draw a line on its local coordinates from 0,0 to 15,15 that line would be drawn from 5,5 to 20,20 on the global coordinates.
Check out localToGlobal and globalToLocal methods of the DisplayObject class.
I think your confusion comes from the layered nature of the coordinate systems in Flash. When you draw your Sprite, the x and y values you pass to the graphics methods (e.g. lineTo) are measured relative to the coordinate system of the sprites. Moving the sprite's .x and .y will move everything in the sprite's graphics. So, if the sprite was initially at (0,0) and ran the above code, much of the drawing is off the screen (because it draws to negative x and y values. If, after the above code was run, you moved the sprite to (14,7), all the lines would be visible (just barely).
Related
I try to use 2 ellipses to detect a collision if they overlap. I have to rotate the ellipses but I can't figure out how this works. I'm working with the "com.badlogic.gdx.math.Ellipse" class but it seems to have no method for rotating. Any ideas? Thx in advance!!
Unfortunately, LibGDX doesn't have in-built rotating functions for ellipses.
Instead, I'd either be resorting to a circle in which rotation does not matter, or use polygons to check intersection.
Polygons are formed through an array of float values (vertices), where, every even element of the array is the horizontal component (x) and the odd, the vertical component (y).
Polygon polygon1 = new Polygon(vertexSet1);
Polygon polygon2 = new Polygon(vertexSet2);
Then, by using an Intersector, you can then check whether these polygons have intersected. The more vertices, the more accurate your shape will be. Just remember to have 6 or more elements in your vertex array, as the 6 floats will give 3 (x, y) points which is the minimum required for a polygon.
if (intersector.overlapConvexPolygons(polygon1, polygon2) {
//do your intersection code
}
The polygons themselves have commands to translate, scale and rotate, allowing for the rotations you mentioned above.
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
}
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'm trying to recreate some flash shapes that appear on rollover upon a circle symbol. I'm needing to convert flash x and y points to the canvas coordinate grid. I figured out how to convert the circle coord points. However, the info I'm given for the shapes that appear on rollover make no sense to me.
For example, take this rollover point, where the dimensions refer to the registration point (little cross in the upper left):
x = 532.30
y = 30.35
w/h = 19.80
But based off this, the info I get for the rectangle that appears on rollover makes no sense:
x = -7.30
y = 17.30
w = 29.0
h = 16.5
I figured this meant that the rectangle's upper left point was 7.30 pixels to the left, and 17.30 pixels down from the registration point of the circle. Is that right? What origin are these x and y coordinates based off of?
The width and height are completely confusing to me though. The given width is 29.0, but this can't be right. If I get x and y coordinates just using my cursor, its clear that the rectangle is much wider than this:
564 - 521 = 43
43 != 29
Please help me understand the mysterious info box I'm being presented with for this rectangle. I just need to get some vanilla coordinates for it so I can draw it on the HTML5 canvas.
What origin are these x and y coordinates based off of?
These x and y coordinates are based off of the registration point of tab button.
43 != 29
When you work with symbols on a stage, the symbols that you're working with aren't the actual original Library symbol. They're copies that can be manipulated by scaling them, applying color and opacity effects and...
This instance of tab button is scaled, if you open library panel and edit tab symbol you can see the actual size.
UPDATE
after I change width and height of tab button to 19.80:
29*(150/100)=43.5
I am trying to understand the method transition that falls in the Matrix Class. I am using it to copy pieces of a bitMapData. But I need to better understand what transitions do.
I have a tilesheet that has 3 images on it. all 30x30 pixels. the width of the total bitmap is 90pxs.
The first tile is green, the second is brown, and the third is yellow. If I move over 30pxs using the matrix that transitions, instead of getting brown, I get yellow, if I move over 60px, I get brown.
If I move -30 pixels, then the order is correct. I am confused on what is going on.
tileNum -= (tileNumber * tWidth);
theMatrix = new Matrix();
theMatrix.translate(tileNum,0);
this.graphics.beginBitmapFill(tileImage,theMatrix);
this.graphics.drawRect(0, 0,tWidth ,tHeight );
this.graphics.endFill();
Can someone tell me how transitions work, or some resources that show how they work. I ultimately want to know a good way to switch back and forth between each tile.
First of all, don't confuse translation with transition. The latter is a general English word for "change", whereas to translate in geometry and general math is to "move" or "offset" something.
A transformation matrix defines how to transform, i.e. scale, rotate and translate, an object, usually in a visual manner. By applying a transformation matrix to an object, all pixels of that object are rotated, moved and scaled/interpolated according to the values stored inside the matrix. If you'd rather not think about matrix math, just think of the matrix as a black box which contains a sequence of rotation, scaling, and translation commands.
The translate() method simply offsets the bitmap that you are about to draw a number of pixels in the X and Y dimensions. If you use the default ("identity") matrix, which contains no translation, the top left corner of your object/bitmap will be in the (0,0) position, known as the origin or registration point.
Consider the following matrix:
var mtx : Matrix = new Matrix; // No translation, no scale, no rotation
mtx.translate(100, 0); // translated 100px on X axis
If you use the above matrix with a BitmapData.draw() or Graphics.beginBitmapFill(), that means that the top left corner of the original bitmap should be at (x=100; y=0) in the target coordinate system. Sticking to your Graphics example, lets first consider drawing a rectangle without a matrix transformation.
var shape : Shape = new Shape;
shape.graphics.beginBitmapFill(myBitmap);
shape.graphics.drawRect(0, 0, 200, 200);
This will draw a 200x200 pixels rectangle. Since there is no transformation involved in the drawing method (we're not supplying a transformation matrix), the top left corner of the bitmap is in (x=0; y=0) of the shape coordinate system, i.e. aligned with the top left corner of the rectangle.
Lets look at a similar example using the matrix.
var shape : Shape = new Shape;
shape.graphics.beginBitmapFill(myBitmap, mtx);
shape.graphics.drawRect(0, 0, 200, 200);
This again draws a rectangle that is 200px wide and 200px high. But where inside this rectangle will the top left corner of myBitmap be? The answer is at (x=100, y=0) of the shape coordinate system. This is because the matrix defines such a translation.
But what then will be to the left of (x=100; y=0)? With the above code, the answer is that the bitmap repeats to fill the entire rectangle, and hence you will see the rightmost side of the bitmap, to the left of the leftmost side, as if there was another instance of the bitmap right next to it. If you want to disable the repeating image, set the third attribute of beginBitmapFill() to false:
shape.graphics.beginBitmpFill(myBitmap, mtx, false);
Lets take a look at one last example that might help your understanding. Remember that the translation matrix defines the position of the top left corner of an image, in the coordinate system of the shape. With this in mind, consider the following code, using the same matrix as before.
var shape : Shape = new Shape;
shape.graphics.beginBitmapFill(myBitmap, mtx);
shape.graphics.drawRect(100, 0, 100, 100);
Notice that this will draw the rectangle 100px in on the X axis. Not coincidentally, this is the same translation that we defined in our matrix, and hence the position of the top left corner of the bitmap. So even though repeating is enabled, we will not see a repeating image to the left of our rectangle, because we only start drawing at the point where the bitmap starts.
So the bottom line is, I guess, that you could think of the transform matrix as a series of transformation commands that you apply to your image as you draw it. This will offset, scale and rotate the image as it's drawn.
If you are curious about the inner workings of the matrix, Google transformation matrices, or read up on Linear Algebra!