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

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 :)

For your case, its better to set pivot to bunny's center. Make sure to do it by constants, use bunny.texture.width only when its loaded.

@DavidGOrtega closing this as I feel that your question has been answered. Feel free to re-open if you have any further issues!

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bigtimebuddy picture bigtimebuddy  路  24Comments

GoodBoyDigital picture GoodBoyDigital  路  31Comments

mreinstein picture mreinstein  路  39Comments

themoonrat picture themoonrat  路  29Comments

ppoliani picture ppoliani  路  24Comments