haolly

how to handle windowResize correctly?

Recommended Posts

 

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.