PHASER Game States

When Using the PHASER gaming engine their are several consideration we need to take. The Engine version itself is important we use and I use Phaser v2.9.1 Engine

The file is here

The Engine is actually a file called phaser.min.js and is actually a massive library of functions we call.

Its called at the top of  main HTML file we use in the head section 

Like this :-

<script src="js\phaser.min.js"></script>

I put it in a sub directory called JS but it can equally be in the assets folder or in the root directory (buts that is not very good design).

When you go through the example shown before you see all the code is done with in the actual HTML code within <script> tags to show it is Javascript. In reality this is poor code design and is cumbersome and not very reusable.

To get around this we use game states that are reusable Javascript code segments stored in individual files. We use (at least intially) 3 main pieces of code. These are preload, create and update codes.

These are also imported in the head section of HTML.

<script src="js/preload.js"></script>

<script src="js/create.js"></script>

<script src="js/update.js"></script>

Each code section does different elements but if you look at the tutorial you see all of them shown in the HTML section in the <script> section. By separating them away from the HTML and doing them as separate code we are starting to use true event driven code design which is efficient and reusable.

Here is a link to my code download it and put in on your web server (using the folders it creates or it wont work in the WWW folder on a WAMP server).

Within the HTML file (I use index.html in my example)

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });

game.state.add('Preloader', Preloader);

game.state.add('create', create);

game.state.add('update', update);

game.state.start("Preloader");

One thing to notice / be aware of is each game state calls the next, in my example preloader starts fitst then when it finishes it calls create and then that calls update.

When creating a game with multiple levels you would create separate code for each level (or page). So as each level is complete it calls the next level. 

I will show this happening in my next blog...

Have fun and keep on gaming