Entendendo o Phaser State

Durante esses dias estou usando o Phaser para uma série de projetos, e um recurso que eu achei muito interessante é o gerenciamento de estado (State).

Como podemos usar os estados do Phaser no desenvolvimento de jogos? Basicamente, se você dividir um jogo em “blocos”, como tela de abertura, menu principal, o jogo em si e assim por diante, cada um desses “blocos” pode ser desenvolvido como um estado. É um ótimo recurso para gerenciar estágios também.

Nada que você não pode fazer com a simples codificação, mas se você considerar com a gestão de estado é possível limpar a memória, liberar recursos, remover ouvintes e gerencia a coleta de lixo, você definitivamente vai querer usá-los em seus jogos para obter um bom desempenho.

Um exemplo que usei para estudar esta classe foi no projeto Resgate Space.

Neste projeto existem basicamente 4 estados que seriam o pré carregamento, menu principal, o jogo e uma tela de seleção de personagens.
Neste jogo cada tela representaria um estado, más para tornar o desenvolvimento mais organizado também temos o estado main, boot e preload, totalizando assim 7 estados no total, veja abaixo:

O principal arquivo aqui é o main.js, ele é o responsável por criar os estados (states) o chamar o próximo passo que seria o Boot.

var SpaceHipster = SpaceHipster || {};

SpaceHipster.game = new Phaser.Game(600, 400, Phaser.AUTO, 'game');

SpaceHipster.game.state.add('Boot', SpaceHipster.Boot);
SpaceHipster.game.state.add('Preload', SpaceHipster.Preload);
SpaceHipster.game.state.add('MainMenu', SpaceHipster.MainMenu);
SpaceHipster.game.state.add('Game', SpaceHipster.Game);
SpaceHipster.game.state.add('Char', SpaceHipster.Char);
SpaceHipster.game.state.add('spriteMap', SpaceHipster.spriteMap);

SpaceHipster.game.state.start('Boot');

No Boot será dado inicio a tela de load e realizada as configurações básicas do jogo, por fim o Preload será iniciado.

var SpaceHipster = SpaceHipster || {};

SpaceHipster.Boot = function(){};

SpaceHipster.Boot.prototype = {
	preload: function() {
		//assets we'll use in the loading screen
		this.load.image('logo', 'assets/images/logo-temp-table.png');
		this.load.image('preloadbar', 'assets/images/preloader-bar.png');
	},
	create: function() {
		//loading screen will have a white background
		this.game.stage.backgroundColor = '#fff';
		
		//scaling options
		//this.scale.scaleMode = Phaser.ScaleManager.RESIZE;
		this.scale.minWidth = 240;
		this.scale.minHeight = 170;
		this.scale.maxWidth = 2880;
		this.scale.maxHeight = 1920;
		
		//have the game centered horizontally
		this.scale.pageAlignHorizontally = true;
		
		//physics system for movement
		this.game.physics.startSystem(Phaser.Physics.ARCADE);
		
		this.state.start('Preload');
	}
};

O Preload é responsável por carregar os assets como som, imagens, sprites e etc, quando o load é concluído é dado start no estado responsável por criar e exibir o menu.

var SpaceHipster = SpaceHipster || {};

//loading the game assets
SpaceHipster.Preload = function(){};

SpaceHipster.Preload.prototype = {
  preload: function() {
    //show loading screen
    this.splash = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo');
    this.splash.anchor.setTo(0.5);
    
    this.preloadBar = this.add.sprite(this.game.world.centerX, this.game.world.centerY + 128, 'preloadbar');
    this.preloadBar.anchor.setTo(0.5);
    
    this.load.setPreloadSprite(this.preloadBar);
    
    //load game assets
    this.load.image('space', 'assets/images/space.png');
    this.load.image('rock', 'assets/images/rock.png');
    this.load.image('button', 'assets/buttons/btn-iniciar.png', 114, 40);
    this.load.image('button-st', 'assets/buttons/button-st.png', 155, 34);
    this.load.image('playerParticle', 'assets/images/player-particle.png');
    this.load.spritesheet('playership', 'assets/images/player.png', 12, 12);
    this.load.spritesheet('power', 'assets/images/power.png', 12, 12);
    this.load.audio('collect', 'assets/audio/collect.ogg');
    this.load.audio('explosion', 'assets/audio/explosion.ogg');
    
    this.load.spritesheet('body-m', 'assets/sprites/lord-masc.png', 80, 115);
    this.load.spritesheet('body-f', 'assets/sprites/lord-fem.png', 54, 90);
    this.load.spritesheet('head-m', 'assets/sprites/head-black-masc.png', 50, 65);
    this.load.spritesheet('head-f', 'assets/sprites/head-black-fem.png', 50, 65);

  },
  create: function() {
    this.state.start('MainMenu');
  }
};