Shrink game size without scale

[Meowts]

Hi,

 

I'd like to have my game start at 1136 x 640, and in Boot.js, say:

if (this.game.device.iPhone4){  //Make the game width 960,  //which will cut the remaining 176 pixels off  //but keep the same scale}

I've tried a few things, like:

this.game.stage.scaleMode = Phaser.StageScaleMode.NO_SCALE;this.game.stage.scale.width = 960;// && this.game.stage.scale.maxWidth = 960;this.game.stage.scale.setScreenSize(true);

however it scales the image to fit the new size, which I don't want. Suggestions?

[adamyall]

Are you only doing this because you can tell that you are on the iPhone once your game is initiated? It seems like you would be better off just initiating your game with the screen width, capping it at a certain amount.

[Meowts]

Yeah I briefly looked into ways of determining the device before initiating the game, didn't look too hard though. Probably the best way to handle that. I personally don't think it's a great idea, but that's the spec I was given and I haven't had a chance to discuss it yet.

 

Another thought I had was to make a "fake" game object, use Phaser's method of getting the device, and from it instantiating the "real" game object (maybe pass it back to my index page from Boot.js). I reckon I could get that going, but I wondered if there was a more concise way. I also figured just using css to resize the game container div and hide the overflow might do it, though part of the game depends on the game boundaries.

[adamyall]

I just checked (was on my phone earlier). You can just call "var device = new Phaser.Device()" and you can tell what platform you are on before instantiating the game. That's really useful actually. You can then just "delete device" and break the reference, hopefully freeing any memory.

[Meowts]

Oh snap, so, would you do something like:

var device = new Phaser.Device();if(device.iPhone4){  var game = new Phaser.Game(960, 640, Phaser.CANVAS, 'gameContainer');}else{  var game = new Phaser.Game(1136, 640, Phaser.CANVAS, 'gameContainer');}

in index.html?

 

EDIT: I guess this could come in handy too:

this.iPhone = navigator.userAgent.toLowerCase().indexOf('iphone') != -1;this.iPhone4 = (this.pixelRatio == 2 && this.iPhone);

From Device.js... but I like the easy Phaser way 

[adamyall]

You got it! Good luck!