Get coords based on rotated sprite

Recommended Posts

How I can get X and Y in the game like on this screen: http://prntscr.com/ay1k10

I will have rotated sprite which can be rotated and move by

and rotated by

this.body.angularVelocity = -300;

How Can I get coords forward this object forwared at axis X + 20 px, depends on rotation ? I try pivot and anchor to 2nd help sprite, but coords of this sprite is on center, not where is realy lays. Like this: http://prntscr.com/ay1jbw

Bump

Share on other sites

Don't really understand your question, but maybe this helps:

The new coordinate (x',y') is a result of the standard rotation formula:

y' = y*cos(a) - x*sin(a)
x' = y*sin(a) + x*cos(a)

where a is the angle of rotation. This assumes the (x,y) is given with respect to the center of rotation. In other words, (0,0) is the center of rotation.

Most sin/cos functions require the angle to be in radians. In that case, use this conversion formula if X is in degrees:

a = X * pi / 180

Share on other sites

Oh boy. I've had a lot of fun trying to solve this one. I was able to solve if there is an X offset but not if there is both an x and y offset.

In the following example, Sprite B and C are children of Sprite A (and therefore, inherit rotation). With the below code applied every time the x property of the child sprite (the x offset) changes, their x/y properties will reflect that change, taking into consideration the rotation of the parent sprite. In this example,
Sprite C is also reflecting the rotation of Sprite B. So imagine Sprite A is a ship which can rotate, sprite B is a gun on the ship which can rotate and sprite C is sprite on top of the gun. Sprite C should remain in place if both Sprite A and B are rotated (with the below code). I don't think this will work if the anchors on all of the sprites are not the same.

var cos = Math.cos(spriteA.rotation);
var sin = Math.sin(spriteA.rotation);

var addCos = spriteB.x * cos;
var addSin = spriteB.x * sin;

spriteC.rotation = spriteB.rotation;

var cos = Math.cos(spriteB.rotation);
var sin = Math.sin(spriteB.rotation);

var addCos = spriteC.x * cos;
var addSin = spriteC.x * sin;

So anyway, I was able to solve the x transform but not the y.

EDIT: going to try the formula Milton found later.

Share on other sites

Yeah I spent all day on this and can't get Milton's formula to work in Phaser.

var offsetXY = [5,20];

sprite.y = ((offsetXY[1]  * Math.cos(parentSpriteRotation)) - (offsetXY[0]  * Math.sin(parentSpriteRotation)));
sprite.x = ((offsetXY[1]  * Math.sin(parentSpriteRotation)) + (offsetXY[0] * Math.cos(parentSpriteRotation)));

I've had varying results with switching the results from the x/y axis, swapping the +/- operators, etc .. but never do I get the sprite in the position I want it to be. Imagine sprite is the location of where the bullet leaves the gun (parentSprite is the gun). When the parent sprite rotates, you want to bullet to leave the gun in the correct position. In other words, the offsets of where the bullet leaves the gun are different when the gun rotates.

Share on other sites

On 4/28/2016 at 4:03 PM, Hadik said:

How I can get X and Y in the game like on this screen: http://prntscr.com/ay1k10

I will have rotated sprite which can be rotated and move by

and rotated by

this.body.angularVelocity = -300;

How Can I get coords forward this object forwared at axis X + 20 px, depends on rotation ? I try pivot and anchor to 2nd help sprite, but coords of this sprite is on center, not where is realy lays. Like this: http://prntscr.com/ay1jbw

Okay, forget these formulas. I've discovered the best way to position stuff on sprites that are rotated is to simply add them as child sprites. The child sprites are positioned relative to their parents (not the game world) and adopt rotation as well (which may not be what you want). But if you simply want to get world coordinates, add a child sprite with no texture and then get its coordinates relative to the game world.

Example:

var worldX= spriteA.x + spriteB.x;

var worldY = spriteA.y + spriteB.y;

spriteB's position will always be the same on spriteA, regardless of SpriteA's rotation.

Share on other sites

feudalwars: Thank you, good solution

It's not fully clear solution, but better than nothink or complex math

Share on other sites

OK I found best solution

``````
var length = 150;
var realAngle = this.angle + 180;

var radians = realAngle * Math.PI / 180;

var x = this.x + Math.cos(radians) * length;
var y = this.y + Math.sin(radians) * length;``````

Works perfectly

Share on other sites

• 3 months later...

Just found this old thread. Fuck. I am still dealing with this shit months later:

Why is getting absolute coordinates relative to the game world such a god damn riddle?