How to access a custom class Settings global variable from Phaser.scene `game` instance?

Phaser 3
1

I want to create a Settings global variable, which contains all the game setting and I can use in the different scenes. I want to access the settings in my LevelSelect-scene, to display which levels have been unlocked. And I also want to access it in the Game-scene, to determine which player color to use. And in a separate Settings-scene to let the player select a skin and set the sound on/off

So, I created a class Settings that neatly contains all the loading, saving and accessing the settings, see code below (btw It’s not complete, it also needs extra error handling and other settings, but that’s exactly why I want to put that code in a separate custom object)

// Settings object
export default class Settings
{
    constructor ()
    {
		// game name
		this._gamename = "my_game_"
		// settings
		this._skin = 1; // blue
		this._sound = false;
		this._levels = []; // completed levels
    }

    LoadSettings()
    {
        // load from localstorage
        var clr = window.localStorage.getItem(this._gamename + "skin");
        var snd = window.localStorage.getItem(this._gamename + "sound");
        var lvl = window.localStorage.getItem(this._gamename + "levels");

        // settings variables
        this._skin = parseInt(clr);
        this._sound = (snd ? true : false);
        this._levels = JSON.parse(lvl);
    }

    SaveSettings()
	{
	    // save to localstorage
	    window.localStorage.setItem(this._gamename + "skin", this._skin);
	    window.localStorage.setItem(this._gamename + "sound", this._sound);
	    window.localStorage.setItem(this._gamename + "levels", JSON. stringify(this._levels));
    }
}

I instantiate ths Settings class in the main.js together where also the let game = Phaser is declared, so it looks like this:

import Settings from './Settings.js';
var mysettings = new Settings();

import Phaser from 'phaser';
//.. etc.
let game = new Phaser.Game(config);

However, the problem is that when I try to access the mysettings global variable from the MainMenu-scene (or any scene) I get an error “mysettings is not defined”

export default class MainMenu extends Phaser.Scene
{
    constructor () { super('MainMenu'); }

    create () {
      var clr = mysettings._skin;
      // ** ReferenceError: mysettings is not defined

The mysettings is declared as a global variable afaik, so shouldn’t it be accessible in the game instance? What am I doing wrong here? Or, how can I create such a global variable that can easily be accessed in all scenes?

2

Within a module a top-level var declaration doesn’t create a global variable. :slight_smile:

An easy way is to create a property on the global object:

window.mysettings = new Settings();

Or with modules you would export an instance:

mysettings.js

import Settings from './Settings.js';

export default new Settings();

main.js etc.

import mysettings from './mysettings.js';
1 Like
3

Thanks :+1: Using modules and exporting the instance seems like the best way to do it