Voltar para: Games com Phaser + Reactjs

(Scene Manager, Transições, Boot, Menu, Gameplay)

Em um jogo real, raramente existe apenas uma única tela.
Jogos possuem menus, telas de carregamento, gameplay, pausa, créditos, game over e muito mais.

Para organizar tudo isso, o Phaser utiliza um sistema chamado Scenes (Cenas).

As cenas funcionam como blocos de estado do jogo, cada um responsável por uma parte específica da experiência.

🎯 Objetivos da Lição

Ao final desta aula o aluno será capaz de:

Entender o conceito de Scene (Cena)
Compreender o papel do Scene Manager
Organizar diferentes estados do jogo
Entender a função das cenas Boot, Menu e Gameplay
Compreender como funcionam transições entre cenas
Estruturar jogos com múltiplas telas

🧠 O que é uma Scene

Uma Scene é uma parte independente do jogo que controla:

objetos na tela
lógica de atualização
entrada do jogador
renderização
eventos

Cada cena possui seu próprio ciclo de vida.

🎮 Exemplos de cenas em jogos

A maioria dos jogos possui várias cenas diferentes.

Exemplo de fluxo típico:

Boot
 ↓
Menu Principal
 ↓
Gameplay
 ↓
Game Over
 ↓
Menu

Cada uma dessas telas pode ser representada por uma Scene separada.

🧩 Por que usar Scenes

Separar o jogo em cenas traz várias vantagens:

✔ organização do projeto
✔ separação de responsabilidades
✔ facilidade de manutenção
✔ reutilização de lógica
✔ controle claro do estado do jogo

Sem esse sistema, o código do jogo rapidamente se tornaria confuso e difícil de manter.

⚙️ Scene Manager

O Scene Manager é o sistema responsável por controlar todas as cenas do jogo.

Ele gerencia:

iniciar cenas
pausar cenas
parar cenas
alternar entre cenas
rodar múltiplas cenas ao mesmo tempo

O Scene Manager funciona como um diretor de teatro, decidindo qual cena está ativa no palco.

🎭 Estados do jogo

Em desenvolvimento de jogos, é comum dividir o jogo em estados.

Esses estados representam momentos da experiência do jogador.

Estados comuns em jogos

Estado	Função
Boot	inicialização do jogo
Loading	carregamento de recursos
Menu	interface inicial
Gameplay	jogo principal
Pause	pausa do jogo
Game Over	tela de derrota
Credits	créditos

Cada estado geralmente corresponde a uma Scene.

🚀 Cena Boot

A Boot Scene é a primeira cena do jogo.

Ela é responsável por tarefas iniciais como:

configurar o jogo
iniciar carregamento de assets
preparar sistemas essenciais

Essa cena geralmente é muito rápida.

Fluxo típico:

Boot → Loading → Menu

📦 Cena Loading

Em jogos maiores existe uma cena específica para carregamento de assets.

Assets incluem:

imagens
spritesheets
áudio
fontes
mapas

Essa cena mostra ao jogador um indicador de progresso.

🧭 Cena Menu

A cena de menu é onde o jogador pode:

iniciar o jogo
acessar opções
ver créditos
configurar controles

Essa cena normalmente contém:

botões
textos
animações de interface

🎮 Cena Gameplay

A Gameplay Scene é onde o jogo realmente acontece.

Ela controla:

personagem
inimigos
física
colisões
pontuação
lógica de vitória ou derrota

Essa é normalmente a cena mais complexa do jogo.

🧠 Ciclo de vida de uma Scene

Cada cena no Phaser possui um lifecycle.

Os métodos principais incluem:

Método	Função
init	inicialização
preload	carregar assets
create	criar objetos
update	atualizar lógica

Fluxo do ciclo de vida

init()
 ↓
preload()
 ↓
create()
 ↓
update() (loop contínuo)

🔄 Troca de cenas

O Scene Manager permite trocar de cena quando necessário.

Exemplos comuns:

clicar em Start Game
morrer no jogo
terminar uma fase

Fluxo de troca de cenas:

Menu → Gameplay
Gameplay → Game Over
Game Over → Menu

🎬 Transições entre cenas

Trocar cenas abruptamente pode ser estranho visualmente.

Por isso muitos jogos utilizam transições suaves.

Tipos comuns incluem:

fade in / fade out
deslizamento
zoom
dissolução

Essas transições ajudam a tornar a experiência mais fluida e profissional.

🎮 Exemplo clássico de múltiplas cenas

Jogos modernos frequentemente possuem muitas telas.

Um exemplo famoso é:

The Legend of Zelda: A Link to the Past

O jogo alterna constantemente entre:

menus
mapas
combate
inventário

Cada um desses sistemas pode ser representado por cenas separadas.

🧠 Scenes rodando simultaneamente

O Phaser também permite que múltiplas cenas rodem ao mesmo tempo.

Isso é útil para sistemas como:

HUD (interface do jogador)
menus de pausa
overlays
inventário

Exemplo:

Gameplay Scene
   +
HUD Scene

A HUD pode permanecer ativa enquanto o gameplay continua.

📂 Estrutura comum de Scenes no projeto

Projetos organizados geralmente possuem uma pasta específica para cenas.

Exemplo conceitual:

src
 ├── scenes
 │   ├── BootScene.js
 │   ├── MenuScene.js
 │   ├── GameScene.js
 │   └── GameOverScene.js

Essa separação facilita a manutenção do projeto.

⚠️ Erros comuns ao trabalhar com Scenes

Iniciantes frequentemente cometem alguns erros.

Colocar toda lógica em uma única Scene

Isso gera arquivos gigantes e difíceis de manter.

Não separar responsabilidades

Menus, gameplay e sistemas diferentes devem ser cenas diferentes.

Recarregar assets desnecessariamente

Assets geralmente devem ser carregados uma única vez.

🧠 Boas práticas

✔ separar cada tela em uma cena
✔ manter cenas pequenas e organizadas
✔ usar cenas paralelas para HUD
✔ controlar transições cuidadosamente
✔ evitar duplicação de assets

🎮 Exemplo de fluxo completo de jogo

Um jogo simples pode ter o seguinte fluxo:

Boot
 ↓
Loading
 ↓
Menu
 ↓
Gameplay
 ↓
Game Over
 ↓
Menu

Esse tipo de estrutura é usado em praticamente todos os jogos.

🧠 Conceitos fixados

Após essa aula o aluno compreende:

o que é uma Scene
como o Scene Manager funciona
como estruturar estados de jogo
o papel de Boot, Menu e Gameplay
como cenas podem interagir
como jogos organizam sua estrutura interna

🎓 Conclusão

O sistema de Scenes é um dos pilares da arquitetura do Phaser.

Ele permite dividir o jogo em partes independentes como:

inicialização
menus
gameplay
telas de resultado

O Scene Manager controla essas partes e permite alternar entre elas de forma organizada.

Dominar o sistema de cenas é essencial para construir jogos estruturados, escaláveis e profissionais.