I want to set the rotateX property of a movie clip (so it tilts backwards in 3d), but whenever I attempt it with
myMC.rotationX = -90;
it tilts back at an odd angle. How can I rotate the movieclip so that it leans backwards perfectly straight? How do I set a center point for this transform?
A screenshot would be helpful to explain "...an odd angle" but it sounds like your 'vanishing point' is in the wrong place. Take a look at http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/PerspectiveProjection.html
You set the vanishing point on the parent (only needs to be done once, unless you wish to move it or stage resizes), eg:
//set vanishing point to center of current DisplayObject
this.projectionCenter = new Point(this.width/2, this.height/2);
Then rotate:
myMC.rotationX = -90;
Related
I want to implement rotating rectangle around cicrle in such way, that circle has no rotation, and rectangle has. All object's are Box2D Body objects. Here is picture, what I want to have:
In my case rectangle touches circle, but I think it doesn't matter.
At first I tried to do it with two Fictures for same Body, but there was a problem with rotation: I couldn't have one ficture with rotation and another without.
I think, it should be somehow connected with joints, but I don't know what exactly Joint I should use. Maybe are there another solutions?
I think DistanceJointDef will do the tricks
you could put the radius if the circle as the distance with a little margin if you want
you also have to reduce the friction of bodies so the rectangle can move smoothly
DistanceJointDef djd = new DistanceJointDef();
djd.bodyA = bodyRactangle;
djd.bodyB = bodyCirlce;
djd.length = radius + margin;
world.createJoint(djd);
bodyRactangle is a dynamic body
bodyCirlce is a static body
try that for a start, hope it is helpful
Good luck !!
Using the first photo below, let's say:
The red outline is the stage bounds
The gray box is a Sprite on the stage.
The green box is a child of the gray box and has a rotation set.
both display object are anchored at the top-left corner (0,0).
I'd like to rotate, scale, and position the gray box, so the green box fills the stage bounds (the green box and stage have the same aspect ratio).
I can negate the rotation easily enough
parent.rotation = -child.rotation
But the scale and position are proving tricky (because of the rotation). I could use some assistance with the Math involved to calculate the scale and position.
This is what I had tried but didn't produce the results I expected:
gray.scaleX = stage.stageWidth / green.width;
gray.scaleY = gray.scaleX;
gray.x = -green.x;
gray.y = -green.y;
gray.rotation = -green.rotation;
I'm not terribly experienced with Transformation matrices but assume I will need to go that route.
Here is an .fla sample what I'm working with:
SampleFile
You can use this answer: https://stackoverflow.com/a/15789937/1627055 to get some basics. First, you are in need to rotate around the top left corner of the green rectangle, so you use green.x and green.y as center point coordinates. But in between you also need to scale the gray rectangle so that the green rectangle's dimensions get equal to stage. With uniform scaling you don't have to worry about distortion, because if a gray rectangle is scaled uniformly, then a green rectangle will remain a rectangle. If the green rectangle's aspect ratio will be different than what you want it to be, you'd better scale the green rectangle prior to performing this trick. So, you need to first transpose the matrix to offset the center point, then you need to add rotation and scale, then you need to transpose it away. Try this set of code:
var green:Sprite; // your green rect. The code is executed within gray rect
var gr:Number=green.rotation*Math.PI/180; // radians
var gs:Number=stage.stageWidth/green.width; // get scale ratio
var alreadyTurned:Boolean; // if we have already applied the rotation+scale
function turn():void {
if (alreadyTurned) return;
var mat:flash.geom.Matrix=this.transform.matrix;
mat.scale(gs,gs);
mat.translate(-gs*green.x,-gs*green.y);
mat.rotate(-1*gr);
this.transform.matrix=mat;
alreadyTurned=true;
}
Sorry, didn't have time to test, so errors might exist. If yes, try swapping scale, translate and rotate, you pretty much need this set of operations to make it work.
For posterity, here is what I ended up using. I create a sprite/movieClip inside the child (green) box and gave it an instance name of "innerObj" (making it the actually content).
var tmpRectangle:Rectangle = new Rectangle(greenChild.x, greenChild.y, greenChild.innerObj.width * greenChild.scaleX, greenChild.innerObj.height * greenChild.scaleY);
//temporary reset
grayParent.transform.matrix = new Matrix();
var gs:Number=stage.stageHeight/(tmpRectangle.height); // get scale ratio
var mat:Matrix=grayParent.transform.matrix;
mat.scale(gs,gs);
mat.translate(-gs * tmpRectangle.x, -gs * tmpRectangle.y);
mat.rotate( -greenChild.rotation * Math.PI / 180);
grayParent.transform.matrix = mat;
If the registration point of the green box is at one of it's corners (let's say top left), and in order to be displayed this way it has a rotation increased, then the solution is very simple: apply this rotation with negative sign to the parent (if it's 56, add -56 to parent's). This way the child will be with rotation 0 and parent -> -56;
But if there is no rotation applied to the green box, there is almost no solution to your problem, because of wrong registration point. There is no true way to actually determine if the box is somehow rotated or not. And this is why - imagine you have rotated the green box at 90 degrees, but changed it's registration point and thus it has no property for rotation. How could the script understand that this is not it's normal position, but it's flipped? Even if you get the bounds, you will see that it's a regular rectangle, but nobody know which side is it's regular positioned one.
So the short answer is - make the registration point properly, and use rotation in order to display it like in the first image. Then add negative rotation to the parent, and its all good :)
Edit:
I'm uploading an image so I can explain my idea better:
As you can see, I've created a green object inside the grey one, and the graphics INSIDE are rotated. The green object itself, has rotation of 0, and origin point - top left.
#Vesper - I don't think that the matrix will fix anything in this situation (remember that the green object has rotation of 0).
Otherwise I agree, that the matrix will do a pretty job, but there are many ways to do it :)
I have a bit problem with rotationX and rotationY.
It's cool if i just do a roationX and rotaionY below
_eventParent.rotationY =_differentX;
_eventParent.rotationX =_differentY;
However once i have assign a mouse move to the _eventParent. The roationX and roationY change perspectively while the mouse is moving. so instead the item remain the same size. it increase and decrease size prospectively. any idea why is it doing this? is there a possibility to stop this behavior?
Thanks
Please find the image below.
Perspective allows part of your shape to look closer to you than other parts. The problem is that perspective has a center, or "vanishing point" and by default, it is fixed. As you move your shape farther away from the vanishing point, the perspective changes, causing your shape to widen or narrow.
You can fix this by updating the vanishing point so that it is always at the same coordinates as your shape. Since the shape will always be at the vanishing point, the perspective shouldn't change.
To do this, create a perspectiveProjection for your shape:
_eventParent.transform.perspectiveProjection = new PerspectiveProjection();
PerspectiveProjection is located in the flash.geom package, so don't forget to import it.
Then whenever you update your shape's position, update it's vanishing point:
_eventParent.transform.perspectiveProjection.projectionCenter =
new Point(_eventParent.x, _eventParent.y);
You might need to offset the vanishing point by a set number of pixels to get the perspective looking the way you want it to.
Correct me if I misunderstood your question. Your question is that if you apply rotation to the movieClip object, then why does the size appear to be changing?
For simplification, Let's not apply rotation on both X and Y axis. Let's take a rectangular movie clip and onMouseMove we do ++myMovieClip.rotationX;
Now, this statement is going to apply rotation on the object about the X-axis and one would get a perspective of the movie clip flipping across X -axis and this flipping will show as change in size of the object.
The same applies to rotating across y-axis.
This should be fairly simple I'd think, I'm just not that familiar with actionscript haha.
I have a game where I have the background moving behind a character that stays in one position on screen. I'm relatively new to actionscript 3 but I'm wanting to have text boxes pop up whenever the player presses a key over certain objects passing in the background.
So, basically the background itself is a movie clip, and I have other graphics and movie clips within the background mc.
I was thinking of getting the player.x and y position and then "comparing" that position (>= and <=, etc.) with the graphic/movie clip in the background. But I just don't know how to obtain the x and y coordinate of the graphics/movie clips in the background mc.
You could try to target your movie clips in the background by getting their coordinates, then removing their parent's position (the background container).
Something like :
var finalXPosition:int = targetMovieClip.x - backgroundContainer.x;
var finalYPosition:int = targetMovieClip.y - backgroundContainer.y;
By substracting the target movieclip parent's position to its position, you gain the final position in the parent's scope coordinates.
It should work for you as soon as your character and your background container are situated at the same level of the display list.
Here is a quick diagram of what I try to explain (please forgive my inaptitude to draw nice and explicit drawings ^^)
Usually, when I stumble upon such a case, I try to make a quick and even dirty drawing, starting with what I want, then breaking down every useful data I have to achieve that result, you should keep that method in mind and try it the next time ! :-)
I have 2 DisplayObject, one containing the other like the code below:
var sprite1:Sprite = new Sprite();
sprite1.addChild(loader1); // assume that I have load picture on to loader1
loader1.rotationZ = 30;
sprite1.rotationZ = -30;
If I run the code above, the image on loader1 will look just like it hasn't been rotate at all because its container rotate in opposite direction. Which is correct, as what I expected.
But, if I had multiple axis rotation to the code:
loader1.rotationZ = 30;
loader1.rotationY = 50;
sprite1.rotationZ = -30;
sprite1.rotationY = -50;
Now, loader1 will rotate in different angle. My question is, why it doesn't offset each other?
Note that, both loader1 and sprite1's x,y,z position are all at 0,0,0. And this problem occurs regardless of rotationX,Y or Z. If you have 1 axis, it works fine. 2 axis, it won't.
I post this sample code because I'm trying to understand how Flash rotate in 3D. In AS3 document, it claims that it rotate around its "3D parent container" What is that?
Rotation is relative to the parent, and when you rotate the parent object it will change the frame of reference for the child. This doesn't matter when you are only rotating around one axis, but makes a difference when you rotate around two. To undo the rotations, you have to undo all of them, in the reverse order that they were applied.
Try it with a book, or your phone, rotating by 90 degrees on one axis, then a second. You can't get back to where you started and you will always have involved the 3rd axis.