Updating phaser game bounds on resize

[A.Kman]

Hey all!

 

I'm trying to update my game every time the screen is resized or turned from portrait to landscape and visa versa.

What I'm doing right now is using window.onresize = this.resize(); but resize() is being called every frame.

 

Does anyone either know why this isn't working or how to do this better?

 

Thank you!!!

[samme]

See https://photonstorm.github.io/phaser-ce/Phaser.ScaleManager.html. Use scaleMode RESIZE.

[Dylan Cristy]

@samme is right, you have to use scaleMode.RESIZE.  I found that in a web browser, sometimes the resize callback didn't always get fired on the very last bit of resizing/moving, so here is how I implemented resizing/realigning:

In my Boot state, set the scale mode for the game:

this.game.scale.scaleMode = Phaser.ScaleManager.RESIZE;

 

Then, in my other game states (levels), I set flags for whether things need to be realigned (or not), and in the resize callback, only set the flag, and I do all the actual resizing in update(), like this:

create() {
    this.game.scale.setResizeCallback(this.alignLevel, this);
    this.resized = false;
    this.resizedDoubleCheck = false;
}

alignLevel() {
    this.resized = true;
}

update() {
    if (this.resized || this.resizedDoubleCheck) {
        // do all the realigning of things here
    }

    // set the flags to false, but ensure one final
    // realignment even if the setResizeCallback didn't fire
    if (this.resized) {
        this.resized = false;
        this.resizedDoubleCheck = true;
    } else if (this.resizedDoubleCheck) {
        this.resizedDoubleCheck = false;
    }
}