Phaser 2 fluid game size for vertical scroller

[joshgerdes]

I am new to Phaser development and I am currently having trouble figuring out the correct code needed to have a game resize to the full viewport of a browser on window resize without stretching any of the graphics.

 

I am working on a vertical scroller with a tilemap (1024x4608) for the base background/map. On window resize (or orientation change) I would like to be able to adjust the game dimensions to fill up the entire viewport while keeping the same ratio to allow the tilemap not to be distorted.

 

From my tests, it seems that I would want to keep the width the same and adjust the height then let the game scaling do its thing to allow the game to take up the full browser viewport without stretching the tilemap.  I just have not been able to figure out the correct ScaleManager settings to make that happen.

 

I tried the following which does scale the game but does not adjust the width/height to take up the whole viewport:

 

Game instantiation:

var gameHeight = window.innerHeight * 1024 / window.innerWidth;var game = new Phaser.Game(1024, gameHeight, Phaser.CANVAS, 'test-game');

In the window resize function:

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.pageAlignHorizontally = true;game.scale.pageAlignVertically = true;game.scale.setScreenSize();game.scale.refresh();

And this attempt takes up the whole viewport but does not scale correctly so it stretches the tilemap:

 

In the window resize function:

game.scale.setMaximum();game.scale.refresh();

Any help would be greatly appreciated.

 

 

[rich]

Have a look in the resources/Project Templates folder at the Responsive template.

[joshgerdes]

Thanks for the reply Rich but the responsive template looks to be a bit bare. I tried setting the initial game height and width to 100% and setting the scaleMode to RESIZE but I had no luck.  For the responsive template, does there need to be anything else in the game resize function? Like a call to scale.refresh() or similar?

 

Also, right now I am using a tilemap as the base world background and one of its layers for a collision map. So with the settings from the responsive template it shows nothing on page but perhaps I need to set something else with my tilemap then the responsive template settings would work?

 

Here's how I'm using the tilemap at the moment:

this.physics.startSystem(Phaser.Physics.P2JS);this.physics.p2.setImpactEvents(true);this.physics.p2.restitution = 0.8;this.stage.backgroundColor = '#2d32b8';this.map = this.add.tilemap('level01');this.map.addTilesetImage('main', 'tiles');this.map.createLayer('land');this.map.createLayer('bridge');this.world.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);var playerCG = this.physics.p2.createCollisionGroup();var landCG = this.physics.p2.createCollisionGroup();this.physics.p2.updateBoundsCollisionGroup();this.map.setCollisionByExclusion([], true, 'land');var bodyObjects = this.physics.p2.convertTilemap(this.map, 'land');for(var i = 0; i < bodyObjects.length; i++) { 	bodyObjects[i].setCollisionGroup(landCG);	bodyObjects[i].collides(playerCG);}

Or is there a better way to setup a map and collision boundaries that would work in the responsive template example?

[joshgerdes]

So does anybody have any idea how to update the game height on window.resize (preferably while keeping the aspect ratio / scale)?