Pixi.js: Once again: Pivot is counter-intuitive

[uahic]

Expected Behavior

Pivot should be a virtual translation point and not affect the permanent translation of the object outside of rotation/scaling computations

Current Behavior

Display objects are still being moved, in fact within the code base its clearly visible that this is intended but I dont get the advantage, its rather making things unnecessarily complicated

Possible Solution

I would expect that you first set a pivot which itself does not trigger any computation. Then if you want to rotate, internally the transform being updated first applies a translation(-pivot), applies rotation to the local transform and applies translation(pivot) again. Done :) Except if I did there is anything I have overlooked

[ivanpopelyshev]

Currently its possible to swap default pixi Transform class to something else, here's how I do it: https://github.com/pixijs/pixi-projection/tree/master/src/base

Here's example of super-complicated but awesome transform update, so its not inside pixi element: https://github.com/pixijs/pixi-spine/blob/master/src/core/Bone.ts#L89

I think that nothing has to be done about pivot issue unless there will be more people in community who understand how to hack transform and make plugins that other people use. We cant just break compatibility when older versions. If something good will be used by many people then it'll be easy to PR it to PixiJS vanilla.

Its a community problem.

[ivanpopelyshev]

Also current pivot is actually good idea if you think like "local pivot point is pinned to global position". That's how camera works in many pixijs apps:

camera.position.set(screen.width/2, screen.height/2);
camera.pivot.copyFrom(whereToLook);

[farsiavosh321]

gooood

[uahic]

Thanks for the quit reply again.

Okay I see.. basically I am trying to do something very similar to the pixi-transform-tool (https://github.com/mrgoonie/pixi-transform-tool/blob/master/js/plugins/pixi-transform-tool.js) whereas i have one pivot point that can be changed via dragging just like in this tool but the handles have to work and look a bit different. Since I have potentially chained transforms (did not thought about this when writing this issue) I need to solve it more low-level with transform matrices anyways

[uahic]

Okay this code does the job

// Some class variable
childTransformMatrix = new PIXI.Matrix();
// Somefunction
this.childTransformMatrix.translate(-pivotPos.x, -pivotPos.y);
this.childTransformMatrix.rotate(angle)
this.childTransformMatrix.translate(pivotPos.x, pivotPos.y);
this.childContainer.transform.setFromMatrix(this.childTransformMatrix)

[ivanpopelyshev]

yeah, but once you have a position or scale you'll have a problem here. Right now your code is the same as position.copyFrom(pivotPos); pivot.copyFrom(pivotPos); rotation = angle