How create fully responsive html5 game using Phaser library?

Question

I'm using Phaser 2.5.0 (tried 2.4.8 also) and I'm trying to create fully responsive game using phaser library.

Everything is ok when I refresh page, here is image:

but when I change rotation to portrait dialog message is not ok, image:

When I refresh page using portrait mode I get ok dialog:

So problem is when I resize browser window.

Here is code for init phaser game:

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO);

Tried also:

var game = new Phaser.Game("100%", "100%", Phaser.AUTO);

Here is create function located in main.js:

    create: function(){
        console.log('create');

        this.game.antialias = true;
        this.game.stage.smoothed = true;
        this.input.maxPointers = 1;
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.scale.minHeight = 0;
        this.game.time.advancedTiming = true;
   },

So to tell again problem is when I resize browser window but when I do refresh then it's not working ok. Game must support resize.

Here is one simple example which is giving almost same result, on refresh is ok but when doing resize is not ok: https://jsfiddle.net/CroDac/tv010u0t/

Thank you

Are you using Interface Builder. If you are make sure your constrains are right. Sometimes they are not and you will get deformities. — MNM
I would be either you have hard coded the size of the inner window and when you rotate it the window get messed up, maybe — MNM
I bet there is an update and redraw issue when you turn the phone. I bet you have to manually call a redraw method to get it to display right each time you turn the phone — MNM

Johannes Johannes · Accepted Answer · 2016-06-22T22:51:31

There was/is an old, but apparently not fixed, bug in iOS that caused (causes?) this. There are several workarounds on the net, on of them is here:

https://github.com/scottjehl/iOS-Orientationchange-Fix

From the description:

This fix works by listening to the device's accelerometer to predict when an orientation change is about to occur. When it deems an orientation change imminent, the script disables user zooming, allowing the orientation change to occur properly, with zooming disabled. The script restores zoom again once the device is either oriented close to upright, or after its orientation has changed. This way, user zooming is never disabled while the page is in use.

Maybe this can help you....

How create fully responsive html5 game using Phaser library?

1 Answers