How can I make a Phaser game automatically fill the browser window? (And ideally, automatically refill if the window changes size.) I know that there is a ScaleManager class but the docs aren't clear how to use it. I've also found other instructions but they don't indicate where to add the code they suggest, and running it immediately after creating the Game class doesn't seem to do anything.

I am currently using the base code found in this tutorial, but am willing to change that pletely.

How can I make a Phaser game automatically fill the browser window? (And ideally, automatically refill if the window changes size.) I know that there is a ScaleManager class but the docs aren't clear how to use it. I've also found other instructions but they don't indicate where to add the code they suggest, and running it immediately after creating the Game class doesn't seem to do anything.

I am currently using the base code found in this tutorial, but am willing to change that pletely.

• javascript
• phaser-framework

3 Answers 3

Turns out to be quite simple, you just need to run this code in a preload or create function (instead of immediately after creating a game instance, as I had been trying).

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
//this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.scale.setScreenSize( true );

Note that setting this.scale.pageAlignHorizontally to true will actually mess up the horizontal alignment if you make the game go fullscreen. Instead you can centre the canvas with css:

canvas { margin: 0 auto; }

You can overwrite the setShowAll Method of the ScaleManager
By default this function has an if which switches on "expanding",
expanding is a parameter which gets set to true if you go into fullscreen mode.
But since we always want to "expand" i just removed the if.

module.exports = function () {

  Phaser.ScaleManager.prototype.setShowAll = function () {
    let bounds = this.getParentBounds(this._tempBounds);
    let width = bounds.width;
    let height = bounds.height;
    let multiplier = Math.max((height / this.game.height), (width / this.game.width));

    this.width = Math.round(this.game.width * multiplier);
    this.height = Math.round(this.game.height * multiplier);
  };

  window.Game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
};

this kills the possibility to update, but it works

Right now (Phaser 2.4.4) you do this simply by setting the scale mode, for example within your create function:

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

game.scale.scaleMode controls how the game is scaled when NOT in full screen mode.

http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html#scaleMode