Rotate a Sprite without Craziness

[JackParke]

Sorry for the "craziness" but rotation of a sprite is getting me down. When I rotate my sprite it's changing it's position.

I've tried with and without a pivot and there seems to be no logic.

Is there any way to just change a sprite which looks like this:

|

into:

/

without getting

                     /

As you can see below: with no pivot and a varying rotation I get a different position of the bullet even though the laser is always created at the center of the player (pos).

The bullet's rotation is calculated to always make it face the bullet's destination which is the center of the screen.

[JackParke]

OK, it seems that the pivot applies to the position of the object as well as it's rotation. So by default it's 0,0 the top left corner of the sprite.

Whenever I set the pivot to the center of the object:

this.pivot.set(this.width/2, this.height/2);

I was working against my own positioning:

this.x = pos.x + this.width/2;
this.y = pos.y + this.height/2;

By realizing the position applies to the pivot (this is not obvious from the name "pivot" ) I could correct my code:

PIXI.Sprite.call(this, g.ui.sprites.bullet);
this.size = new Vector(this.width, this.height);
this.tag = "bullet";
this.pivot.set(this.width/2, this.height/2);
this.x = pos.x;
this.y = pos.y;
this.dx = g.ui.width/2 - pos.x;
this.dy = g.ui.height/2 - pos.y;
this.speed = new Vector(this.dx/10, this.dy/10);
this.rotation = Math.PI/2+Math.atan2(this.dy,this.dx);

[JackParke]

Still confused. This time about positioning and pivot.

If I use this.anchor = {x:0.5, y:0.5} then my player object positions according to it's center:

 However, as soon as I set the pivot:

this.anchor = {x:0.5, y:0.5}
this.pivot.set(this.width/2, this.height/2);

Then everything is weird again and the player is offset from where I position it.

Please help understand how to "center" an object for all movement, positioning and rotation.

 

Edited September 24, 2017 by JackParke

[ivan.popelyshev]

> Please help understand how to "center" an object for all movement, positioning and rotation.

obj.anchor.set(0.5, 0.5);

If it doesnt work, investigate whats wrong: for example, if you used texture packer and it did trim a texture, there can be a bug that can be fixed, depends on the program you used. I remember that pixi doesnt understand trimming made by Shoebox, but I have workaround for that.

Please describe your case and provide fiddle.

[JackParke]

I somehow can't reproduce the issues in a fiddle.

http://cawoodm.github.io/tie-flighter/

If you look there on line 40647 I have the following line commented out:

//this.pivot.set(this.width/2, this.height/2);

If I uncomment it my positioning is screwed.

It would seem anchor and pivot are interrelated:

 

[ivan.popelyshev]

If you know the math, you can do anything with parameters, and you can also make your own Transform and your own Sprite, if that's the problem.

I can't explain the meaning of those things without linear algebra

https://github.com/pixijs/pixi.js/blob/dev/src/core/display/TransformStatic.js

anchor is position of the image inside that local coordinate system. Position/scale/rotation/pivot are transforms that are applied in that exact order. Those things can be implemented 100 different ways, you have to either use pixi canonical, either invent your own, just assign your own transform class to display objects.

 

Theoretically, anchor should be enough. But sometime people want to define rotation point that is not (0,0) : anchor=0, position = x + width/2, y+height/2, pivot = width/2, height/2. The idea is that you map "position" on global coords to "pivot" on local.

[JackParke]

I did 3 years of Math at Uni incl. linear algebra so I understand that the order of transformations is important.

...but sometimes you just want a sprite to be positioned and rotate on it's center. To me that makes the order irrelevant. Sounds like it should be the default. Don't know why it works in a fiddle but not in my game. If I could just understand what I am seeing.

Is there no diagram explaining how position, rotation, scale work together with anchor and pivot?

[ivan.popelyshev]

You describe behaviour of anchor=0.5. It should work for you. Its how anchor supposed to work in pixi.  IF it doesnt work for your case -> its a bug related to textures that you use, and I cant find the texture of tie fighter in your code, so I really dont know whats going on with it. You dont have to fiddle with pivot and position, just set anchor and find why the texture is wrong.

Sorry, I cant draw, I can only describe it: position moves elemtn, then rotation is applied, then scale, then it "moves back" through pivot. Anchor is positioning the sprite inside local coords. IF you want picture, ask @themoonrat or someone else

P.S. Sprites in pixi are positioned at the same point as they are rotated around. It is always the same, pivot cant change it.

[ivan.popelyshev]

One more explanation of anchor for you - please see