Resolution problem in v4

[mathew11]

Hi,

Since I've updated my pixi.js version from 3.0.10 to 4.0.0 I'm struggling with a resolution problem.

So, for example, if I create a renderer with a resolution of (40,30) and then I'm resizing the renderer, where I'm logging the width/height of the root Container, I get at version 3.0.10 the following output:

/*
v.3.0.10
STAGE1 WIDTH:1200 HEIGHT900 SCALE_X:30 SCALE_Y:30
*/

But when I use v4, I get some suspicious width/height:

/*
v.4.0.0
STAGE1 WIDTH:28083.109130859375 HEIGHT18275.540771484375 SCALE_X:30 SCALE_Y:30
*/

The problem appears at those moments, when I trigger some animations, which are determining their new position based on the position of another Container/Graphic/... so I get the suspicious width/height.

Why does this different output appears with version4? How can I get the same width/height as in version 3.0.10?

I'm grateful for any helpful answers.

Best regards

[ivan.popelyshev]

No snippets of code? Shame!

I think you mistaken "stage.width" and "renderer.width" somehow. Stage width is the size of bounding box of all your components inside stage.

[matt_at11]

Hey,

I'm very sorry. My first account is somehow blocked, anyway. 

I've created two JSFiddles with the same code, but one  fiddle is using pixi v.3.0.10 and the other one 4.0.0:

Fiddle #1: https://jsfiddle.net/mathew11/0p7ny6Lf/

Fiddle #2: https://jsfiddle.net/mathew11/25vzw5Lh/

In this example, I'm using 3 stages:
Stage1 is my root stage, stage2 is my gameStage (which should have always a fixed width/height, so I can use these coords for setting all positions of my sprites/graphics to the right position. And finally, stage3, which is named as "group1" in my fiddle, is just a group of graphics (in my example, there is only one graphic).
The hierarchy is stage1 --> stage2 --> stage3 ...

If the browser window is being resized, I scale the root stage to adapt it to the window resolution. Now, my idea with the stage2 is, that even though the root stage is beeing resized, I have always the same width/height on it, so it won't mess up my positions and animations.

The most important part in the fiddle is the function call:

group1_item1.parent.toGlobal(group1_item1)

I want to get the coordinates of an item relative to my gamestage (stage2). 
I'm using this approach, because I put several items in different container to my gamestage and then I'm using them as a "placeholder" in a card game. So my sprites (cards) are then animated to a placeholder, therefore I need to get the positions relative to my gamestage (stage2).

When you open the fiddle, just look into the console and by resizing the window it will show you the width/height of the root stage and the gamestage and finally, the output of the toGlobal function call.

In version 3.0.10 I get the positions relative to my gamestage, but in v4.0.0 it is always based on the root stage.

This is also the reason, why I got some completely confusing width/height of the stage, which I had posted in my first posting, because the positions were based on the root stage, therefore it got out of bounds of my gamestage.

My question is, how can I get the same output in v4 as in 3.0.10? 

While I was reconstructing the problem, I've noticed that it might not be a good idea to use a gamestage as a container, because if there is one mistake or something is moving out of its width/height, then it will adapt the width/height. Is there an approach to fix the width/height of the container? Furthermore, I've also noticed that you always have to put something inside the container to set its width/height, in my game it's the background image, in the fiddle there's the graphic.

I hope that my description of the problem is not too complicated.
Best regards,