Flex-AS3 weired issue with Point - actionscript-3

I was trying to convert global coordinates to local coordinates of a UIComplenent in my flex project using below code using below code
var gp:Point = new Point(e.stageX,e.stageY); //global point
var lp:Point = uic.globalToLocal(gp); //local point
uic is UIComponent in which I have subclass of Sprite for drawing something
I have set the sprite's mouseEnabled and mouseChildren to false to not interrupt the mouse event.
above code is within uic's mousemove event where I was tracing the gp and lp gp was giving correct value and suprisingly lp was giving negetive values. when I move the move to the top left corner of uic i expect lp to be 0,0 but it is giving the -width of of uic. I broke my head for hours and ended up finding an alternate by using offsets. Infact my original code was much simpler like this which was same issue
var lp:Point = new Point(e.localX,e.localY);
I am not sure what exactly is causing this problem. the workaround had lot of issues and it creating a mess in my rest of the algorithms.
Just now I found even more interesting thing (which is actually weird). for some reason I went and create a new lp2
var lp2:Point = new Point(e.localX,e.localY);
now surprisingly it was giving correct values as expected and I went back and changed the code as
var gp:Point = new Point(e.stageX,e.stageY); //global point
var lp:Point = uic.globalToLocal(gp); //local point
var lp2:Point = new Point(e.localX,e.localY);
var lp2:Point = uic.globalToLocal(gp);
now it is expected to have all the lp, lp2 and lp3 variables to be same but weiredly lp two is giving wrong value and lp2 and lp3 were giving correct. I am suspecting using the variable lp has something to do. I am not sure about that but above proves it so right now I am using lp2.
does any one know why is this behavior? is it a bug? or am I overseen something?

Admittedly, I didn't look at your previous questions before leaving my comment :) I take it your questions seem to leave people quite perplex... It's probably due to the way you present them as totally abstract behaviors.
Taking the example above, I'm not sure you're going the right way about the globalToLocal method.
My understanding of globalToLocal is that given a Point and a DisplayObject, globalToLocal will return the position of the Point in relation to the DisplayObject.
var pt:Point = new Point ( 10, 20 ); // x, y in relation to the Stage
var shape:Shape = new Shape();
shape.x = 10;
shape.y = 30;
// x, y should trace 0 , 10 , which is the position of the
//point in relation to shape.
pt = shape.globalToLocal(pt );
//or if you prefer to declare a new variable
var pointToShape:Point = shape.globalToLocal(pt );
In your example you state that you're trying to get the local coordinates of uic , your UIComponent , when in fact you're only returning the values of your Mouse position in relation to uic. Then you state:
"now it is expected to have all the lp, lp2 and lp3 variables to be the same "
No , because you keep redeclaring your variables:
var lp2:Point = new Point(e.localX,e.localY);
//the next declaration/statement cancels the previous one
var lp2:Point = uic.globalToLocal(gp);
Please note that once a variable has been declared , it is not necessary to redeclare it in subsequent statements. In the example above , there's no relationships between the two lp2 declaration, you may as well write:
var x:int = 10;
x = 20;
x = whatever;// each statement practically cancels the previous one.

Related

Moving Object to another Objects position

Hey everyone so I am having some trouble trying to get this to work correctly. I have a MC Object called character and another called "points". I have a container object called planetContainer I add the character to the planetContainer the character is rotating around the planets that are also added to the container. The main issue I am having is when the points power up is activated I want the points to move off the other planets and to the charactercenter position. It was working perfect but had to update some code and remove the Points out of the planetContainer and attach them to the planets instead. I know I might have to use localToGlobal but not too sure.
Here is how I setup the character:
private function newCounterClockWise():void
{
planetContainer.addChild(character);
character.rotation = (Math.atan2(character.y - planetHit.y, character.x - planetHit.x) * 180 / Math.PI);
}
How the points are added to the Planets:
private function addPoints():void
{
points = new mcPoints();
var planetPosition:Point = planetContainer.parent.localToGlobal(new Point(0, 0));
points.x = planetPosition.x;
points.y = planetPosition.y;
outerPlanets.addChild(points);
aPointsArray.push(points);
}
Now this is the main function that handles the points to move to the character but it is not working correctly. The points move but they move off the screen or cause the game to kinda tweak out and do different things. Also the "magnetHandler(); is in my EnterFRame Event:
private function magnetHandler():void
{
for (var i:int = 0; i < aPointsArray.length; i++)
{
var currentPoints:mcPoints = aPointsArray[i];
var characterPosition:Point = planetContainer.parent.globalToLocal(new Point(character.x, character.y));
if (currentPoints.hitTestObject(playScreen.mcPointsHit))
{
trace("POINTS MID STAGE");
currentPoints.x -= (currentPoints.x - characterPosition.x);
currentPoints.y -= (currentPoints.y - characterPosition.y);
//currentPoints.x = character.x;
//currentPoints.y = character.y;
//TweenMax.to(currentPoints, 0.5, {x:characterGlobalPosition.x, y:characterGlobalPosition.y , ease:Power1.easeInOut } );
}
}
}
Can anyone see what I am doing wrong?
It's a hard to understand your question fully (or to understand why you're putting things that relate to each other in separate containers), but likely this line is where it's falling down:
var characterPosition:Point = planetContainer.parent.globalToLocal(new Point(character.x, character.y));
What you want to do, is get the characters x/y coordinates in the currentPoints parent space. To do that, you would do something like this:
//first, find the global position of character:
var globalCharacterPoint:Point = character.localToGlobal(new Point());
//then, convert that to the currentPoints parent local space:
var localCharacterPoint:Point = currentPoints.parent.globalToLocal(globalCharacterPoint);
Also, in this code of yours:
points = new mcPoints();
var planetPosition:Point = planetContainer.parent.localToGlobal(new Point(0, 0));
points.x = planetPosition.x;
points.y = planetPosition.y;
You are getting the global space of the planetContainer's parent, which is probably NOT what you want. You likely want:
planetContainer.localToGlobal(new Point()); //this gives you the global location of the planet container's top left corner
And, since you're adding the points object to outerPlanets, you probably want to convert to its local space (unless it's positioned at 0,0 globally - then it doesn't especially matter).
var outerPoint:Point = outerPlanets.globalToLocal(planetPosition);
points.x = outerPoint.x;
points.y = outerPoint.y;
Needless to say, for games it's best to have everything in the global coordinate space unless it's truly encapsulated assets (like smoke on a rocket etc.)

function 'for - do - end" / moving object ( Corona Sdk )

I'm beginner for coding, I've questions :
First I'd like know why that code is not moving :
local speed = 5
function cube ()
for i = 1,20,2 do
local rect = display.newRect(50,50,50,50)
rect.x = screenleft-300 + (50*i)
rect.y = _y
rect.x = rect.x - speed
if (rect.x < -450 )then
rect.x = 1200
end
end
end
timer.performWithDelay(1, cube, -1)
Secondly : What's the difference between
Runtime:addEventListener( "enterFrame", cube )
and
timer.performWithDelay(1, cube, -1)
Because I get the same result with both of them
And to be done, Why when I use the function "for" to duplicate something like the square i've done upside, this one put the image behind eachother and not like the square beside eachother ( the image i'm trying to duplicate has more than 4 side )
Thanks for all your reply !
thks a lot dude , I know what you mean by here but my question is little bit weird maybe lol and maybe we can't do it
I try to explain again :
for i=1,10,1 do
local Circle = display.newCircle(50, 20, 20)
Circle.x = _x + (50*i)
Circle.y = _y
end
So here I've a Circle line like that 00000 (imagine 0 are circle ^^)
and I want to make that line moving from the left to the right screen, but when i try to make it move with :
Circle.x = Circle.x - speed
Corona don't recognize the " circle.x " so I can't, maybe because is insert into the"FOR"
SO my question is : "How to move this Circle line if that's possible with the "FOR" ?
I hope I've Been clearer
Anyway, Thanks for all
I'll answer your second question first:
Runtime:addEventListener( "enterFrame", cube )
The function addEventListener adds a listener to the object’s list of listeners. When the named event occurs (in this case "enterFrame"), the listener will be invoked and be supplied with a table representing the event. In your code, the listener will call cube() on every frame (normaly, games run at 60 frames per second).
timer.performWithDelay(delay, listener [, iterations])
performWithDelay does what it says it does: Call a specified function after a delay. The timer function returns an object that can be used with other timer.* functions. In your code timer.performWithDelay(1, cube, -1) the function is calling cube() every 1ms and it is going to do so forever. This is not a good thing to do. There's nothing catching the return of the timer function and it is going to be running forever.
Now, to answer your main question. I believe what you are trying to do is create a square an move it in the screen. If that's correct, here's how you should do it:
local square = display.newRect(100,100,50,50)
local speed = 2
-- called every frame
local function moveSquare()
square.x = square.x + speed
end
Runtime:addEventListener("enterFrame", moveSquare)
The reason your code doesn't do what you want it to do is because you misunderstood a some basic CoronaSDK things.
Hope this little code helps you to understand more about how CoronaSDK works. Don't forget to check the documentation of Corona in http://docs.coronalabs.com/
You're creating an object locally in a loop and trying to move it outside of the loop. This doesn't work due to the way lua uses local variables. See http://www.lua.org/pil/4.2.html for more info about this.
Also, you'll need to place the objects into a single display group in order to move them easily. If you're using Box2D physics at all, I recommend reading up on it more at http://docs.coronalabs.com/api/library/physics/index.html.
Your code:
for i=1,10,1 do
local Circle = display.newCircle(50, 20, 20)
Circle.x = _x + (50*i)
Circle.y = _y
end
Should Be Changed to:
local Circle = display.newGroup(); --Forward declaration of Variable. Place this before any calls for it.
local speed = 2;
for i=1,10,1 do
local object = display.newCircle(50,20,20);
object.x = _x + (50*i);
object.y = _y;
Circle:insert(object); --Insert this local object into the display group
end
function moveCircle()
Circle.x = Circle.x + speed;
end
Runtime:addEventListener( "enterFrame", moveCircle);
This will move the Circle line every frame, on the X-axis, by the speed variable's value.
If you're trying to move it with a for-loop, then we'd need to see more of you code in context.

Snakes and Ladders AS3.. how can a movie clip climb a ladder?

I am having this problem in developing this snakes and ladders game and i am very much hoping that you guys can help me out. i already created the board and the avatar. only thing is i cant make the avatar move up the ladder, and move down with the snake. can somebody help me? i am very much desperate right now, and every help is appreciated, thank you guys!
EDIT:
here's the code that i have written so far here are some of the codes I have written so far..
stop();
var xCoord:Array = [141,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251];
var yCoord:Array = [675,670,670,670,670,670,670,670,670,670,670,602,602,602,602,602,602,602,602,602,602,534,534,534,534,534,534,534,534,534,534,466,466,466,466,466,466,466,466,466,466,399,399,399,399,399,399,399,399,399,399,331,331,331,331,331,331,331,331,331,331,262,262,262,262,262,262,262,262,262,262,195,195,195,195,195,195,195,195,195,195,127,127,127,127,127,127,127,127,127,127,60,60,60,60,60,60,60,60,60,60];
var arrSquares:Array = new Array(xCoord.length);
var spaceIndex:Number = 0;
var delay:Number = 400;
var tm:Timer = new Timer(delay);
tm.addEventListener(TimerEvent.TIMER, mover);
tm.addEventListener(TimerEvent.TIMER_COMPLETE, moveDone);
spinner.addEventListener(MouseEvent.CLICK, doSpin);
var total:Number =0;
function doSpin(mevt:MouseEvent):void {
var rn:Number = Math.round(5*Math.random()+1);
txtCount.text = String(rn);
total = total + rn;
txtTotal.text = String(total);
txtCount.visible = true;
spinner.removeEventListener(MouseEvent.CLICK, doSpin);
tm.reset();
tm.repeatCount = rn;
tm.start();
}
function mover(tevt:TimerEvent):void {
spaceIndex = (spaceIndex+1)%(xCoord.length);
chip.x = xCoord[spaceIndex];
chip.y = yCoord[spaceIndex];
}
function moveDone(tevt:TimerEvent):void {
spinner.addEventListener(MouseEvent.CLICK, doSpin);
txtCount.visible = false;
}
i dont know where to put the if statement of executing the motion tween attached to the chip(avatar)
Well here are my initial thoughts. I would create an animation with your character who you want to move up and down. To make it simple, make an animation for climbing, then one for falling. It's really easy to do, just use the tween option on the timeline after inserting your keyframes.
Looks like you've created your animations. Now, whether or not he slides up or falls down depends on where your snakes and ladders are. Only you know that, so at those particular spots on your board (for example, x = 200 and y = 200) we want the if statement to occur. But we only want it to occur after your avatar is done moving. Probably create a new function and add the following to the mover function
var checkX:Number = chip.x;
var checkY:Number = chip.y
checkLandingSpace(checkX,checkY);
Now let's make a function checkLandingSpace which will check if we are on a shoot or ladder
function checkLandingSpace(checkX:Number,checkY:Number):void
{
if (checkX = (your point) || (another point) //first check all x points...continue like this for all points where a ladder is...the || means or
{
if (checkY = (your points....etc)
{
mc_avatarLadder.play(); //choose your instance name to be mc_avatar, then play the tween
}
}
}
Or check this post for equating one variable to any element in an array If [Get Variable] is equal to [Array]
Now write the that for your ladder. Then do the exact same thing with all of your shoots points. Except, make a new animation with instance name mc_avatarShoot then just say mc_avatarShoot.play();
After that, make sure on the last frame for both instances, you just put in gotoAndStop(1); just to make sure it's ready next time you go to play the animation.
Of course, adjust your timer appropriately. This should pretty much do it, there might be a couple things to adjust for your own game, but follow this and understand it and you'll get it.

make visual clone of displayObject that's nested within other displayObjects, and add the clone to the stage layer in the same location, rotation, etc

I want to be able to grab a copy of a DisplayObject that is nested within other transformed DisplayObjects (rotated, scaled, stretched objects), and be able to stamp it back into the same visual location, but on the stage layer. Essentially, being able to make a clone of a nested DisplayObject, but be able to add the clone to the stage layer, yet have it perfectly align (visually) with the original (same position, scale, rotation)
I have been working with something along the lines of:
// draw the pixels of a displayobject into a new bitmap object
var bitmapData:BitmapData = new BitmapData(nestedSprite.width, nestedSprite.height, true, 0xFFFFFF);
var bitmap:Bitmap = new Bitmap(bitmapData);
bitmapData.draw(nestedSprite);
// put the copy on the top most layer
stage.addChild(bitmap);
// position the copy to perfectly overlay the original, but on the top stage layer
var point:Point = nestedSprite.localToGlobal(new Point(0, 0));
bitmap.x = point.x;
bitmap.y = point.y;
But this only works well for displayObjects whose parents are not transformed; and for displayObjetcs that are perectly at the (0,0) origin. It falls apart for centered aligned objects or scaled parents, etc.
I am aware that I can add a matrix param to the .draw() method, as well as a clipping rectngle, and scale my bitmap afterwards, or setting the transform of one object to another, or use .transform.concatenatedMatrix, or use nestedObject.getBounds(null), or nestedSprite.getBounds(nestedSprite), etc. But I have unfortunately fallen into doing trial and error programming on this one, and with some many variables, this is never a good way to solve a programming problem.
I believe this function should work, the only extra step was offsetting the concatenated matrix so that the target would draw with its top left at (0, 0) on the Bitmap even if its origin was somewhere else. Hopefully the rest is self explanatory, but I can add more comments if anything doesn't make sense.
function createBitmapClone(target:DisplayObject):Bitmap {
var targetTransform:Matrix = target.transform.concatenatedMatrix;
var targetGlobalBounds:Rectangle = target.getBounds(target.stage);
var targetGlobalPos:Point = target.localToGlobal(new Point());
// Calculate difference between target origin and top left.
var targetOriginOffset:Point = new Point(targetGlobalPos.x - targetGlobalBounds.left, targetGlobalPos.y - targetGlobalBounds.top);
// Move transform matrix so that top left of target will be at (0, 0).
targetTransform.tx = targetOriginOffset.x;
targetTransform.ty = targetOriginOffset.y;
var cloneData:BitmapData = new BitmapData(targetGlobalBounds.width, targetGlobalBounds.height, true, 0x00000000);
cloneData.draw(target, targetTransform);
var clone:Bitmap = new Bitmap(cloneData);
// Move clone to target's global position, minus the origin offset.
clone.x = targetGlobalPos.x - targetOriginOffset.x;
clone.y = targetGlobalPos.y - targetOriginOffset.y;
return clone;
}
Unfortunately, pixelBounds seems to return an origin of (0, 0) if there are any filters on the DisplayObjects, which obviously breaks things.
Edit: Replaced target.transform.pixelBounds with target.getBounds(target.stage) as a slight improvement. This keeps the position correct if there are filters, but filters on parent DisplayObjects still won't be included, and filters on the target can overlap the edges of the Bitmap. I'm not sure if there's a simple way to work around that.
Update: Jimmi Heiserman spotted that this function is broken if the swf is scaled. Without stage.scaleMode = StageScaleMode.NO_SCALE; though, the stageWidth and stageHeight parameters seem to stay unchanged, so the only (rather hacky) workaround I've found is to add an "unscaled" test Sprite and use its concatenatedMatrix to adjust the clone's position and scale:
function createScaledBitmapClone(target:DisplayObject):Bitmap {
var targetTransform:Matrix = target.transform.concatenatedMatrix;
var targetGlobalBounds:Rectangle = target.getBounds(target.stage);
var targetGlobalPos:Point = target.localToGlobal(new Point());
// Calculate difference between target origin and top left.
var targetOriginOffset:Point = new Point(targetGlobalPos.x - targetGlobalBounds.left, targetGlobalPos.y - targetGlobalBounds.top);
// Create a test Sprite to check if the stage is scaled.
var testSprite:Sprite = new Sprite();
target.stage.addChild(testSprite);
var testMatrix:Matrix = testSprite.transform.concatenatedMatrix;
target.stage.removeChild(testSprite);
// Move transform matrix so that top left of target will be at (0, 0).
targetTransform.tx = targetOriginOffset.x * testMatrix.a;
targetTransform.ty = targetOriginOffset.y * testMatrix.d;
var cloneData:BitmapData = new BitmapData(targetGlobalBounds.width * testMatrix.a, targetGlobalBounds.height * testMatrix.d, true, 0x00000000);
cloneData.draw(target, targetTransform);
var clone:Bitmap = new Bitmap(cloneData);
// Move clone to target's global position, minus the origin offset, and cancel out stage scaling.
clone.x = targetGlobalPos.x - targetOriginOffset.x;
clone.y = targetGlobalPos.y - targetOriginOffset.y;
clone.scaleX = 1 / testMatrix.a;
clone.scaleY = 1 / testMatrix.d;
return clone;
}
Have you tried passing the parents transform into draw? draw takes a transform matrix as the second param.
If you have a handle on the parent you can use something like this
bitmapData.draw(nestedSprite, parent.transform.matrix);

Is there a way to get the actual bounding box of a glyph in ActionScript?

I'm learning ActionScript/Flash. I love to play with text, and have done a lot of that kind of thing with the superb Java2D API.
One of the things I like to know is "where, exactly, are you drawing that glyph?" The TextField class provides the methods getBounds and getCharBoundaries, but these methods return rectangles that extend far beyond the actual bounds of the whole text object or the individual character, respectively.
var b:Sprite = new Sprite();
b.graphics.lineStyle(1,0xFF0000);
var r:Rectangle = text.getCharBoundaries(4);
r.offset(text.x, text.y);
b.graphics.drawRect(r.x,r.y,r.width,r.height);
addChild(b);
b = new Sprite();
b.graphics.lineStyle(1,0x00FF00);
r = text.getBounds(this);
b.graphics.drawRect(r.x,r.y,r.width,r.height);
addChild(b);
Is there any way to get more precise information about the actual visual bounds of text glyphs in ActionScript?
Richard is on the right track, but BitmapData.getColorBounds() is much faster and accurate... I've used it a couple of times, and optimized for your specific needs its not as slow as one might think.
Cory's suggestion of using flash.text.engine is probably the "correct" way to go, but I warn you that flash.text.engine is VERY (very!) hard to use compared to TextField.
Not reasonably possible in Flash 9 -- Richard's answer is a clever work-around, though probably completely unsuitable for production code (as he mentions) :)
If you have access to Flash 10, check out the new text engine classes, particularly TextLine.
I'm afraid all the methods that are available on TextField are supposed to do what you have already found them to do. Unless performance is key in your application (i.e. unless you intend to do this very often) maybe one option would be to draw the text field to a BitmapData, and find the topmost, leftmost, et c colored pixels within the bounding box retrieved by getCharBoundaries()?
var i : int;
var rect : Rectangle;
var top_left : Point;
var btm_right : Point;
var bmp : BitmapData = new BitmapData(tf.width, tf.height, false, 0xffffff);
bmp.draw(tf);
rect = tf.getCharBoundaries(4);
top_left = new Point(Infinity, Infinity);
btm_right = new Point(-Infinity, -Infinity);
for (i=rect.x; i<rect.right; i++) {
var j : int;
for (j=rect.y; j<rect.bottom; j++) {
var px : uint = bmp.getPixel(i, j);
// Check if pixel is black, i.e. belongs to glyph, and if so, whether it
// extends the previous bounds
if (px == 0) {
top_left.x = Math.min(top_left.x, i);
top_left.y = Math.min(top_left.y, j);
btm_right.x = Math.max(btm_right.x, i);
btm_right.y = Math.max(btm_right.y, j);
}
}
}
var actualRect : Rectangle = new Rectangle(top_left.x, top_left.y);
actualRect.width = btm_right.x - top_left.x;
actualRect.height = btm_right.y - top_left.y;
This code should loop through all the pixels that were deemed part of the glyph rectangle by getCharBoundaries(). If a pixel is not black, it gets discarded. If black, the code checks whether the pixels extends further up, down, right or left than any pixel that has previuosly been checked in the loop.
Obviously, this is not optimal code, with nested loops and unnecessary point objects. Hopefully though, the code is readable enough, and you are able to make out the parts that can most easily be optimized.
You might also want to introduce some threshold value instead of ignoring any pixel that is not pitch black.