2019-02-12-scale-phaser-game.md

layout	title	date	excerpt	categories
post	Scaling a Phaser game	2019-02-12 13:28:43 -0800	To scale or resize a Phaser game canvas, use the built-in Scale Manager.	phaser scale resize game web javascript

Phaser 2

To scale/resize a Phaser 2 game:

var game = new Phaser.Game(/* config */);
game.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;

See example and docs.

Phaser 3

To scale/resize a Phaser 3 game:

new Phaser.Game({
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  // config
});

ScaleManager was added in Phaser 3.16.0. Make sure you're using that version or higher.

The scale settings are set in the GameConfig. See examples and docs.

Note: In order for the text to scale properly, use fontSize instead of font for the style:

// good
this.add.text(16, 16, 'My Text', {
  fontSize: 32,
  fontFamily: 'Arial',
});

// bad
this.add.text(16, 16, 'My Text', {
  font: '32px Arial',
});

Addendum

Before Phaser 3 added the ScaleManager class, I created my own resize helper that was inspired by this article.

I hope this post helped you out! Let me know if you have any questions.