Custom Config and Global Variables in Phaser 3 Games

Global variables in Phaser 3 games are ideal for persisting user settings across multiple scenes such as Sound On / Off, Input type etc.

Phaser has its own inbuilt key / value store called DataManager, but what if you want something a little simpler i.e. additional custom properties in the Phaser 3 game.config object?

The first step in creating a Phaser 3 game is to create a config object and pass this into the constructor for the Game class e.g.

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 300,
    parent: 'phaser-game',
    scene: [
        SceneGame
    ],
    myCustomProperty: true
};

var game = new Phaser.Game(config);

Adding a property to the config object at initialisation stage wont work, it will be cleansed from config during game initialisation. However, if you add a custom property to Phaser 3 game config after initialisation it works just fine, so:

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 300,
    parent: 'phaser-game',
    scene: [
        SceneGame
    ],
    myCustomProperty: true
};

var game = new Phaser.Game(config);
game.config.myCustomProperty = true;

You can then reference the Game Config property in any scene as follows:

if (this.game.config.myCustomProperty  === true) {

This approach to custom global variables and config settings in Phaser 3 games is simple and quick to implement so why not give it a try!

If you found this article useful, why not read some of my other Phaser 3 game blog posts.