# phaser matrix rotation

## Recommended Posts

How do you find an image center without arcade physics ?

As an example I am using a matrix as exported by inkscape , but elements order looks different.

-45 degrees rotation about (0,0) of a

10 by 10 px image square

es ( can't figure out if correct) :

``````            var tank = this.add.image(-5, 5, 'testImg');

var ar = [0.70710678,0.70710678,0,-0.70710678,0.70710678,0];//svg inkscape matrix
var mat = new Phaser.Matrix();
console.log(tank.getBounds(mat.fromArray(ar)));``````

##### Share on other sites

I'm not sure what you are trying to achieve here. You wouldn't need anything to do with physics for finding an image center.

Display objects (sprites, images, buttons, etc.) have an 'anchor' property which is the reference point around which transformations are done for that object.

You can change this with 'tank.anchor.setTo(x, y);'.

What are you using a matrix for exactly?

##### Share on other sites

I was setting up a sort of path for player to follow based on a set of images exported from inkscape and parsed with python as a .svg .

So I need to find the center of image , not set the anchor .

I have sort of solved it , by exporting a path from inkscape and converting it to an array for phaser to parse and feed to a tween (points and angles) .

Also I found an old post where it is outlined how to find the center of an image :

Quote

# How to get the center of a rotated rectangle regardless of point of rotation

Get the angle between the point of the rotation and the center of the rectangle (i.e. the value of the width and height / 2):

```
`var originAngle = Math.atan2(centerY - originY, centerX - originX);````

Then add this as a constant to the rotation of the sprite (where sprite.rotation is in radians):

```
```var px = sprite.x + distance * Math.cos(sprite.rotation + originAngle);
var py = sprite.y + distance * Math.sin(sprite.rotation + originAngle);``````

The `distance` value is the distance from the point of rotation to the center (as used to draw the circle in the demo in my original post).

##### Share on other sites

The middle point of an object is the object's dimensions halved.

Assuming the anchor point is at 0, 0, you can find the world coords of the mid-point of an object:

'tankMidY = tank.y + tank.height / 2;'

'tankMidX = tank.x + tank.width / 2;'