Question on Phaser States

[Heppell08]

So ive been looking at the way states work and I'm still a bit worse for wear. I'm looking at the example in the source files of phaser for state. 

It has the index, preloader, mainmenu, game and js.php file within. So my question is this:

 

In that index we decalre the js files as standard. Now i get the concept but not the coding. I've been coding happily in one js file for my game with the update, create etc etc. What i'm wanting to do is add main menu, options and end game states. Possibly even go as far as levels etc. 

What  would like mainly is to get an idea on these states but with the style of coding i'm currently doing.

[rich]

A State is simply what you've been doing currently, broken down into one js file / set of functions per State. So the MainMenu has its own preload, create, update, the Game has another, etc.

[Biggerplay]

My post on here contains useful answers

 

http://www.html5gamedevs.com/topic/3303-basic-questions-about-the-basic-template/

 

And someone on here posted this blog post which will be useful.

 

http://s-nambiar.com/tutorials/managing-game-states-phaser/

[Heppell08]

I understand these concepts, what I'm trying to achieve is a way to incorporate this into my game. I looked at both them posts and found more in common with looking at the basic template. I've been messing around but what is catching me out is the top bit per each file where it says BasicGame.Game = (game) etc etc. Now I have tried to get a link and an adding state with mainmenu but getting an error because its not referenced. I have it set as MainGame.MainMenu but MainGame not referenced or something.

[rich]

That's why at the very top of Boot.js it creates the game object:

BasicGame = {};

Then every State from that point on (including Boot) is just a prototype extension on that object.

[Heppell08]

That's all I need rich!! Thanks, I'll get that working in now!! Thanks, can get back to getting this game made now!

[jerome]

Could you mark as aswered if you consider it is so please ?

[Heppell08]

Yeah I'm marking it answered once I get on my computer. I use the forums a lot on my phone and it doesn't allow marking answered. Will be marked answered today

[Heppell08]

Fixed this by going through the basic template in resources folder to link it up better. 

[rich]

You edited your question out, but just so you're clear: it's extremely important which order the js files are included in the html. If you don't put Boot first the rest won't be able to append anything onto the MainGame object.

[jerome]

I think, to be very accurate, the order of execution really matters, more than the <script> tag declaration order.

As you can't plan how the web server will transfer the requested files in the real world, you can't just rely on the <script src="..."> order

 

example :

<script src="boot.js></script><script src="mainMenu"></script>

although boot.js is first asked for, its download could be finished after mainMenu.js one's for many reasons (server delay, bad connexion, file sizes, etc) as the browser emit many parallel http requests

Javascript files are executed only milliseconds after being downloaded.

But remember the js vm is mono-threaded, so scripts are executed sequencially after their download : first downloaded, first executed

 

So you can either concatenate all your js files into one (grunt is your friend), respecting thus their right order, either add some listeners to the DOM to ensure a specific file is already downloaded before another one

 

but on a local web server, the <script> tag order will be probably be enough as recommended  by Rich

 

Whatever the method, you just have to consider that an object must exist before accessing it.

[Heppell08]

Yeah sorry Rich, I posted a huge wall of code to be decyphered and it was basically just copying and pasting the files of basic template but with my extras in. The issue I had was because of 2 issues which when I did the reading was able to repair on my own:

1) Case sensitive and name change because the game.js was spelt game and not Game and was making life difficult for me.

2) Changing the preload files from game.load.image to this.load.image. Was a weird move because ofcourse I've spent most of my phaser career in one js file and never had to modify the way I add or create. This has been fixed and works perfectly.

3) The index was totally foreign. I basically copy and pasted the index from basic template. Works and that's all I need to know. The order will be an issue but at a later date after more testing and adding more states.

So for a descriptive answer on this. Use basic template as a starting point, read all errors in console to fix issues. One of my main problems was no definition because of missing functions etc. These are easily fixable if reading debug which I did. I was pretty close to posting a lot about states but seems overlooking a few bits of code is also a speciality of mine lol.

So thanks for the replies and fixes, I've now got it working as it should after a few head scratchers haha. Thank you