Jump to content

Stretch game to fit window


hustlerinc
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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() {}
Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

  • 1 year later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...