Issues accessing global variables within states

Phaser 2 / CE
1

I am attempting to set up a number of player character variables that need to be accessible from multiple states. To do this, I tried the following setup in my html file:

window.onload = function() {

	//	Create your Phaser game and inject it into the gameContainer div.
	//	We did it in a window.onload event, but you can do it anywhere (requireJS load, anonymous function, jQuery dom ready, - whatever floats your boat)
	//var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'gameContainer');
	var game = new Phaser.Game(800, 600, Phaser.AUTO, 'gameContainer');
	
	
	var playerCurrSpeedX = 150; // 225???
	var playerCurrJump = -250; //Max -350
	var playerCurrRegDamage = 1; //Max 4
	var playerCurrPowDamage = 2; //Max 8
	var playerCurrHealth = 1; //Max 4
	
	console.log('playerCurrRegDamage', playerCurrRegDamage);

	//	Add the States your game has.
	//	You don't have to do this in the html, it could be done in your Boot state too, but for simplicity I'll keep it here.
	game.state.add('Boot', BasicGame.Boot);
	game.state.add('Preloader', BasicGame.Preloader);
	game.state.add('MainMenu', BasicGame.MainMenu);
	game.state.add('Levels', BasicGame.Levels);
	game.state.add('Game', BasicGame.Game);

	//	Now start the Boot state.
	game.state.start('Boot');

};

I thought because I declared the variables here in my index.html file I’d then be able to access them within whatever javascript file I wanted. So I tried to do a console.log(playerCurrHealth); within the create() function of the game.js file. This however results in an undefined value.

I tried researching javascript scope more to attempt to see where I went wrong. On w3schools for Global Variables in HTML it mentions referencing by window.variableName. So I tried console.log(window.playerCurrHealth); in the create function of my game.js file. Still no luck. If anyone could help me understand where I’m going wrong and how to fix it I’d really appreciate it. It feels like I’m missing something simple Thank you for your time.

2

Variables declared with var are scoped to the function they’re within or the global scope (if not within a function). So playerCurrSpeedX etc. exist only within that “onload” function.

The “onload” function probably isn’t needed, so you could remove it.

You can write multiple states all in one script file. That is a little simpler.

If you do use multiple script files, you need to declare the global variables first, the states next, and new Phaser.Game(), state.add(), and state.start() last.

3

Ah, I’m a dummy. Your right, that makes sense now that you’ve pointed it out. Thank you for your reply.

I’ve been using the default multi-state example to create my game so that’s why it has the onload. From my understanding onload is a function that occurs once the browser is loaded. I see it in a lot of examples, but you mention not needing it. Could you elaborate?

Also on a side note, while looking around I found another post here: Global variables? - Phaser 2 - HTML5 Game Devs Forum
with the user shohan4556 providing an answer that worked. I ended up formatting my code like this

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'gameContainer');

	game.global = {
		playerCurrSpeedX: 150,
		playerCurrJump: -250,
		playerCurrRegDamage: 1,
		playerCurrPowDamage: 2,
		playerCurrHealth: 1,
		playerScore: 0
	}

But I suppose that isn’t necessary.

4

I take that back, it’s probably a little safer to use the “onload” event handler. But you would still need to move the variables outside of that function in order to globalize them.

var playerCurrSpeedX = 150; // 225???
var playerCurrJump = -250; //Max -350
var playerCurrRegDamage = 1; //Max 4
var playerCurrPowDamage = 2; //Max 8
var playerCurrHealth = 1; //Max 4

var game;

window.onload = function () {
  game = new Phaser.Game(800, 600, Phaser.AUTO, "gameContainer");

  //  Add the States your game has.
  // [ etc. ]
  //  Now start the Boot state.
  game.state.start("Boot");
};

Adding game.global will also work as long as game is in-scope for all of your scripts.

5

Okay then I will keep the onload setup. As for having game in-scope can you think of an example when it wouldn’t be in scope assuming I did as you did and declared game initially outside window.onload?

6

I think I garbled my point a bit, but you have it right — as long as you declare var game outside any function it will be a global variable and so in-scope everywhere.