Managing Multiple States: Phaser

Today lets learn how we can manage multiple states in Phaser. We can divide a game into several related modules and then link them up, so that they can communicate and produce meaningful results. By doing this we can handle large projects in a much better way.

You can see how a simple state can be written to keep the modularity of a game application: State Manager: Phaser

Modularity is the degree to which a system’s components may be separated and recombined.

Video Tutorial List At One Place:
Phaser Video Tutorial List: Game Framework

Managing Multiple States In Phaser

About the Game Module
It’s a simple module where-in the first screen a menu appears with 2 items in it:
1. Blue
2. Red

User can click and select any color. If the user selects Blue, then Blue state is started else if the user selects Red, then Red State is started. Blue and Red states simply display a message with their respective background color and also has a Menu link clicking on which brings the user back to the main menu.

This video tutorial simply demonstrates using multiple states in a phaser game application.

HTML File – index.html

< !DOCTYPE html>

Here we have linked phaser library followed by Menu State file(Menu.js), Blue State file(Blue.js) and Red State File(Red.js). And before closing body tag we’ve Main.js which is not a state file, but simply a file which is used to create Phaser.Game() instance and to add states to that instance. Main.js is also used to kick-start the game, by stating the first state(Menu State – Menu.js).

Main.js file source code

var game = new Phaser.Game(400, 400, Phaser.AUTO);
    game.state.add('Menu', Technotip.Menu);
    game.state.add('Blue', Technotip.Blue);
    game.state.add('Red', Technotip.Red);
    game.state.start('Menu');

We create game object, which is an instance of Phaser.Game() and by using Phaser.AUTO option we let phaser select the renderer for the game – WebGL or Canvas. Next we add all the states we create for the game and finally start the Menu state from were we select and run other states – based on user choice.

Menu.js file source code – Menu State

var Technotip = {};

Technotip.Menu = function(game){
    var text1;
    var text2;
};

Technotip.Menu.prototype = {
   create: function(){
        this.game.stage.backgroundColor = '#000';
        text1 = this.add.text(10, 10, '1. Blue', {fill: "#ffffff"});
        text2 = this.add.text(10, 40, '2. Red', {fill: "#ffffff"});

        text1.inputEnabled = true;
        text1.events.onInputDown.add(this.blue, this);

        text2.inputEnabled = true;
        text2.events.onInputDown.add(this.red, this);
   },
   blue: function(){
        this.state.start('Blue'); 
   },
   red: function(){
        this.state.start('Red');     
   }
};

This is the state which is started in Main.js file. Here we create Technotip object and create 2 menu items using this.add.text() method. We also enable input on these two texts(menu items). If the user touches/clicks first option, then we call blue method, which in-turn starts Blue state. Similarly, if the user selects second option which calls red method, which in-turn starts Red state.

Related Read:
Passing Parameter To Custom Methods: Phaser

Blue.js file source code – Blue State

Technotip.Blue = function(game){
    var text;
};

Technotip.Blue.prototype = {
   create: function() {
        this.game.stage.backgroundColor = "#051efa";
        this.add.text(10, 10, 'Blue Stage', {fill: '#fff'});
        text = this.add.text(this.world.centerX,
                             this.world.centerY, 'Menu', {fill: '#fff'});

        text.inputEnabled = true;
        text.events.onInputDown.add(this.go, this);
   },
   go: function(){
       this.state.start('Menu');
   }
};

Here we simply set the background color of the game stage to blue and display a menu link which will take the user back to main menu of the game. This is done by enabling input on the text menu.

Similarly,
Red.js file source code – Red State

Technotip.Red = function(game){
    var text;
};

Technotip.Red.prototype = {
   create: function() {
        this.game.stage.backgroundColor = "#ff0000";
        this.add.text(10, 10, 'Red Stage', {fill: '#fff'});
        text = this.add.text(this.world.centerX,
                             this.world.centerY, 'Menu', {fill: '#fff'});

        text.inputEnabled = true;
        text.events.onInputDown.add(this.go, this);
   },
   go: function(){
       this.state.start('Menu');
   }
};

..when the user selects Red from the menu, the Red state starts and it displays red background and option to navigate to the main menu of the game application.

This is a simple phaser application to demonstrate managing multiple states in phaser. There is no rule as to how you need to divide the code into modules/states – you can do as many or as little as you want. The objective of modular programming is to minimize the complexity and help manage the code at a later stage of project life cycle.