Voltar para: Games com Phaser + Reactjs

🎯 Objetivos da Lição

Ao final da aula, o aluno será capaz de:

• Entender o ciclo preload(), create() e update()
• Criar múltiplas Scenes
• Organizar estrutura de jogo
• Implementar troca de telas

---

🔄 Parte 1 – Ciclo de Vida da Scene

🧩 preload()

Responsável por carregar assets antes do jogo iniciar.

preload() {
  this.load.image("logo", "assets/logo.png");
}

Tudo que precisa ser carregado antes de aparecer na tela vai aqui.

---

🧩 create()

Executado uma única vez quando a cena inicia.

create() {
  this.add.text(400, 300, "Menu", { fontSize: "32px" }).setOrigin(0.5);
}

Aqui criamos objetos, textos, sprites e configuramos eventos.

---

🧩 update()

Executado a cada frame do jogo.

update() {
  // lógica contínua
}

Movimentação, física, animação e verificações constantes ficam aqui.

---

🏗 Parte 2 – Organização de Múltiplas Scenes

Estrutura recomendada:

src/
 ├── scenes/
 │     ├── MenuScene.js
 │     └── GameScene.js
 └── main.js

Separar cenas mantém o projeto escalável e profissional.

---

🎯 Atividade Prática

Criar Menu + Jogo + Troca de Cena

---

🧩 MenuScene.js

import Phaser from "phaser";export default class MenuScene extends Phaser.Scene {
  constructor() {
    super("MenuScene");
  }  create() {
    this.add.text(400, 250, "Meu Jogo", {
      fontSize: "40px",
      color: "#ffffff"
    }).setOrigin(0.5);    const botao = this.add.text(400, 350, "Iniciar", {
      fontSize: "28px",
      backgroundColor: "#000",
      padding: { x: 10, y: 5 }
    })
    .setOrigin(0.5)
    .setInteractive();    botao.on("pointerdown", () => {
      this.scene.start("GameScene");
    });
  }
}

---

🧩 GameScene.js

import Phaser from "phaser";export default class GameScene extends Phaser.Scene {
  constructor() {
    super("GameScene");
  }  create() {
    this.cameras.main.setBackgroundColor("#1e3a8a");    this.add.text(400, 300, "Cena de Jogo", {
      fontSize: "32px",
      color: "#ffffff"
    }).setOrigin(0.5);
  }
}

---

🧩 main.js

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

---

🧪 Resultado Esperado

1. Jogo inicia na tela de Menu
2. Ao clicar em “Iniciar”
3. Transição ocorre para a Cena de Jogo

Sem reload.
Sem novo HTML.
Apenas troca de Scene interna.

---

🧠 Conceitos Aplicados

• Classes ES6
• Herança (extends Phaser.Scene)
• Identificação de cenas por chave
• Eventos de ponteiro (pointerdown)
• Troca de cena via this.scene.start()
• Organização escalável

---

📝 Critérios de Avaliação

Critério	Peso
Criação correta das Scenes	2
Uso adequado de create()	2
Implementação de interação	2
Troca de cenas funcional	2
Organização de arquivos	2

Total: 10 pontos

---

🚀 Desafio Extra

• Criar botão “Voltar ao Menu” na GameScene
• Adicionar efeito hover no botão
• Criar pequena animação de fade na troca de cena
• Adicionar música ao menu
• Criar terceira cena: GameOver

---

🎮 Conclusão

Agora o jogo tem estrutura real.

Você não tem apenas um canvas.
Você tem um sistema com estados visuais separados e fluxo controlado.

Cada Scene é um universo pequeno.
E você já sabe abrir e fechar universos com uma linha de código.