gabdab Posted April 11, 2016 Share Posted April 11, 2016 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 More sharing options...
Arcanorum Posted April 11, 2016 Share Posted April 11, 2016 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? gabdab 1 Link to comment Share on other sites More sharing options...
gabdab Posted April 12, 2016 Author Share Posted April 12, 2016 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 More sharing options...
Arcanorum Posted April 12, 2016 Share Posted April 12, 2016 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;' Link to comment Share on other sites More sharing options...
Recommended Posts