(Menu Inicial, Opções, Créditos e Seleção de Personagem)

Neste guia vamos construir a estrutura inicial de interface de um jogo usando o Phaser.

O objetivo é criar um fluxo básico comum em praticamente qualquer jogo:

Menu Inicial
   ↓
Seleção de Personagem

Também criaremos duas telas adicionais:

Opções
Créditos

Esse tipo de estrutura é usada em praticamente todos os jogos modernos.

🎯 Objetivo do Projeto

Ao final deste passo a passo o aluno terá um jogo com as seguintes telas:

Boot
 ↓
Menu Inicial
 ├── Iniciar → Seleção de Personagem
 ├── Opções
 └── Créditos

Cada tela será uma Scene separada, mantendo o projeto organizado.

📂 Estrutura de Pastas do Projeto

Primeiro vamos organizar as cenas do jogo.

Estrutura sugerida:

src
 ├── main.js
 ├── scenes
 │   ├── BootScene.js
 │   ├── MenuScene.js
 │   ├── CharacterSelectScene.js
 │   ├── OptionsScene.js
 │   └── CreditsScene.js
 └── assets

Separar as cenas facilita manutenção e escalabilidade.

⚙️ Passo 1 — Criar o BootScene

Essa cena inicia o jogo e carrega assets básicos.

📄 src/scenes/BootScene.js

export default class BootScene extends Phaser.Scene {  constructor() {
    super("BootScene");
  }  preload() {    // Exemplo de assets
    this.load.image("background", "assets/background.png");  }  create() {    this.scene.start("MenuScene");  }}

Após carregar os recursos iniciais, o jogo inicia o menu.

🎮 Passo 2 — Criar a Tela de Menu Inicial

📄 src/scenes/MenuScene.js

Essa cena conterá os botões principais.

export default class MenuScene extends Phaser.Scene {  constructor() {
    super("MenuScene");
  }  create() {    const width = this.cameras.main.width;
    const height = this.cameras.main.height;    this.add.text(width/2, 120, "MEU JOGO", {
      fontSize: "48px",
      color: "#ffffff"
    }).setOrigin(0.5);    const startBtn = this.add.text(width/2, 250, "Iniciar", {
      fontSize: "32px",
      backgroundColor: "#000",
      padding: 10
    }).setOrigin(0.5).setInteractive();    const optionsBtn = this.add.text(width/2, 320, "Opções", {
      fontSize: "32px",
      backgroundColor: "#000",
      padding: 10
    }).setOrigin(0.5).setInteractive();    const creditsBtn = this.add.text(width/2, 390, "Créditos", {
      fontSize: "32px",
      backgroundColor: "#000",
      padding: 10
    }).setOrigin(0.5).setInteractive();    startBtn.on("pointerdown", () => {
      this.scene.start("CharacterSelectScene");
    });    optionsBtn.on("pointerdown", () => {
      this.scene.start("OptionsScene");
    });    creditsBtn.on("pointerdown", () => {
      this.scene.start("CreditsScene");
    });  }}

Agora temos três botões funcionais.

🧙 Passo 3 — Tela de Seleção de Personagem

📄 src/scenes/CharacterSelectScene.js

Essa tela permite escolher o personagem antes do jogo.

export default class CharacterSelectScene extends Phaser.Scene {  constructor() {
    super("CharacterSelectScene");
  }  create() {    const width = this.cameras.main.width;    this.add.text(width/2, 100, "Escolha seu personagem", {
      fontSize: "36px"
    }).setOrigin(0.5);    const warrior = this.add.text(width/2, 220, "Guerreiro", {
      fontSize: "28px",
      backgroundColor: "#333",
      padding: 10
    }).setOrigin(0.5).setInteractive();    const mage = this.add.text(width/2, 300, "Mago", {
      fontSize: "28px",
      backgroundColor: "#333",
      padding: 10
    }).setOrigin(0.5).setInteractive();    warrior.on("pointerdown", () => {      console.log("Jogador escolheu Guerreiro");    });    mage.on("pointerdown", () => {      console.log("Jogador escolheu Mago");    });  }}

Aqui ainda não iniciamos o jogo.
Apenas registramos a escolha.

⚙️ Passo 4 — Tela de Opções

📄 src/scenes/OptionsScene.js

Essa tela possui configurações básicas comuns em jogos.

Configurações comuns incluem:

volume de música
volume de efeitos
modo tela cheia
sensibilidade
idioma

export default class OptionsScene extends Phaser.Scene {  constructor() {
    super("OptionsScene");
  }  create() {    const width = this.cameras.main.width;    this.add.text(width/2, 100, "Opções", {
      fontSize: "40px"
    }).setOrigin(0.5);    this.add.text(width/2, 200, "Volume Música: 80%", {
      fontSize: "24px"
    }).setOrigin(0.5);    this.add.text(width/2, 250, "Volume Efeitos: 70%", {
      fontSize: "24px"
    }).setOrigin(0.5);    this.add.text(width/2, 300, "Tela Cheia: OFF", {
      fontSize: "24px"
    }).setOrigin(0.5);    const backBtn = this.add.text(width/2, 400, "Voltar", {
      fontSize: "28px",
      backgroundColor: "#000",
      padding: 10
    }).setOrigin(0.5).setInteractive();    backBtn.on("pointerdown", () => {
      this.scene.start("MenuScene");
    });  }}

🎬 Passo 5 — Tela de Créditos

📄 src/scenes/CreditsScene.js

Essa tela mostra quem criou o jogo.

Template comum de créditos:

export default class CreditsScene extends Phaser.Scene {  constructor() {
    super("CreditsScene");
  }  create() {    const width = this.cameras.main.width;    this.add.text(width/2, 80, "Créditos", {
      fontSize: "40px"
    }).setOrigin(0.5);    this.add.text(width/2, 180, "Direção", {
      fontSize: "26px"
    }).setOrigin(0.5);    this.add.text(width/2, 210, "Nome do Diretor", {
      fontSize: "22px"
    }).setOrigin(0.5);    this.add.text(width/2, 260, "Programação", {
      fontSize: "26px"
    }).setOrigin(0.5);    this.add.text(width/2, 290, "Nome do Programador", {
      fontSize: "22px"
    }).setOrigin(0.5);    this.add.text(width/2, 340, "Arte", {
      fontSize: "26px"
    }).setOrigin(0.5);    this.add.text(width/2, 370, "Nome do Artista", {
      fontSize: "22px"
    }).setOrigin(0.5);    const backBtn = this.add.text(width/2, 450, "Voltar", {
      fontSize: "28px",
      backgroundColor: "#000",
      padding: 10
    }).setOrigin(0.5).setInteractive();    backBtn.on("pointerdown", () => {
      this.scene.start("MenuScene");
    });  }}

🚀 Passo 6 — Registrar as Scenes no Phaser

📄 src/main.js

import BootScene from "./scenes/BootScene.js";
import MenuScene from "./scenes/MenuScene.js";
import CharacterSelectScene from "./scenes/CharacterSelectScene.js";
import OptionsScene from "./scenes/OptionsScene.js";
import CreditsScene from "./scenes/CreditsScene.js";const config = {  type: Phaser.AUTO,
  width: 800,
  height: 600,  scene: [
    BootScene,
    MenuScene,
    CharacterSelectScene,
    OptionsScene,
    CreditsScene
  ]};new Phaser.Game(config);

Agora todas as cenas estão registradas.

🎮 Resultado Final

Fluxo completo do jogo:

BootScene
   ↓
MenuScene
   ├── Iniciar → CharacterSelectScene
   ├── Opções → OptionsScene
   └── Créditos → CreditsScene

O jogador pode navegar entre as telas.

🧠 Conceitos aprendidos

O aluno aplicou vários conceitos fundamentais do Phaser:

Scenes
Scene Manager
Input (botões clicáveis)
Navegação entre telas
Estrutura de projeto
Interface básica de jogo

🎓 Desafios Extras (Recomendado)

Para melhorar o projeto:

1️⃣ Adicionar efeitos de hover nos botões

Mudar cor quando o mouse passa.

2️⃣ Adicionar sons ao clicar

Som de UI melhora a experiência.

3️⃣ Adicionar animação de transição entre cenas

Fade ou slide.

4️⃣ Criar seleção visual de personagem

Mostrar sprites dos personagens.