CODEWITHSUNDEEP
htmlphaser-framework
iWizard
iWizard

Reputation: 7114

How create fully responsive html5 game using Phaser library?

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: enter image description here

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

When I refresh page using portrait mode I get ok dialog: enter image description here

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

Upvotes: 3

Views: 1615

Answers (1)

Johannes
Johannes

Reputation: 67778

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....

Upvotes: 1

Related Questions