Jump to content

phaser matrix rotation


gabdab
 Share

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)));

 

Link to comment
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?

Link to comment
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 :

http://gamedev.stackexchange.com/questions/57211/how-to-get-the-center-of-a-rotated-rectangle-regardless-of-point-of-rotation

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).

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...