Making Global class

[uyerdna]

Hi everyone

 

Coming here as AS3 developer, I have almost zero JS experience previously

Perhaps what I'm missing is proper JS coding knowledge, I'm sorry if I posted at the wrong section

 

I'm building a test project using latest Phaser. So far so good! Have managed to create some things visible, tween, bitmaptext and spritesheet working, and learn a few tricks in the way. My only complaint is that coding Phaser JS on Sublime Text is a pain when compared with coding AS on FD and I'm too lazy to give Typescript a try. 

 

Currently I'm using the template from the nice codevinsky

http://codevinsky.ghost.io/phaser-tutorial-getting-started-with-generator-phaser-official/

 

Very helpful to add new States easily and made my life easier with its pre-configured grunt task.

 

My problem now is how to make a Global class so that I can access it from anywhere. In AS3, I can easily create a new generic class and use it anywhere else. I'm sure this has something to do with the way JS works, but I really want to write customer's game logic in a separate file (TCustomer.js)

 

I really have no idea how to include / import it to my play.js, if it's at all possible. Have tried a few ways, but none were successful.

 

So far here's my code: 

window.onload = function () {  var game = new Phaser.Game(800, 480, Phaser.AUTO, 'phaser-sandwich-test');  // Game States  game.state.add('TCustomer', require('./states/TCustomer'));  game.state.add('TSaveManager', require('./states/TSaveManager'));  game.state.add('TWindow', require('./states/TWindow'));  game.state.add('boot', require('./states/boot'));  game.state.add('globals', require('./states/globals'));  game.state.add('menu', require('./states/menu'));  game.state.add('play', require('./states/play'));  game.state.add('preload', require('./states/preload'));    game.state.start('boot');};

With the code above, I can access TCustomer and TWindow anywhere I want. But the problem is, they are both NOT game states. I'm pretty sure there must be a better way to do this. Will there be a problem if I keep adding new global classes as game states?

 

Thanks in advance!

[stasuss]

May be put the variable referencing that class in global scope of the 'window' object? Or you can create variable and add all the states and 'game' into it, but it is the same as using 'window' object.

[Videlais]

Looking at the code on GitHub, it should just be a matter of calling --

$yo phaser-official:prefab "prefabName" 

-- with the name of the Phaser.Sprite subclass you want to use.

 

Alternatively, you can define your class in a file and then call require() on it. (Using Node.js + grunt to create it.)

 

Everything runs within the function scope it is created within in JavaScript too. If a class was instantiated within the window.onload function, and existed before the calls to game.state.add, all of the states could reference it. So, if you wanted global classes (singletons), either its class definition or an instance of it needs to exist before any code that references it is called.

 

For example, something like the following:

window.onload = function () {  var game = new Phaser.Game(800, 480, Phaser.AUTO, 'phaser-sandwich-test');  var TCustomer = require('./states/TCustomer');  var TSaveManager = require('./states/TSaveManager');  var TWindow = require('./states/TWindow');  // Game States  game.state.add('boot', require('./states/boot'));  game.state.add('globals', require('./states/globals'));  game.state.add('menu', require('./states/menu'));  game.state.add('play', require('./states/play'));  game.state.add('preload', require('./states/preload'));  game.state.start('boot');};

[marvster]

Have a look at this: http://www.html5gamedevs.com/topic/6099-best-way-to-save-and-get-game-constants/

 

Just attach global classes to the (this.)game context and you may access them in every state.

[Noid]

TCustomer.js

=====================

 

var MyGame = MyGame || {};   //Create the MyGame namespace if it doesn't exist (it's just a variable holding an empty object)

 

MyGame.TCustomer = .....    // Here you can use object notation, constructor functions, IIFEs or any value depending on what you want

=====================

 

Then for TSaveManager.js you do the same but using MyGame.TSaveManager instead of TCustomer. That way you use only one global variable for you game and put everything inside it. It's similar to using packages in AS3.

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

[uyerdna]

Thanks for the answers guys!

You're all very helpful!

 

+1 for Videlais

this is exactly what I was looking for

 

 

 If a class was instantiated within the window.onload function, and existed before the calls to game.state.add, all of the states could reference it. So, if you wanted global classes (singletons), either its class definition or an instance of it needs to exist before any code that references it is called.