I have the following code to create a Sprite with a rectangle in it:
container = new Sprite();
container.graphics.beginFill(0x00CCFF, .5);
container.graphics.lineStyle(1, 0x00CCFF);
container.graphics.drawRect(rect.x, rect.y, rect.width, rect.height);
container.graphics.endFill()
addChild(container);
The only thing is, I'd like the registration point to be in the middle (not the top left corner). Is there a way to set up the registration point in the middle of the rectangle, but still have the position of the rectangle be correct?
i.e. not moved over so that the top left corner of the rectangle is in the "middle" of where I want the rectangle to be...
The closest you can do is:
container.graphics.drawRect(rect.x-rect.width/2, rect.y-rect.height/2, rect.width, rect.height);
But I think that is what you are saying you don't want to do. Although, there might be a way it can be done with a Matrix.
Edit:
It looks like this other StackOverflow post might have some more answers for you regarding using a transform matrix, and a few other possibilities.
Related
newPlacement = new Block();
newPlacement.graphics.beginFill(0xFFFFFF);
newPlacement.graphics.drawRoundRect(0, 0, 25, 25, 9);
newPlacement.graphics.endFill();
newPlacement.graphics.beginFill(0xFFFFFF);
newPlacement.graphics.drawRect(0,0,10,25);
newPlacement.graphics.endFill();
blockHolder.addChild(newPlacement);
Here is code I am using in Flash to draw a square object on the stage that is jagged on the left and rounded on the right. Can anyone help me figure out how to code the flipped image of this (a square object that is rounded on the left and jagged on the right). Thanks!
Your code is basically adding a rounded rectangle and then placing a regular rectangle on top of that. The regular rectangle is not as wide, so the rounded rectangle doesn't get covered up on the right side.
Option 1: change relative x position of regular rectangle
All you need to do is place the regular rectangle 15 units to the right. So instead of this:
newPlacement.graphics.drawRect(0,0,10,25);
do this:
newPlacement.graphics.drawRect(15,0,10,25);
Option 2: flip the object
But I still like this best:
newPlacement.scaleX = -1;
Personal preference, though.
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'm trying to make something for a game i'm making. When someone clicks on the movieclip i want it to draw an inner circle and an outer circle. I'd like to fill between the circles with a opaque colour (purple in the image) so people can see basically a large thick circle around the movieclip but not touching the movieclip. I then need to check if the mouseclick happens between the two circles only.
The image below shows what i mean. The thing is the thickness of the purple bit has to be adjustable (not in game as such), if you click on 1 movieclip the thickness of the purple bit may be 10pixels, a different clip may be 50. Obviously checking for a click greater than inner circle x and less than outer circle only works on a straight line across from the clip, once you move up or down this doesn't work so well. Any help is much appreciated as i can't seem to work this out. I've tried drawing 2 circles and also tried using 2 movieclip circles but can't get it to work.
Seems i cant upload pictures on here. Easiest way is to think of a no entry sign without the / line going through the middle. The centre is the movieclip, the inside part of the red circle the inner circle and the outer is the outer circle but at no point does the red touch the movieclip
I would measure the distance from the center of the circles to the mouse click point. Then you just need to check is that distance greater than the inner circle radius and less than the outer circle radius.
Something along these lines:
var clickPoint:Point = new Point(mouseX, mouseY);
var centerPoint:Point = new Point(circleMC.x circleMC.y);
var dist:Number = Point.distance(clickPoint, centerPoint);
if(dist > innerRadius && dist < outerRadius){
trace("the click happened between circles
}
Okay so basically I want to draw a circle in as3 that has a 'hole' in it (like a donut). Something like this, but without the outlines:
http://www.steel.ie/DugganSteel/Pictures/Hollow-circle.gif
This doesn't work:
SPRITE.graphics.beginFill(0xFFFFFF);
SPRITE.graphics.drawCircle(0,0,10);
SPRITE.graphics.endFill();
SPRITE.graphics.drawCircle(0,0,5);
I mean this seems like it'd be simple but I can't find any information on it. I should also mention that I'm trying to only draw 3/4 of the circle, like 3/4 of donut. So I was planning on drawing a transparent circle and square over the original circle, I know this seems kinda of weird since you'd expect something transparent to show whats underneath it.
Its actually really simple. See the following code:
var p:Point = new Point(100, 100);
graphics.beginFill(0xFF0000);
graphics.drawCircle(p.x, p.y, 100);
graphics.drawCircle(p.x, p.y, 50);
Intersections cancel each other out until you call endFill
Goodluck!
You can just make the line thickness the desired donut width and avoid using beginFill
set graphics.lineStyle
To make it only go 3/4 of the way around you could use curveTo to draw the 3 quarters.
The above method by Tyler works, however if an easier way to do it is to simply begin drawing the inner circle first. Basically Flash doesn't actually fill in the color until you call endFill() (again as mentioned by Tyler), so you start drawing on the inner circle, then the outer circle then on endFill() Flash fills in the gap.
SPRITE.graphics.beginFill(0xFFFFFF);
SPRITE.graphics.drawCircle(0,0,5);
SPRITE.graphics.drawCircle(0,0,10);
SPRITE.graphics.endFill();
Hope this clears things up for you.
Introduction to Flash drawing API, will help you understand a bit more :
http://www.senocular.com/flash/tutorials/flash10drawingapi/