Pixi.js: pivot affects object position

I managed to do this by setting the pivot and position of the graphics to its center, and then I drew the graphics around this point.

I answered your question on stackoverflow with a code example here: http://stackoverflow.com/questions/17505169/pixi-js-pivot-affects-object-position/18007977#18007977

@GoodBoyDigital Is pivot effecting position, and if so is that a quick fix?

I've actually been confused about pivot and anchor, can these be merged?

Well, pivot and anchor are different (conceptually). Pivot affects the point of rotation, while anchor is the origin (point of the position). I'm not sure if pivot is being used properly though.

It sounds like this can be used as the same point. I've actually never seen these separated before in rendering (css transform-origin, flash's registration) was there a use case this accounted for? If so, can everything default to one thing, and then use another if set?

Maybe default to anchor everywhere including rotation, unless pivot is a point, use that for rotation?

UPDATE: Or vice versa of the above, though I'm leaning toward _anchor = default_, and _pivot = rotation_, better naming IMO.

anchor and pivot are pretty common in rendering engines. There are many use cases where you want to rotate about the center but have the position determined by the top-left. It is something we not only should support, but will.

Howdy, looking into this issue one now. For a little clarification the anchor is a sprite specific thing. Its used to align the texture. I found the feature incredibly useful when I was making stuff with cocos2d back in the day so really wanted to add it to pixi. The pivot belongs to all display objects and essentially is the point of rotation.

Closing this as solved, pivot/anchor are working as intended.

Sorry for bringing this up but I've been searching/reading through this repo and I'm still not clear on how to rotate a DisplayObjectContainer from the center. Using pivot is not allowing my container to flip from the center without moving elsewhere. Any ideas? I saw #93 and thought that was the answer, but maybe I'm not understanding it correctly. Any help would be appreciated. Thanks!

Edit: I thought it would be helpful to mention that my object is moving across the screen and will be flipping while moving. I'm also using scale to do the "flipping".

@mparker11 Rotating around a point and flipping (via scale) is different. pivot will affect the value in rotation, I'm not sure if you can properly affect how a container flips with scale...

Thoughts @GoodBoyDigital?

@englercj Thanks for the response. I read an article about using matrix multiplication to achieve it, which I see that @GoodBoyDigital used in his PIXI.DisplayObject.prototype.updateTransform function, but for the life of me I can't really understand how to change it to make it scale from the center, if I even need to change it.

Hmmm... Definitely don't understand how to use the pivot.

I set the position of a sprite at a given position. Then I'd like to make it rotate at its center, so I set the pivot at the center of my sprite (sprite.width/2, sprite.height/2). This result in moving my sprite and having the rotation at 0,0.

Uh? Did I miss something?

@tleunen I believe you need to use anchor since you are using Sprites.

Will this behavior be fixed in v4?

I decided to try Pixi out and immediately hit this "bug".
After a few hours googling I still don't understand how this is supposed to work.
Most people on forums just say "pivot behavior is broken". Not very helpful.

Neither is your comment I'm afraid. This is the way pixi deals with pivot.
If this 'bug' is too much to bare please provide a pr or jog on..

On Thursday, 10 March 2016, Ivan Kleshnin [email protected] wrote:

_Will this behavior be fixed in v4?_

I decided to try Pixi out and immediately hit this "bug".
After a few hours googling I still don't understand how this supposed to
work.
Most people on forums just say "pivot behavior is broken". Not very
helpful.

—
Reply to this email directly or view it on GitHub
https://github.com/pixijs/pixi.js/issues/190#issuecomment-194833811.

Mat Groves

_Technical Partner_

Telephone: 07708 114496 :: www.goodboydigital.com
First Floor, Unit 9B, Queens Yard, White Post Lane, London, E9 5EN
goodboy©. All Rights Reserved.

Neither is your comment I'm afraid

Please do not take "Not very helpful" personally.
It was meant to describe my emotional state, not to offend.

If this 'bug' is too much to bare please provide a pr or jog on..

I don't know whether it's a bug or not because I'm a noob in this industry.
That's why I put a "bug" word above in quotes. Some people consider it is. Some – its is not.
I just shared my experience and asked about change in v4. I really wanted to learn Pixi but this one took me down.

The main problem: after reading >10 related issues (here and on the internet) I still don't get how to workaround this behavior and force a container to rotate around it's center in defined point of space.
And I'm not that especially stupid.

Hi there!

No worries man, sorry if I was a bit short, you caught me at the end of a long day!

Pivot is meant to behave as a non normalised anchor point.

The easiest way to fix it is to add the object into a container and rotate the container, whilst moving the object around internally.

Hope that helps!

No problem. Thanx. I'll try to use your advice.

In my opinion, the easiest way to rotate a graphic (or a container) around its center point is to save the center point coordinates, where a graphic was drawn. Then, set the position and the pivot of the graphic to the center point.
Here is an example:

If you for example create a graphic object, you can start to draw primitives on it.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
The primitive is always drawn relative to the position of the Graphics object (which is 0 as default).
Therefore, we need to set the new position of the graphic object to 200, because it's the current center point of our primitive.
test.position.x = 200; test.position.y = 200;
Now we can see, that the primitive just has been shifted, therefore we need to set the pivot to the same coordinate and it will stay at the same position, where we had drawn it.
test.pivot.x = 200; test.pivot.y = 200;

The pivot property isn't buggy, it's just a little bit confusing to understand how it works and why it "affects object position". The object is always rotating around the own position and the pivot helps us to set a new point from where it rotates.

Hello guys! Can I use the pivot with angles? I'm trying to modify the angle of one sprite (using the pivot to modify the rotation position) to follow the mouse, but I can't, can you help me, please?

Check my codepen example => http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010
And the error => http://screencast.com/t/hSSaaTO4j0

Thanks in advance, Nicholls

Done! Only using pivot.y or pivot.x hahaha! Thanks for all Pixi team! :+1:

In my opinion, the easiest way to rotate a graphic (or a container) around its center point is to save the center point coordinates, where a graphic was drawn. Then, set the position and the pivot of the graphic to the center point.
Here is an example:

If you for example create a graphic object, you can start to draw primitives on it.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
The primitive is always drawn relative to the position of the Graphics object (which is 0 as default).
Therefore, we need to set the new position of the graphic object to 200, because it's the current center point of our primitive.
test.position.x = 200; test.position.y = 200;
Now we can see, that the primitive just has been shifted, therefore we need to set the pivot to the same coordinate and it will stay at the same position, where we had drawn it.
test.pivot.x = 200; test.pivot.y = 200;

The pivot property isn't buggy, it's just a little bit confusing to understand how it works and why it "affects object position". The object is always rotating around the own position and the pivot helps us to set a new point from where it rotates.

Hey dude,I think that was a hack,cause it has a side effect: the position has been changed.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.