Jump to content

Stage vs renderer size

Wasted potential

Recommended Posts

I have a silly question and I haven’t found any explanation online, so if this has already been covered, please respond with a link…

I’ve been playing around with Pixi and I’m having trouble with all of my display objects being scaled about 2x. While investigating, I noticed that the renderer dimensions are approximately twice the size of the stage dimensions. This seems to be the cause of the scaling. Can anyone explain how the stage and renderer dimensions are related? And how to fix my scaling problem? All of my assets look fuzzy and/or pixelated because they are being scaled up to double size


Link to comment
Share on other sites

they are not related. Just dont use "stage.width" and "stage.height" , its really size of bounding box of all children, and when you set it , you actually change scale.

There's no smart resize for stage in pixi, sorry.

If you understand how transforms work, you can make your own ScaleManager. Usually that's where people who code on pixi learn stuff, if you dont understand how to make it - you'll have problems later somewhere else )

Edited by ivan.popelyshev
Link to comment
Share on other sites

Thanks Ivan,

Got it! So, the stage is just basically a Container and the container size = the collective size of it's children.

So, what controls the scale of everything in the Application? I can certainly create a ScaleManager class, but I would like to know what determines the scale of sprites, etc. In my application, I simply create objects with:

new Sprite(someTexture);


const sprite = new AnimatedSprite(someOtherTexture);

So, I would expect the sprite to be the same size as the texture. If I console.log the width and height, they ARE the same size as the texture, but they are scaled to about 2x on screen. Again, If there is some documentation that explains all of this, I'm happy to go read it.


Link to comment
Share on other sites


So, I'm an idiot. The problem was that I was using

{resolution: devicePixelRatio}

instead of

{resolution: 1}

Which had the ultimate effect of scaling all of my assets and making them look fuzzy. Things are still a little less crisp than I would like, but at least everything is the expected size. That's what I get for following examples without paying close attention to what I was doing.


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...