How can I make Phaser game auto-fill the window?
How can I make Phaser game auto-fill the browser window? (And ideally, auto-replenish if the window resizes .) I know there is a ScaleManager class , but it's not clear in the docs how to use this. I also found other instructions , but they do not indicate where to add the code they suggest and run it right after the Game class is created doesn Seems to do nothing.
I am currently using the base code found in this tutorial , but I am ready to completely change it.
source to share
It turns out that this is pretty straightforward, you just need to run this code in a preload or create function (not immediately after instantiating the game, as I tried).
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 fullscreen. Instead, you can center the canvas with css:
canvas { margin: 0 auto; }
source to share
You can overwrite the setShowAll method for the ScaleManager.
By default, this function has, if it includes "extension", the
extension is a parameter that gets true if you go into full screen 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 update option but works
source to share
Right now (Phaser 2.4.4) you do it simply by setting the scaling mode, for example, in your create function:
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.scaleMode controls how the game scales when NOT in full screen mode.
http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html#scaleMode
source to share