Image display origin point

10 posts

Flag Post

In XNA you can use the SpriteBatch to set properties of how an object will be drawn like the rotation, origin point, source rect, etc. Is there a way I can set the origin point in as3?

 
Flag Post

You can add the Bitmap to a parent Sprite and center it on the parent. Then you can rotate the parent and it will look like you are rotating the image around the center. Or you can use the Transform class.

 
Flag Post

I tried to use the Transform class,

texture.transform.matrix.translate(100,100);

No matter what I set the translation to, nothing happens.

 
Flag Post

From the docs which bob linked

var skewMatrix:Matrix = new Matrix();
skewMatrix.c = 0.25;
var tempMatrix:Matrix = this.transform.matrix;
tempMatrix.concat(skewMatrix);
this.transform.matrix = tempMatrix;

You have to set texture.transform.matrix to a matrix that has been translated (100, 100), you can’t modify it directly.

 
Flag Post

I did this, and not only did it not work, but it created two of the same image somehow :\. Exactly what kind of matrix transformations do I have to do to set the origin point to the center of the image?

 
Flag Post
rtfm of Transform:

To apply two-dimensional transformations: create a Matrix object, set the matrix’s two-dimensional transformation, and then assign the transform.matrix property of the display object to the new Matrix object.

 
Flag Post

I did that, look:


var centerMatrix:Matrix = new Matrix();
centerMatrix.translate(texture.width / 2, texture.height / 2);
texture.transform.matrix = centerMatrix;

 
Flag Post

Do object.transform.matrix=new Matrix(1,0,0,1,object.width*.5,object.height*.5);
Although that won’t center the object.
You’ll have to do
object.transform.matrix=new Matrix(1,0,0,1,(stage.stageWidth-t.width)*.5,(stage.stageHeight-t.height)*.5); replacing stage by the container or the simpler way
object.x=(stage.stageWidth-t.width)*.5, object.y=(stage.stageHeight-t.height)*.5;

http://www.fastswf.com/2DpTQ-M

Green is the original.
Red is your code.
Blue is the transform where I used the stage.

		private function transformTest():void{
			var t:Shape=new Shape;			
			t.graphics.beginFill(0xFF00FF00),
			t.graphics.drawRect(0,0,100,100),
			t.graphics.endFill(),
			addChild(t);	
			t=new Shape;
			t.graphics.beginFill(0xFFFF0000),
			t.graphics.drawRect(0,0,100,100),
			t.graphics.endFill(),
			addChild(t);
			t.transform.matrix=new Matrix(1,0,0,1,t.width*.5,t.height*.5);
			t=new Shape;
			t.graphics.beginFill(0xFF0000FF),
			t.graphics.drawRect(0,0,100,100),
			t.graphics.endFill(),
			addChild(t);
			t.transform.matrix=new Matrix(1,0,0,1,(stage.stageWidth-t.width)*.5,(stage.stageHeight-t.height)*.5);
			//t.x=(stage.stageWidth-t.width)*.5,
			//t.y=(stage.stageHeight-t.height)*.5;
		}
 
Flag Post

Ok, using


texture.transform.matrix = new Matrix(1, 0, 0, 1, -texture.width * .5,
-texture.height * .5);

seems to have worked. For some reason, there is still a second image that seems to be the original transformation. How do I get rid of this ghost image?

 
Flag Post

Sorry guys, it was my own fault. I used addChild twice :P