Phaser States Basics

What is a state in Phaser?

I was helping someone in the Phaser Game Makers Facebook group a couple of weeks ago when the issue of states came up.

In most technical of terms, a state is a class. The Phaser documentation describes it as follows:

This is a base State class which can be extended if you are creating your own game. It provides quick access to common functions such as the camera, cache, input, match, sound and more.

This is great because it sets up things like the preload, create and update functions.  In the most basic sense, with a few exceptions, I like to think of the states as screens.

My basic games will usually include

  • Title State-nice graphic with a play button
  • Main State-where the game lives
  • Over State-game over screen with a play again button

You can see why it is easy to think of states as screens. One of the nice things about states is you can simply restart them. That means to replay the game I simply start the main state from the over state.

Here is a basic state

var StateMain={    
    
   preload:function()
    {
       
    },
    
    create:function()
    {
        
    },
    
    update:function()
    {       
        
    }    
    
}

To add a state to the game we use

game.state.add("StateMain",StateMain);

To start a state use:

game.state.start("StateMain");

I normally use these in a file called main.js

var game;
window.onload = function()
{
    game=new Phaser.Game(480,640,Phaser.AUTO,"ph_game");
	
    game.state.add("StateMain",StateMain);
    game.state.start("StateMain");
}

Here is a quick example of switching between 3 states.

Just click to change states.

The main.js file sets up the states

var game;
window.onload = function()
{

    game=new Phaser.Game(480,320,Phaser.AUTO,"ph_game");

    game.state.add("StateMain",StateMain);
    game.state.add("StateTitle",StateTitle);
    game.state.add("StateOver",StateOver);
    game.state.start("StateTitle");
}

StateTitle.js

var StateTitle = {
    preload: function() {},
    create: function() {
        var t = game.add.text(game.width / 2, game.height / 2, "This is StateTitle. \nClick to change to StateMain",{
            fill:'rgb(255, 255, 255)',backgroundColor: 'rgb(0, 0, 0)'});
        t.anchor.set(0.5, 0.5);
        game.input.onDown.add(this.changeState, this);
    },
    changeState: function() {
        game.state.start("StateMain");
    },
    update: function() {}
}

StateMain.js

var StateMain = {
    preload: function() {},
    create: function() {
        var t = game.add.text(game.width / 2, game.height / 2, "This is StateMain. \n Click to change to StateOver",{
            fill:'rgb(255, 255, 255)',backgroundColor: 'rgb(0, 0, 0)'});
        t.anchor.set(0.5, 0.5);
        game.input.onDown.add(this.changeState, this);
    },
    changeState: function() {
        game.state.start("StateOver");
    },
    update: function() {}
}

StateOver.js

var StateOver = {
    preload: function() {},
    create: function() {
        var t = game.add.text(game.width / 2, game.height / 2, "This is StateOver. \n Click to change to StateTitle", {
            fill:'rgb(255, 255, 255)',backgroundColor: 'rgb(0, 0, 0)'});
        t.anchor.set(0.5, 0.5);
        game.input.onDown.add(this.changeState, this);
    },
    changeState: function() {
        game.state.start("StateTitle");
    },
    update: function() {}
}

As you can see each state is basically the same, but you can make changes to each without effecting the others. If you restart a state any state variables will be reset.  State variables are variables that use the ‘this’ keyword, such as in this.text1=game.add.text(0,0,”My Text”); or this.player=game.add.sprite(game.width/2,game.height/2,”man”);

 

1 thought on “Phaser States Basics”

Leave a Comment