This post is a response to the helpful comment from Greg in:
First Phaser 3 Game – Lessons & Code Pt. 1

References

In my blog series about creating my first Phaser 3 game, I was using Phaser 3 Beta 20 because the framework hasn’t been fully released yet. At that time, there was a minor bug that prevented us from passing data between scenes.

This was the original GitHub issue, which has been closed meanwhile. The fixes are documented here and here. As Greg has correctly pointed out, the issue was fixed since Phaser 3.1.2.

Phaser Developer Dissuades From Using Global Vars

So consequently, abusing global variables to move data between scenes is not a good idea anymore.

Moreover, Richard Davey, the developer of the Phaser 3 framework, clearly dissuades us from using global vars in Phaser 3 the way we did in Phaser 2 because of the new, modulated structure.

This is what he wrote on the introduction page of the “Making Your First Phaser Game” Tutorial (as of 25.02.2018):

In Phaser 2 the game object acted as the gateway to nearly all internal systems and was often accessed from a global variable. In Phaser 3 this is no longer the case and it’s no longer useful to store the game instance in a global variable.

How to Pass Data Between Scenes in Phaser 3

I have failed to explain the intended way of passing data between scenes in Part 1 of the blog series. However, I did go into it in Part 2 of the series. A bit of a redundancy and not perfectly thought out, I admit!

Anyways, I’ve tested it out in v3.1.2 and passing data now works perfectly. However, it passes only one data object now. In Phaser 2, you could add as many arguments as you wanted.

This means that whatever you want to pass now, you must add it to an object and then pass only this object to the next scene.

Here is my example from Part 2 of the series:

// Here we are in the "Level" scene
// We start the "play" scene and send some data
this.scene.start('Play', { level: 3, difficulty: Medium });

// In the init or create method of the "Play" scene you receive the data as follows
PlayScene.init = function(data)
{
	this._LEVEL = data.level;
	this._DIFF  = data.difficulty;
};

Replacing Global Variables

Seeing how we pass only one data object, I understand now how we can get rid of the global variables: We can simply create one object and pass it every time we start a scene.

When booting the Phaser game, we can set all global variables as properties of this object. As we pass this object in every new this.state.start('key, data); its properties will always be available in all the scenes, thus replacing global variables.

Unfortunately, all the examples from the dev team that I’ve found so far don’t use a separated file structure. So I am curious to see how they would manage values that must be accessible from within any scene (i.e. things like a username) in larger projects.

But right now I have the impression that using this object to pass them between all scenes seems the way it was meant to be done. If I find out otherwise, I will update again.

Personally I will probably be using a mix of very minimal global variables and passing all the remaining values between scenes. I need to play around with it myself in the next game to figure it out.

To round this up, this is how I had imagined the whole process, replacing what I’ve written last time (see code snippet above):

// Global vars as properties of my object that
// gets passed between all scenes
BootScene.init = function()
{
	'use strict';
	
	this.PASSING_OBJ	= {
		level	: -1,
		diff	: ''
	};
};

// Pass it to every scene
BootScene.create = function()
{
	'use strict';
	
	this.scene.start('Intro', this.PASSING_OBJ);
};

// Access it in every scenes init method
IntroScene.init = function(data)
{
	'use strict';
	
	this.PASSING_OBJ	= data;
};

The Ultimate Phaser 3 Guide

Everything you need to make real, polished, professional Phaser 3 games, you find it in this guide here: HTML5 Game Development Mini-Degree

I highly suggest you check it out!