Pixi.js: Setting Pivot still makes no orderly sense

[tripdragon]

pixi.min.4.5.js

I saw all of the discussion about Pivot Origin Hotpoint Anchor and so on for points to spin an object around.
Those were from V3, v4 is out and v5 on the way like and pivot still moves objects. Like Why!?

First though is the documentation about it. Its tooooooo short and so not helpful.
_"The pivot point of the displayObject that it rotates around Assignment by value since pixi-v4."_

Is this is a normalized unit or pixel at local unit? It should be nice and clear to everyone reading it.

Paper.js you can pass a rotation point to the rotation function. That works a treat!
You can also simply set the pivot pointer and it will use that object as its rotation from there on

Three.js you have a lot of ways to do things. Quaternions take an axis and use its position point. If you need to offset the geometry you just do it once and spin away!

If I could get the geometry vertices of a sprite or rect I could do it the GL or THREE way and just offset stuff via matrixes. I don't see how to do that in the docs either.

Maybe if there was a simple formula on the docs that showed how to set the pivot to the center.

Right now I'm trying a simple obvious reset to 0,0 calculate the center move it to that

a = sprite.getBounds()
sprite.position.set(0,0)
sprite.pivot.set(a.width/2,a.height/2)

that just nudged it a tiny bit, gawH?!
Check position sprite.position x-> 0y ->0
Hrrrmmmm, so its offsetting the geometry a bit like an applyMatrix()
But not the super correct and obvious behavior offset.

if I just put an eyeball value and try to then move it back yet more weirdness

sprite.pivot.set(a.width*2,a.height*2)
sprite.position.set(a.x,a.y)

it uses the pivot as its position point now and moves to it the previous center but thats not its position member thats its pivot no wait its both but that positions values are not. GLLLAG

Im sure this is easy to the devs that know it, the docs need a clean simple example mixed in for this. I don't want to purpose some huge under the hood fix. Just super small example codes that are easy to find for all dev when reading the docs so we don't waste your time with pointless issues

[tripdragon]

additional tests, was trying a move sprite to 0,0 perform position offset, rotate, then move back

a = sprite.getBounds().clone()
sprite.position.set(0,0)
sprite.position.x = -(a.width/2);
sprite.position.y = -(a.height/2);
sprite.rotation = rotation;
sprite.position.x = a.x;
sprite.position.y = a.y;

That makes sprite.position in the thousands and crasy rotation off screen.

so I simplified the test to not move, just rotate and set the position to the same

a = sprite.getBounds().clone()
sprite.rotation = rotation;
sprite.position.x = a.x;
sprite.position.y = a.y;

same deal crazy results. Only if I don't move it will it rotate on the pivot.
So somewhere in the transform system its doing some weird optimizations it was not set up to do typical gl transforms from what I can tell

so I "HAVE" to figured out the pivot system, grrrrrr

[ivanpopelyshev]

It makes sense for me, I use it every day:

stage.position.set(width/2, height/2);
stage.pivot.set(cameraX, cameraY);

The thing is, pivot is on the "other side", in local coordinates. Rotation point works on both sides, it has to be added both to pivot and position.

[tripdragon]

Ah some more testing. Its related to the scale. You have to clear the scale out then put it back in, you also need fiddly order of transforms to get the sprite back into place and rotating as expected
https://jsbin.com/xotajafate/edit?html,output

var s = sprite.scale.x;

sprite.scale.set(1);

var bounds = sprite.getBounds();

sprite.pivot.set(bounds.width/2,bounds.height/2);

sprite.scale.set(s,s);

bounds = sprite.getBounds();

sprite.position.set(bounds.x+(bounds.width),bounds.y+(bounds.height));

The issues still stand though, setting a pivot should not move an object. Afterwards treating the pivot as its position point makes fine sense in graphics programs Photoshop/Illustrator But when we move the origin point it does not move the object, that would be infuriating to work with in a professional program.

And setting the same position with a rotation has very weird results.

Either way I post the code here for others to find later on to save themselves a lot of pointless time

[ItsAllGoneDerp]

After a few hours wondering why my pivot calculations were off, I was surprised to find the pivots movement affected by scaling, seems a little anti-intuitive, wondered if it was intended or not?

[staff0rd]

Not 100% what your expectation is here so I'm guessing that its rotating the scaled sprite around its center. No need to reset scale, just take it into account when setting the pivot;

var bounds = sprite.getBounds();
sprite.pivot.set(bounds.width/2/sprite.scale.x, bounds.height/2/sprite.scale.y);

https://jsbin.com/tegejasema/1/edit?html,output

[lock[bot]]

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.