Jump to content

pixi.js v4 - translate canvas [SOLVED]


Recommended Posts


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?

Link to comment
Share on other sites

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"
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...