Problems when running Phaser on Windows Phone

[r00]

I've been testing Phaser on Windows Phone 7/8, and I've run into couple of problems.

 

 

1) Phaser doesn't recognize Windows Phone as mobile device on game.device

 

Phaser 1.1.5 recognizes Windows Phone as a desktop device at game.device.desktop. I checked the phaser's online docs for game.device, and there doesn't appear to be any user agent checks for windows phone. There is a check for the existence of 'windows' string that subsequently sets the game.device.desktop value true.

 

According to a stack overflow answer, the safest thing would be to check user agent for the 'windows phone' string. In addition to the normal mobile mode, there's also a desktop mode in some windows phone models, that is missing the 'phone' part on user agent. The desktop mode is trying to mask itself as desktop version, it appears to be pretty hard to distinguish it from real windows 8 machine.

 

 

2) Game resizes incorrectly on Windows Phone

 

I'm having problems getting my game to scale properly on windows phone 8, when using 480x320 resolution for the game. I have tried using the full screen mobile template under resources folder, with minor changes, but that doesn't seem to work. I'm testing on Nokia Lumia 920 in mobile mode with screen resolution 1280×768.

 

I thought setting game.stage.scalemode to Phaser.StageScaleMode.SHOW_ALL would have resized the app to fit inside the browser, but as it is, it doesn't do that. SHOW_ALL only sets the width of the app to match the width of the screen when in landscape mode. Due to this the height of the game is almost twice the screen's height. EXACT_FIT and NO_SCALE don't work any better.

 

Is this is the intended functionality, or am I just missing something? I have been testing the game on android tablets as well, but windows phone is the only one where I'm running into this problem.

 

My settings:

var game = new Phaser.Game(480, 320, Phaser.AUTO, 'game');game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;game.stage.scale.minWidth = 320;game.stage.scale.minHeight = 240;game.stage.scale.maxWidth = 960;game.stage.scale.maxHeight = 640;game.stage.scale.pageAlignVertically = true;game.stage.scale.pageAlignHorizontally = true;game.stage.scale.forceOrientation(true, false);game.stage.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this)game.stage.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this)game.stage.scale.setScreenSize(true);

 

 

3) Some Windows Phone models don't trigger game.stage.scale.leaveIncorrectOrientation on orientation switch

 

I'm also having problems with Nokia Lumia 620 (another windows phone) when switching from portrait to landscape.

 

As mentioned above I'm using the full screen mobile template, and i haven't touched the code on this part. The game correctly shows the turn your phone to landscape mode image (from the template) in the portrait mode. When the device is turned to landscape mode, the same image is still visible, only zoomed in to the top left corner of the image.

 

Problem seems to be that game.stage.scale.leaveIncorrectOrientation isn't triggering correctly on the device. The device is able to change from landscape to portrait, so it's no a question of a missing sensor.

 

This problem doesn't appear on Lumia 920, although I've managed to have it happen couple of times with chrome on my laptop when switching browser window size while developer tools are open.

 

Any ideas what could be causing this, or how should I handle this?

 

 

4) Using console.log on Windows Phone is a bad idea

 

This last one isn't related to Phaser, just something I realized after trying to debug my app on windows phone, and thought of sharing. Apparently, from time to time, even though Windows Phone's browser doesn't have visible console available. the console in it can crash/close. When it does, it sets the console global undefined. So, if you are getting mysterious crashes when trying to run development code on windows phone, it might be due to your console.log statements.

 

In order to get rid of the problem, you need to create a new console object somewhere in your code, if one doesn't already exist. The code below is from garry-lachman.com.

if (typeof console == 'undefined')   {    var console = new Object();    console.log = function(){}    console.error = function(){}    console.debug = function(){}    console.warn = function(){}}

 

[r00]

It would appear that both 2) and 3) are happening because windows phone automatically zooms in on page load, as described here. IE mobile has a default viewport width of 1024 from which it zooms in to fill the screen.

 

I got both of the problems fixed when adding the following meta tag:

<meta name="viewport" content="width=device-width">

This sets the device width to match the device's width in current orientation. For landscape mode in windows phone device-width is 480, and for portrait mode it's 320. width=device-width appears to be the only way to get some of the windows phones to change viewport width on orientation change.

 

The only problem is, according to quirksmode, iPad and iPhone don't seem to work properly with width=device-width.

 

Any ideas how to get both Windows Phone and iOS covered on this? I tried changing the meta tag with javascript, but it has no effect on windows phone.

[wombatbuddy]

Hi,

to recognize Windows Phone you can use method proposed by K1kk0z90 in this topic: http://www.html5gamedevs.com/topic/1344-tip-detect-windows-tablet-and-windows-phone/?hl=%2Bwindows+%2Bphone+%2Bagent

 

I hope this solve your problems with iPad.

 

1) use this version of the <meta>:

 

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

 

2) If you want fullscreen then use:

 

game.stage.scale.setMaximum();

 

3) Use 'orientationImage' as third parameter in the method: 

"game.stage.scale.forceOrientation(true, false, 'orientationImage');"

and phaser will take care of removing this picture.

 

4) Do scaling in your "game.stage.scale.enterIncorrectOrientation.add":

 

game.stage.scale.setMaximum();

game.stage.scale.setScreenSize(true);

 

Example of the code:

      

var game = new Phaser.Game(480, 320, Phaser.CANVAS, '', { preload: preload, create: create, update: update } );

 

function preload() {

 

            game.load.image('orientationImage', 'assets/images/orientationImage.png');

 }

 

function create() {

 

game.stage.scale.setMaximum();     // fulscreen scale

 

game.stage.scale.setScreenSize(true);

 

game.stage.scale.leaveIncorrectOrientation.add(leaveIncorrectOrientationHandler, game);

 

game.stage.scale.forceOrientation(true, false, 'orientationImage');

}

 

function leaveIncorrectOrientationHandler() {

 

                game.stage.scale.setMaximum();    // fulscreen scale

                game.stage.scale.setScreenSize(true);

         }

 

If you want to preserve the aspect ratio, then use: 

game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;

instead of the string: game.stage.scale.setMaximum();

 

Please write if this code has problems with Windows phone.