Cordova Phaser app game not utilizing full screen after resume

1
votes

I'm working on a game using Cordova and Phaser. I'm stuck on a layout issue that happens when the app/game resumes. I've started off with the Yeoman template and glued it into the auto-generated Cordova project.

My ViewPort is defined as such:

<meta name="viewport" content="user-scalable=no, maximum-scale=1, initial-scale=1, minimum-scale=1
,width=device-width">

In the OnDeviceReady event, I do this:

height = window.screen.height;
width = window.screen.width;
game = new Phaser.Game(width, height, Phaser.AUTO, 'artillery');

I've also linked some screenshots off my Nexus4. Here's what gets displayed when starting the app the first time. All game states exhibit this but the 'play' state is a striking demonstration of the issue: http://imgur.com/J5efVHW

And again, after resume: http://imgur.com/fEAPLUa

I'd like to kill the game on pause or resume and have the whole thing start over. But as I'm reading the documents and different forums it seems like that's either not allowed or extremely frowned upon.

1
androidcordovaphaser-framework

1 Answers

0
votes

You should use Phaser ScaleManager.

For example you can use EXACT_FIT or SHOW_ALL like this in your boot state's create function;

create: function(){
    game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
  }