Pixi.js: Setting the anchor should not redraw the displayobject content

Created on 11 Apr 2018 · 4Comments · Source: pixijs/pixi.js

Hi,

despite that pivot and anchor is super confusing, If I imagine the anchor as that round point that I can set in photoshop or old flash editor as the rotation point what happens in pixi is that all the displayobject content is redrawn setting the anchor as the origin point.

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');

var container = new PIXI.Sprite();
container.addChild(bunny);
container.x = 0;
container.y = 0;

app.stage.addChild(container);

bunny.anchor.set(0.5);
//bunny_c.pivot.set(15,5);

With this example I expect the bunny to be with the anchor that affetcs its rotation changed but not the bunny be redrawn!

💾 v4.x (Legacy) 🤔 Question

Source

DavidGOrtega

All 4 comments

Each element has a transform, which is position/rotation/pivot
Sprites have anchor, that means "this point of texture should be in (0,0) of local coordinate system".

Rotation pivot is always (0,0) of local coordinate system.

If you want different behaviour, you can change the Transform class and create instances of your patched Transform for the affected elements.

https://github.com/pixijs/pixi.js/blob/dev/src/core/display/TransformStatic.js
https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js#L174

Also, bunny is redrawn every frame in pixi. The library does not have mechanisms to track all the changes, it just works. Otherwise it could weight 3MB or more :)