how to handle windowResize correctly?

[haolly]

 

 

https://github.com/pixijs/pixi.js/wiki/v4-Tips,-Tricks,-and-Pitfalls#resizing-renderer

 

Seems this is a common issue, and it has not properly handled in the engine,

what I want is first  recalculate the position, and when resize the whole UI

my whole UI is in the  rootContainer.

When the window change from a larger size to a small, the UI will be outside of screen.

This is the setUp code for UI

 public setup() {
        this.topbar = new PIXI.Sprite(
            PIXI.utils.TextureCache["topbar.png"]
        );

        // this.topbar.scale.set(0.8, 0.8);

        this.topbar.anchor.set(0.5, 0.5);
        this.topbar.y = -window.innerHeight/2 + 10 + this.topbar.height/2;

        this.container.addChild(this.topbar);

        this.avatarMaskLeft = new PIXI.Sprite(TextureCache["mask.png"]);
        this.avatarMaskRight = new PIXI.Sprite(TextureCache["mask.png"]);
        this.avatarMaskLeft.anchor.set(0, 0.5)
        this.avatarMaskRight.anchor.set(1.0, 0.5)

        this.avatarMaskRight.x += this.topbar.width/2;
        this.avatarMaskLeft.x -= this.topbar.width/2;
        this.topbar.addChild(this.avatarMaskRight);
        this.topbar.addChild(this.avatarMaskLeft);

        this.initCountDownText();
        this.initScoreText();


        Event.instance().fire("UILoadFinish");
    }

the topbar is added to the container, same as avatarMaskRight

But when I scale the topbar, use code: 

this.topbar.scale.set(0.8, 0.8);

the children will not be at the right position, WTF ?   all children is set use the relative position , so if I scale the parent,  I would expect all children at the right position.

update:  I use code this.container.scale.set(0.8, 0.8); after topbar has added to container, it works fine, all children will stay the right position

so, how do I  recalculate the position, and  resize the whole UI ??

update: why do I need resize my UI ? because I developed my game in PC, and in the PC browser , the UI looks fine, but when I open My game on mobile , the UI looks HUGE  relative to others

[ivan.popelyshev]

please dont use "width" and "height" of container unless you understand how it works. For single Sprite its the size of the texture multiplied by scale, but when it has children, things get complicated.

As for general approach, please use "search" or just skim through this pages of this subforum. This question was asked regularly.