Stage vs renderer size

[Wasted potential]

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

thanks!

[ivan.popelyshev]

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 May 27, 2022 by ivan.popelyshev

[Wasted potential]

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

or:

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.

Thanks!

[Wasted potential]

Ugh...

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.

Thanks