Stretch game to fit window

[hustlerinc]

I need help stretching my game to fit the window while keeping the aspect ratio of the game. Before using Phaser I was doing something like described in this article: http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/ and I'm looking for a similar solution now.

 

I've seen that Phaser has a few functions I could make use of in the ScaleManager to do this but I haven't managed to do even change the size. Could someone help me understands what functions I need and how to use them correctly? For simplicity lets assume the only code is "var game = new Phaser.Game(480, 320, Phaser.AUTO, '', { preload: preload, create: create, update: update });".

 

This gives us an aspect ratio of 1.5 and it should resize as soon as possible. Could anyone help me figure this out?

[Dumtard]

I have put together a function that will do this. Just call it once at the start of your code to initially set the size, and set it to window.onresize so it will then resize and scale when the window is resized.

var game = new Phaser.Game(480, 320, Phaser.AUTO, '', { preload: preload, create: create, update: update });var resize = function(e) {  var aspectRatio = 1.5;  if ((window.innerWidth / window.innerHeight) > aspectRatio) {    game.scale.width = window.innerHeight * aspectRatio;    game.scale.height = window.innerHeight;  } else if ((window.innerWidth / window.innerHeight) < aspectRatio) {    game.scale.width = window.innerWidth;    game.scale.height = window.innerWidth / aspectRatio;  } else {    game.scale.width = window.innerWidth;    game.scale.height = window.innerHeight;  }  game.scale.refresh();}window.onresize = resize;var preload = function() {}var create = function() {  game.scale.pageAlignHorizontally = true;  game.scale.pageAlignVertically = true;  resize();}var update = function() {}

[hustlerinc]

 

I have put together a function that will do this. Just call it once at the start of your code to initially set the size, and set it to window.onresize so it will then resize and scale when the window is resized.

var game = new Phaser.Game(480, 320, Phaser.AUTO, '', { preload: preload, create: create, update: update });var resize = function(e) {  var aspectRatio = 1.5;  if ((window.innerWidth / window.innerHeight) > aspectRatio) {    game.scale.width = window.innerHeight * aspectRatio;    game.scale.height = window.innerHeight;  } else if ((window.innerWidth / window.innerHeight) < aspectRatio) {    game.scale.width = window.innerWidth;    game.scale.height = window.innerWidth / aspectRatio;  } else {    game.scale.width = window.innerWidth;    game.scale.height = window.innerHeight;  }  game.scale.refresh();}window.onresize = resize;var preload = function() {}var create = function() {  game.scale.pageAlignHorizontally = true;  game.scale.pageAlignVertically = true;  resize();}var update = function() {}

Just what I was looking for. That's the second time you solve my problem in 24 hours. Thank you.

[sabdfresh]

This works to me.

But I have one problem,

if  I specify new Phase.Game parent argument.

why it doesn't work well .