Image display origin point

Subscribe to Image display origin point 10 posts

avatar for Arloistale Arloistale 65 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?

 
avatar for BobTheCoolGuy BobTheCoolGuy 3752 posts
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.

 
avatar for Arloistale Arloistale 65 posts
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.

 
avatar for Shake_N_Baker Shake_N_Baker 53 posts
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.

 
avatar for Arloistale Arloistale 65 posts
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?

 
avatar for NineFiveThree NineFiveThree 1370 posts
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.

 
avatar for Arloistale Arloistale 65 posts
Flag Post

I did that, look:


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

 
avatar for Senekis93 Senekis93 4090 posts
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;
		}
 
avatar for Arloistale Arloistale 65 posts
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?

 
avatar for Arloistale Arloistale 65 posts
Flag Post

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