Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
60 lines (44 sloc) 1.86 KB
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.

You can’t perform that action at this time.