What is the purpose of including a parameter in each state's main function?

[tfishell]

(I'd consider myself still a beginner despite dabbling with JS in the past, as some of the concepts I can't seem to comprehend or remember.)

 

I'm working with pre-built puzzle game code, much of which I can understand, but I noticed that the author included a parameter ("game") in each of the state functions (located in separate JS files, like Boot.js), and I'm not sure what the purpose of it is.

BasicGame.Boot = function (game) {};BasicGame.Boot.prototype = {...};

In retrospect it probably doesn't make sense, but originally I thought that was a way to pass the "game" var in 

var game = new Phaser.Game ...

to the other states, but I guess besides being a local var, since the "game" in function (game) is a parameter, it can be called whatever and still work.

 

Furthermore, deleting the parameter doesn't affect the game apparently, so I'm wondering if the inclusion of it was just something the author forgot to delete or something like that.

 

If someone could just help me understand what the purpose of "game" is or could be, I'd appreciate it. Let me know if more info is needed, and thanks.

 

index.html:

<script type="text/javascript">window.onload = function() {...var game = new Phaser.Game(825, 625, Phaser.CANVAS, 'gameContainer');...game.state.add('Boot', BasicGame.Boot);...game.state.start('Boot');};</script>

Boot.js:

var BasicGame = {};BasicGame.Boot = function (game) {};BasicGame.Boot.prototype = {...};

[chongdashu]

From what I can tell, having parameters  will facilitate the case where you need to initialize  state variables/fields on creation.
 
e.g.,

var BasicGame = {};BasicGame.Boot = function (param1, param2) {    this._param1 = param1;    this._param2 = param2;};

// And latervar param1 = new Param1();var param2 = new Param2();var state = new BasicGame.Boot(param1, param2);

As to specifically why "game" is being passed in, it's probably because if the state is typeof() == "function", the  Phaser.StateManager.add() method automatically passes in a reference to the game.  See Line 210 of Phaser.StateManager. This ensures that performing "this.game" within the state object later will enable access to the Phaser.Game object.

[tfishell]

From what I can tell, having parameters  will facilitate the case where you need to initialize  state variables/fields on creation.

 

e.g.,

var BasicGame = {};BasicGame.Boot = function (param1, param2) {    this._param1 = param1;    this._param2 = param2;};

// And latervar param1 = new Param1();var param2 = new Param2();var state = new BasicGame.Boot(param1, param2);

 

Thanks for the response. I'm confused about 

var state = new BasicGame.Boot(param1, param2);

, including "new". This StackOverflow page says new "creates a new object". Can one say that new "creates a copy of an object"? And will there come times when one wants to create a copy of a state; could you give me a short "real-world" example? Pardon my n00bness.

 

 

As to specifically why "game" is being passed in, it's probably because if the state is typeof() == "function", the  Phaser.StateManager.add() method automatically passes in a reference to the game.  See Line 210 of Phaser.StateManager. This ensures that performing "this.game" within the state object later will enable access to the Phaser.Game object.

 

 

Just to be clear, in the case of any parameter, technically one can call it anything one wants to, correct?

 

I mentioned in the o.p. that deleting the parameter doesn't seem to have any affect on the game I'm working with (no errors). Is this because I haven't had to perform the example you set above, ie creating a "copy" of the state with an argument to use with the parameter?

[chongdashu]

Hi, great questions! I'm afraid I might have cause some confusion, so I'll do my best to answer them as best as I can.
 

Can one say that new "creates a copy of an object"

No, the new operator instantiates an object of a given class. For example, if you have a Soldier class defined that has several properties that can be defined:
 
class Soldier
   int height
   int weight

 

You will not be able to to do Soldier.height or Soldier.weight. You want to first create a Soldier object (i.e., var myFirstSoldier = new Soldier()) and then do

var mySoldier = new Soldier();mySoldier.height = 50; mySoldier.weight = 50;

So new instantiates an object from a given class.
 
I'm not sure how familiar you are with Object Oriented Programming concepts - but Javascript isn't really the best language to demonstrate this.
 

And will there come times when one wants to create a copy of a state; could you give me a short "real-world" example?

 

Using the same example above, just imagine you created a new soldier object (i.e., var yourSoldier = new Soldier())  And now you want to set this new soldier's height and weight  to that of the old soldier. You'll just do:

var yourSoldier = new Soldier();yourSoldier.height = mySoldier.height; yourSoldier.weight = mySoldier.weight;

In a "more real-world" example, what happens in Phaser is that when you do the following:

game = new Phaser.Game(640, 480, Phaser.AUTO, "game-container");game.state.add("BootState", BasicGame.Boot);

 
What internally happens is that Phaser records that the string "BootState" is associated with the class BasicGame.Boot. It does so by doing the following

• Sees first parameter "BootState"
• Sees second parameter class BasicGame.Boot
• Instantiates the state object of class BasicGame.Boot by doing var state = new BasicGame.Boot();
• Associates the string "BootState" with the instantiated state object.

Just to be clear, in the case of any parameter, technically one can call it anything one wants to, correct?

Yes, you could have called it anything you want.

 

I mentioned in the o.p. that deleting the parameter doesn't seem to have any affect on the game I'm working with (no errors).

 

 

Yeah, there won't be any errors in the two scenarios:

• if you use this.game because the Phaser StateManager automatically sets the this.game variable for you.
• If you use game , because it is a global variable

[sombriks]

Every state receives a reference to game object because it's good practice. The code should not rely on global variables if there is a local reference.

 

It's out of state scope and control what happens with the external reference as well.

 

you can also assemble your state like this:

game.state.add("Boot",function(game){    this.create = function(){};  this.update = function(){};});

and then use the game as local reference instead global var.

[tfishell]

Can one say that new "creates a copy of an object"

No, the new operator instantiates an object of a given class. For example, if you have a Soldier class defined that has several properties that can be defined:

 

class Soldier

   int height

   int weight

 

You will not be able to to do Soldier.height or Soldier.weight. You want to first create a Soldier object (i.e., var myFirstSoldier = new Soldier()) and then do

var mySoldier = new Soldier();mySoldier.height = 50; mySoldier.weight = 50;

So new instantiates an object from a given class.

 

First off, thanks for taking the time to answer.

 

Another way of putting it is, it creates an instance of an object stored in the new var? Is that different from a copy of the original object stored in a new var?

 

Also, I came across classes in Actionscript a few years ago but not in Javascript; a Google search makes it seem like classes are a relatively new thing for JS. I haven't come across the "class" keyword in the current JS code I'm working with.

 

For a game, would you recommend having different classes for things like the player character, enemy type 1, enemy type 2, level construction, etc.? And would you recommend each class having its own .js file?

 

I'm not sure how familiar you are with Object Oriented Programming concepts - but Javascript isn't really the best language to demonstrate this.

 

 

I've read w3schools JS section and info on similar sites in the past, including http://www.w3schools.com/js/js_objects.asp, but I'm not necessarily sure I found where to get the overall view of "Object Oriented Programming concepts". Any recommendations to give a good overall view (perhaps from the books mentioned in the "how to write good js" thread)? I'm not "betting my future" on writing code but I'm definitely interested in game-making for the web as a hobby (and switched from Unity3D to this recently as support for Unity Player is, apparently, waning). I have the book "Javascript for Web Developers 3rd Edition" and am reading through that currently, but I'm willing to switch up my reading focus if there's something more appropriate to read. 

 

It's like information overload, trying to decide what to spend my time reading. Basically I just want to focus on making games that can be easily played in a browser, and HTML5/Javascript (via Phaser) seems like the best way to do that currently and what I should be trying to tlearn.

 

 

Using the same example above, just imagine you created a new soldier object (i.e., var yourSoldier = new Soldier())  And now you want to set this new soldier's height and weight  to that of the old soldier. You'll just do:

var yourSoldier = new Soldier();yourSoldier.height = mySoldier.height;yourSoldier.weight = mySoldier.weight;

 

So, for another example, this is a recommended way of creating multiple enemies of a same type? Have numerous enemy soldiers, but provide arguments to instantiate them at different x,y coordinates in the game and such?

 

 

In a "more real-world" example, what happens in Phaser is that when you do the following:

game = new Phaser.Game(640, 480, Phaser.AUTO, "game-container");game.state.add("BootState", BasicGame.Boot);

 

What internally happens is that Phaser records that the string "BootState" is associated with the class BasicGame.Boot. It does so by doing the following

• Sees first parameter "BootState"
• Sees second parameter class BasicGame.Boot
• Instantiates the state object of class BasicGame.Boot by doing var state = new BasicGame.Boot();
• Associates the string "BootState" with the instantiated state object.

 

You call BasicGame.Boot a "class" I never came across the "class" keyword in my JS files (but perhaps I missed it), like this unnamed function example on the MDN page:

var Polygon = class {    constructor(height, width)     {         this.height = height;         this.width = width;    }};

I see the BasicGame object, the BasicGame.Boot constructor(?) function, and the prototype for the BasicGame.Boot function

 

var BasicGame = {};BasicGame.Boot = function () {};BasicGame.Boot.prototype = {    //init, preload, and create functions};

 

Is it likely there are no actual classes in this code I'm working with because it's such a simple game, or what am I missing here?

 

Apologies for all the questions; like I said, if you can come up with some good JS tutorials that are perhaps a little more advanced than w3schools JS material, I'll be happy to try learning that before coming back here with so many question.

[tfishell]

you can also assemble your state like this:

game.state.add("Boot",function(game){    this.create = function(){};  this.update = function(){};});

 

Mmm, interesting. Maybe I was getting confused since the different states(?) were in different files (Boot.js, Game.js, etc.), and I wasn't sure how they were "coming together" or what information could be passed between them since they are separate files.

 

So instead of doing 

 

index.html:

<script type="text/javascript">window.onload = function() {var game = new Phaser.Game(810, 600, Phaser.CANVAS, 'gameContainer');game.state.add('Boot', BasicGame.Boot);...game.state.start('Boot');};</script>

Boot.js:

var BasicGame = {};BasicGame.Boot = function () {};BasicGame.Boot.prototype = {    //actual code};

one could do something like below (not the full equivalent obviously but similar idea)?

 

mainFileIGuess.js:

var platformGame = new Phaser.Game(810, 600, Phaser.CANVAS, 'gameContainer');platformGame.state.add("Boot", function(platformGame){     //this = platformGame?     this.create = function(){};     this.update = function(){};});

Or am I off-track here?

[chongdashu]

Another way of putting it is, it creates an instance of an object stored in the new var? 

 

No, it's important to differentiate between class and object. Do not worry about the language for now, because classes and objects are an abstract concept that other programming languages either support natively or can be implemented.

 

An object is an instance of a class: Think of a class as like a definition (e.g., schematic or a blue print.) It represents an abstract concept. Hence in my example: 

• the Soldier class is a definition to represent a soldier.
• the definition is that a soldier has both a height and a weight

An object is a concrete instantiation of the class. The objects in my example were mySoldier and yourSoldier. Each object has its own height and weight. The Soldier class has no height and weight because it's not "physically" present. It's just a definition.

 

So the correct way to put it is: "it instantiates an object  of a class and points to the object in a variable." 

 

Is that different from a copy of the original object stored in a new var?

 

There are two problems in this statement. First is the word, "copy," and the second is the notion of "original object." 

 

What is the original object? I suspect that what you really mean is the class. 

A copy in the context of this would be doing something like:

// This is my first physical soldier.var soldier1 = new Soldier();soldier1.height = 75;soldier1.weight = 50;// This is my second physical soldier.var soldier2 = new Soldier();soldier2.height = 80;soldier2.weight = 80;// This is NOT A COPY. It is still my first soldier.// the variable soldier3 just points to the first soldiervar soldier3 = soldier1;// This is a COPY of the first soldier.var soldier4 = new Soldier();soldier4.height = soldier1.height;soldier4.weight = soldier1.weight;

Above, at the end of the execution, there are only three soldiers, not four. There are four variables, but one of the variable (soldier3).

 

• soldier3 is pointing to the same soldier as soldier1.
• soldier4 is pointing to a different soldier, who has the same properties as the soldier pointed to by soldier1 and soldier3

 never came across the "class" keyword in my JS files

Yes, there is no class keyword. Javascript does have ways to representing a class and an object. Remember, classes and objects are both conceptual things. BasicGame.Boot is a class (even though it's implemented using a function in Javascript). new BasicGame.Boot() is an object.

 

Is it likely there are no actual classes in this code I'm working with because it's such a simple game, or what am I missing here?

 

Well, BootGame is a class. It is a class that is the definition of a Phaser.State object. It's just represented as a class. 

 

Apologies for all the questions; like I said, if you can come up with some good JS tutorials that are perhaps a little more advanced than w3schools JS material, I'll be happy to try learning that before coming back here with so many question

 

 

 

No apologies necessary! These are great questions. Unfortunately, as I've said -- Javascript probably is not the best language to begin understanding OOP concepts because it does not transparently make classes and objects clear. I would say it would be better to take a look at a language like Python or C# to learn these concepts. Once you have done so, you will understand how Javascript actually implements classes using functions and dictionaries. I wouldn't recommend studying advanced JS to understand OOP, because it really isn't the best tool to understand the concepts. Advanced JS will really be telling you how to create classes using some Javascript gymnastics -- but not teach you the concepts, which are probably what you are seeking here. 

 

one could do something like below (not the full equivalent obviously but similar idea)?

 

mainFileIGuess.js:

var platformGame = new Phaser.Game(810, 600, Phaser.CANVAS, 'gameContainer');

platformGame.state.add("Boot", function(platformGame)

{

     //this = platformGame?

     this.create = function(){};

     this.update = function(){};

});

 

 

Not sure what this = platformGame means really. Are you saying that the this variable will be pointing to the game? If so, no -- the this keyword will be pointing to the nameless class that you're defining  (called an anonymous class). Rather it should be:

platformGame.state.add("Boot", function(platformGame){     this.game = platformGame     this.create = function(){};     this.update = function(){};});

[tfishell]

No apologies necessary! These are great questions. Unfortunately, as I've said -- Javascript probably is not the best language to begin understanding OOP concepts because it does not transparently make classes and objects clear. I would say it would be better to take a look at a language like Python or C# to learn these concepts. Once you have done so, you will understand how Javascript actually implements classes using functions and dictionaries. I wouldn't recommend studying advanced JS to understand OOP, because it really isn't the best tool to understand the concepts. Advanced JS will really be telling you how to create classes using some Javascript gymnastics -- but not teach you the concepts, which are probably what you are seeking here. 

 

 

You might be right. I tried learning C# with Unity3D several months back and spent a bit of time with it (though I still don't get dictionaries, or classes obviously), but the future of browser-based games seems to be HTML5/JS so that's why I wanted to learn this. Plus I also spent a few months working in Javascript trying to build a website (with the help of StackOverflow), but put that project on hold.

 

I may go ahead and go back to C#, though, based on your suggestion. Any ideas for good game-focused C# tutorials (Unity or not)? I've gone through several different platformer tutorials via YouTube, but even the official Unity ones never really explained things like dictionaries, unfortunately.

 

(I don't think I'm cut out for programming in general [i have a degree in graphic design but don't really like that], but I like it enough to spend my free time on it.)

 

 

No, it's important to differentiate between class and object. Do not worry about the language for now, because classes and objects are an abstract concept that other programming languages either support natively or can be implemented.

 

An object is an instance of a class: Think of a class as like a definition (e.g., schematic or a blue print.) It represents an abstract concept. Hence in my example: 

• the Soldier class is a definition to represent a soldier.
• the definition is that a soldier has both a height and a weight

An object is a concrete instantiation of the class. The objects in my example were mySoldier and yourSoldier. Each object has its own height and weight. The Soldier class has no height and weight because it's not "physically" present. It's just a definition.

 

 

 

 

So is this the class: 

Soldier = function(weightInput, heightInput){     this.weight = weightInput;     this.height = heightInput;}

And is this an object of said class?

var soldier1 = new Soldier();soldier1.weight = 70;soldier1.height = 25;

Am I able to set the properties of the object in the above manner, or do I need to input the value as arguments like 

var soldier1 = new Soldier(70, 25);console.log(soldier1.weight) //70console.log(soldier1.height //25

So the correct way to put it is: "it instantiates an object  of a class and points to the object in a variable." 

 

 

Can I also say "...and stores the object in a variable" or "stores the value of the object in a variable" or "refers to the object via a variable"?

 

There are two problems in this statement. First is the word, "copy," and the second is the notion of "original object." 

What is the original object? I suspect that what you really mean is the class. 

 

 

 

 

Probably. Seeing "{ }" makes me  assume it's an object, but I guess that isn't true.

 

A copy in the context of this would be doing something like:

...

Above, at the end of the execution, there are only three soldiers, not four. There are four variables, but one of the variable (soldier3).

 

• soldier3 is pointing to the same soldier as soldier1.
• soldier4 is pointing to a different soldier, who has the same properties as the soldier pointed to by soldier1 and soldier3

 

Thanks for the info.  

 

 

 

 

[sombriks]

That's the idea.

 

For example, let's say you have 3 files, containing one state each one, and one main file.

 

on main file you create the game reference and set anything that should be valid for all states

 

on each state file, it knows how to add itself to the state manager, so you'll avoid the state register step, making the code a bit cleaner.

 

this is not a very rigid standard, i evolved my code style to something like i'm described due my exposure to many other javascript technologies, and for sure it will change when ES6 make it's debut on phaser 3.

 

 

if you make the code better contained and with less dependency points then it means you got a better code to evolve/maintain.

 

just don't burn too much time in that part, code the game, have fun. 

 

 

Mmm, interesting. Maybe I was getting confused since the different states(?) were in different files (Boot.js, Game.js, etc.), and I wasn't sure how they were "coming together" or what information could be passed between them since they are separate files.

 

So instead of doing 

 

index.html:

<script type="text/javascript">window.onload = function() {var game = new Phaser.Game(810, 600, Phaser.CANVAS, 'gameContainer');game.state.add('Boot', BasicGame.Boot);...game.state.start('Boot');};</script>

Boot.js:

var BasicGame = {};BasicGame.Boot = function () {};BasicGame.Boot.prototype = {    //actual code};

one could do something like below (not the full equivalent obviously but similar idea)?

 

mainFileIGuess.js:

var platformGame = new Phaser.Game(810, 600, Phaser.CANVAS, 'gameContainer');platformGame.state.add("Boot", function(platformGame){     //this = platformGame?     this.create = function(){};     this.update = function(){};});

Or am I off-track here?

[drhayes]

Can I also say "...and stores the object in a variable" or "stores the value of the object in a variable" or "refers to the object via a variable"?

 

 

Yes you can, mostly. "stores the value of the object" doesn't make a lot of sense, but the other two sound good. The last one is very accurate.

 

When your code says "new Solider();" that is an expression. The result of that expression is an object. If you do "var solider = " in front of that expression then the object created by the "new" operator will be referenced by that variable. But, if you wanted to be weird, you could have "new Solider();" by itself on a line. That would call the "Solidier" function and create a new object and then potentially nothing would refer to that object.

 

chongdashu is completely right about object-oriented principles in JS. Classes in JS are a syntactical mess; JS doesn't even support the "class" keyword until its very recent version which doesn't have widespread browser support yet. That doesn't mean you can't do it, it just means that the syntax looks very, very foreign compared to languages like Python, C#, and Java.

 

You've noticed, for instance, that a class constructor in JavaScript is a function like any other function. You can, distressingly, use the "new" operator in front of any function in JS to surprising results. By convention, functions that start with a capital letter are used as constructors and are expected to make objects.