pixi.js v4 - translate canvas [SOLVED]

[waechtertroll]

Hello,

I'm trying to get a coordinate system with (0,0) at the center of the screen. If I understood the API documentation correctly, adding a Container, applying

PIXI.Container.setTransform(x, y, scaleX, scaleY, rotation, skewX, skeyY, pivotX, pivotY)

and then adding Sprites as children to that Container should apply the transformation to all of them, right?

So I created a Container, set x to width/2 and y to height/2, and added Sprites. Problem is, they still appear with (0,0) at top-left corner. Also modifying Container.x/y or Container.position.x/y would not add translations to children Sprites.

Of course I could solve the problem by adding the width/2 and height/2 offsets to every sprite I create, but I really think display parameters should be seperated from the model data. What am I doing wrong? Is there a better solution?

[waechtertroll]

Ah, I SOLVED it. I didn't mention that, but it appeared as root of the problem: I applied scaling and translation to the same Container, so both transforms would influence each other. To achieve my goal, I had to do the following

1. Create a Renderer
2. Create a "root" Container, add it to the Renderer, apply scaling
3. Create a "stage" Container, add it to the "root", apply (now auto-scaled) translation
4. Add graphics into the "stage"

[ivan.popelyshev]

V4 updates transforms lazily. You have to call updateTransform() on it. All methods like getBounds(), toLocal(), toGlobal() also are calling it to ensure that transform is updated.