Basic questions about the basic template

[Biggerplay]

I'm completely new to JS, and I'm just trying to get my head around the JS in the basic template, few questions.

game.state.add('Boot', BasicGame.Boot);

In the index.html file, the above is used to add a state, but how can the index file use BasicGame if that is not defined yet? as BasicGame is defined in boot.js which runs after the setting up of the states?

BasicGame = {};

That creates a function? which basically acts as a class?

BasicGame.Boot = function (game) {};

What's the point of the above? (in the boot.js file) why does the game var need to be passed to it? does it act as a constructor?

 

What calls the create function in the boot.js file? I'm trying to understand the program flow in the basic example, what calls what and when.

 

 

[jcs]

everything in the head section is loaded before the body section. (incidentally this is why you don't want to have too much in the head section - users will have to wait until everything there is loaded before they see anything on your page). so all the scripts are loaded by the time the onload handler runs.

 

BasicGame = {}; 

 

creates a javascript object, not a function. (a function actually IS an object, but not vice-versa).

 

the template is using the 'BasicGame' object as a namespace to contain all the things about the game. this keeps you from junking up the global namespace, which is a common source of bugs in javascript. 

 

BasicGame.Boot = function( game ) ...

 

adds a function named 'Boot' (which takes a single argument named 'game') to the BasicGame object. 'game' is passed as an argument because you're probably going to need it for whatever you do in the Boot function. In this case the function is empty, so we can only presume that it probably is intended to be a constructor because it starts with a capital letter - this is a common javascript idiom that most ppl try to follow. (of course if we look at how it is called in StateManager.js we can see that it is called with 'new' and therefore is used as a constructor)

 

the template is basically setting up four 'States', adding them to the game and then starting the 'Boot' state to kick things off. the Boot state does things like setting up input and setting device specific settings (mobile vs desktop) and then starts the 'Preloader' state. the Preloader loads resources and then passes the wand to the MainMenu state which is where you would display a start menu screen of some kind. when the user takes the appropriate action the MainMenu state then kicks off the 'Game' state which is where the real fun would start (if this were more than just a template)

 

hope that helps

[Arlefreak]

This was a very good answer ! It help me a lot to understand how JS do things thanks.

[rich]

It's also worth adding that you don't have to add all your states up-front like that. I tend to always do it, as most games are small enough that it makes sense, but there's no reason why you couldn't add the rest of the States at the end of your Preloader for example. So long as the object exists before you try to start it, it should be fine. This gives you the flexibility to load a JS file maybe containing a different part of your game, then add it as a state once the load has finished.

[Biggerplay]

everything in the head section is loaded before the body section. (incidentally this is why you don't want to have too much in the head section - users will have to wait until everything there is loaded before they see anything on your page). so all the scripts are loaded by the time the onload handler runs.

 

BasicGame = {}; 

 

creates a javascript object, not a function. (a function actually IS an object, but not vice-versa).

 

the template is using the 'BasicGame' object as a namespace to contain all the things about the game. this keeps you from junking up the global namespace, which is a common source of bugs in javascript. 

 

BasicGame.Boot = function( game ) ...

 

adds a function named 'Boot' (which takes a single argument named 'game') to the BasicGame object. 'game' is passed as an argument because you're probably going to need it for whatever you do in the Boot function. In this case the function is empty, so we can only presume that it probably is intended to be a constructor because it starts with a capital letter - this is a common javascript idiom that most ppl try to follow. (of course if we look at how it is called in StateManager.js we can see that it is called with 'new' and therefore is used as a constructor)

 

the template is basically setting up four 'States', adding them to the game and then starting the 'Boot' state to kick things off. the Boot state does things like setting up input and setting device specific settings (mobile vs desktop) and then starts the 'Preloader' state. the Preloader loads resources and then passes the wand to the MainMenu state which is where you would display a start menu screen of some kind. when the user takes the appropriate action the MainMenu state then kicks off the 'Game' state which is where the real fun would start (if this were more than just a template)

 

hope that helps

 

Thanks for this reply, that helps me along a bit.

 

In regards to creating functions.

 

This then creates a function.

BasicGame.Boot = function (game) {};

But then why is this also needed to create functions...

BasicGame.Boot.prototype = {	preload: function () {

What's the difference between the 2 ways to create a function?

 

Also the names of the functions that are defined, "preload", "create", "update" etc are these already defined/used by phaser, which is they have to be those names? as I can't see where those functions are called otherwise.

[jcs]

actually (techinically) both of these are creating a function in the same way, which is a function expression. the other way is a function statement, which looks like

function foo( x ){ /* do something */ }

but that's being technical

 

the difference that you're seeing is that the first example is adding the function to an existing object via the '.' (dot) notation. e.g.

BasicGame.Boot = function() {};

while the second is using an object-literal (the "{}" notation). e.g.

BasicGame.Boot.prototype = { preload : function() {} };

the first (dot notation) is adding a function to an object that already exists, while the second is both creating a new object with the object-literal ("{}"s) and adding a property to it (which happens to be a function).

 

confusing the mix further is that the second, object-literal example is creating a prototype object, which serves as the basis for creating further objects.

 

I strongly recommend that you read some documents on the javascript language. an excellent resource is the Mozilla foundation:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

 

in particular this section:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

 

will help explain the issues / questions you have about the above

 

also highly recommended (after gaining a better understanding of the language, perhaps) is Douglas Crockford's book "JavaScript: The Good Parts", as he details the parts of the language that are likely to cause trouble (sadly there are lots of them) and how to avoid them.

 

 

regarding the State functions (preload, create, et al) and how they are used, see this post by Rich: http://www.html5gamedevs.com/topic/1372-phaser-function-order-reserved-names-and-special-uses/

 

 

good luck!

[gregmax17]

I have a question in relation to this... but maybe I should make this a new topic?

 

Anyways, how would I make a preloader for all my states to be the same? Should I just make a global function that does the rendering or should I use the PIXI.Preloader class?

 

I would like to do: fade to loader, show the loader (and a minimum amount of time to show this), fade out of loader, fade to new scene whether it being the or menu, etc.

 

Best approach for this?

[Biggerplay]

@jcs

 

Thanks again for very helpful information, I think I'm begining to grasp what's going on with JS, more of these languages all do the same things it's just the setting up/syntax which is different.

 

So the .js files at the top of the index.html page, these are all loaded in first, and are they run as soon as they are loaded? or does say the boot.js file only create the boot object from this line "game.state.start('Boot');" ?

 

If I wanted to create a Player, Level and Hud object such as the tutorial here Tutorial: How to organize your Javascript code into classes using Phaser HTML5 game framework would I load those .js files in the index page in the header with everything else? or would they be loaded via the game.js file?

[jcs]

@Biggerplay:

 

web browsers run the javascript code as they load it (there's no differentiation between "loading" and "executing" as far as the browser is concerned. if you want to 'delay load' or 'delay execute' code you have to handle that yourself). waiting for javascript code to load & execute is one of the few things that the browser does that (seems) synchronous.

 

you can load additional javascript files however you'd like, but the easiest way is to use script tags in the html.

[Biggerplay]

More questions about the basic template.

 

Why is game passed in as a variable to the functions? couldn't it be a global variable? although I remember reading somewhere else that's not a good approach?

 

In the startGame and quitGame functions a pointer var is passed in, what's that for? as I can't see where it's used actually in the function.

 

Why are the preloader assets loaded in the boot.js file and not in the preload function of the preloader.js file? (or even in the "BasicGame.Preloader = function (game) {}" function?)

 

In the preload function of the Player.js object that the tutorial I linked to in my previous post contains, there is this line...

preload: function () {		this.game.load.spritesheet('dude', 'assets/dude.png', 32, 48);	},

But the template is loading all of the assets in during the preload function of the preloader.js file, is there a reason for one approach over the other? If I put the loading of the players assets in the preload function of the player.js file and then set up of the player.js in my game.js file with this...

 player = new Player(game);    player.preload();

and then If I'm switching between states say from game.js to mainMenu, and then back to game.js will the player.js object be set up all over again and if it is, will it attempt to preload the player assets all over again? which is something I would of thought is not good?

[jcs]

global variables are bad programming practice in general, and even more so in a web environment where you may not be in control over what else appears on the web page - one conflicting global variable name on a page can wreak havok on everything. even inside a namespace/library there can be conflicts. if Rich were to use a library-level 'game' variable inside Phaser, he would be forcing you to write your code in a certain way, instead of letting you call the variable what you want and define it where you want. he would also have to be forcing you to assign a value to a variable *inside* Phaser (e.g. 'Phaser.game'), which other parts of Phaser need, and would have to ensure via the library that you set it at the right time and place. none of these things would be good...

 

the boot state gives you a place to do all those things that precede everything else in the game ("booting up"). you can, for instance, load assets here that are going to be used continuously throughout the game (e.g. a 'loading' graphic that all the other preloaders are going to use, a font that is going to be used in all the states etc etc)

 

each state can then load the assets that are unique to it (or perhaps can't be determined to be shared, for instance if you load a 'level' file for each state and it specified what additional assets you need to load). if your 'player' assets were used in every level, then yes, it's redundant to re-load them at the start of every game state. if they changed state-to-state, however, you might need to re-load for each state.

 

Phaser gives you the flexibility to do this however you want or need to. you don't even have to make use of the preload function at all, if you didn't want to. the template is just showing an example of how folks commonly set-up their games - you're under no obligation to follow it slavishly, or even follow it at all.

[rich]

In the startGame and quitGame functions a pointer var is passed in, what's that for? as I can't see where it's used actually in the function.

 

Why are the preloader assets loaded in the boot.js file and not in the preload function of the preloader.js file? (or even in the "BasicGame.Preloader = function (game) {}" function?)

 

1) Simply to show that these functions are sent the Pointer as a parameter, as there are lots of cases where it's very useful to have.

 

2) Because most games use a graphical preloader bar + background as part of the preload sequence - and you have to have those assets ready before you begin the preload as you can't bail out half-way. I guess technically what you could do is stick them first in the preload list and then in the loadUpdate and loadRender functions check if they are loaded before creating sprites to display them. But it seems like a lot of effort to me vs. having a boot state

[marzipanlabs]

Oops, I meant to post to another thread. I'm not sure how to delete my post now. This was a good thread though and helped me understand working with javascript objects w/r/t Phaser state management.