Sistema de Câmera no Phaser
Voltar para: Games com Phaser + Reactjs
(Camera, Follow, Zoom, Bounds, Parallax)
Em muitos jogos o mundo do jogo é maior do que a tela do jogador.
O personagem pode explorar áreas extensas, mapas grandes ou fases completas.
Para mostrar apenas uma parte desse mundo na tela, utilizamos um sistema chamado câmera.
No Phaser, a câmera é responsável por controlar o que o jogador está vendo dentro do mundo do jogo.
Ela funciona como uma janela que observa o mundo virtual.
🎯 Objetivos da Lição
Ao final desta aula o aluno será capaz de:
- Entender o que é uma câmera em jogos
- Compreender o funcionamento da Camera no Phaser
- Entender o sistema Follow
- Aprender sobre Zoom
- Compreender os Bounds da câmera
- Entender o conceito de Parallax
- Saber como câmeras ajudam a construir mundos maiores
🧠 O que é uma câmera em jogos
A câmera determina qual parte do mundo do jogo será exibida na tela.
Imagine que o mundo do jogo é enorme.
MUNDO DO JOGO
[.............................................]
A tela do jogador mostra apenas um pequeno pedaço desse mundo.
[.....TELA DO JOGADOR.....]
A câmera define qual parte está sendo mostrada naquele momento.
🎮 Mundo do jogo vs Tela
É importante entender a diferença entre dois conceitos:
| Conceito | Significado |
|---|---|
| Mundo do jogo | área total onde os objetos existem |
| Tela | área visível ao jogador |
A câmera controla a relação entre esses dois espaços.
🎥 Sistema de câmera no Phaser
Cada Scene no Phaser possui pelo menos uma câmera principal.
Essa câmera é responsável por renderizar todos os objetos visíveis na tela.
Ela pode:
- mover-se pelo mundo
- seguir personagens
- aplicar zoom
- limitar áreas visíveis
- criar efeitos visuais
📍 Coordenadas da câmera
A câmera também possui posição no mundo do jogo.
camera.x
camera.y
Essas coordenadas indicam qual parte do mundo está sendo observada.
🚶 Camera Follow
Um dos recursos mais usados em jogos é o Camera Follow.
Esse sistema faz com que a câmera siga automaticamente um objeto, geralmente o personagem principal.
Exemplo conceitual
MUNDO DO JOGO[ jogador → ]
↑
câmera
Quando o jogador se move:
- a câmera acompanha o movimento
- o jogador permanece próximo do centro da tela
🎮 Jogos que usam Camera Follow
Esse sistema é extremamente comum em jogos de plataforma.
Exemplos famosos:
- Super Mario World
- Celeste
Nesses jogos a câmera acompanha o personagem ao longo da fase.
🧠 Tipos de comportamento de Follow
O comportamento da câmera pode variar.
Follow centralizado
O personagem fica sempre no centro da tela.
Follow com margem
A câmera só se move quando o personagem se aproxima das bordas.
Isso cria uma sensação de movimento mais natural.
Follow suave
A câmera se move com interpolação, criando um movimento suave.
🔍 Zoom da câmera
O Zoom permite aumentar ou diminuir a área visível do jogo.
Zoom In
A câmera aproxima o jogador do cenário.
zoom = 2
Resultado:
- objetos parecem maiores
- campo de visão menor
Zoom Out
A câmera mostra mais área do mundo.
zoom = 0.5
Resultado:
- objetos parecem menores
- maior visão do mapa
🎮 Uso comum de Zoom
Zoom pode ser usado para:
- destacar momentos importantes
- mostrar mapas grandes
- criar efeitos dramáticos
🗺️ Bounds da câmera
Os Bounds definem os limites onde a câmera pode se mover.
Sem limites, a câmera poderia mostrar áreas vazias fora do mapa.
Exemplo conceitual
MAPA DO JOGO┌──────────────────────┐
│ │
│ MUNDO │
│ │
└──────────────────────┘
Os bounds garantem que a câmera não ultrapasse as bordas do mapa.
🎮 Uso comum de Bounds
Bounds são importantes em jogos com mapas fixos como:
- plataformas
- RPGs
- jogos de aventura
Eles garantem que o jogador sempre veja apenas o mundo válido do jogo.
🌄 Parallax
O Parallax é uma técnica visual que cria sensação de profundidade.
Ela funciona movendo diferentes camadas do cenário em velocidades diferentes.
🎨 Exemplo conceitual de Parallax
Imagine três camadas:
céu (move devagar)
montanhas (move médio)
chão (move rápido)
Quando a câmera se move:
- o fundo se move lentamente
- o primeiro plano se move rapidamente
Isso cria uma ilusão de profundidade.
🎮 Jogos famosos que usam Parallax
Esse efeito é extremamente comum em jogos 2D.
Exemplos:
- Sonic the Hedgehog
- Hollow Knight
O parallax ajuda a tornar o cenário mais vivo e dinâmico.
⚙️ Camadas no mundo do jogo
Para criar parallax, o cenário geralmente é dividido em camadas.
Exemplo:
background
midground
foreground
Cada camada se move com velocidade diferente em relação à câmera.
🧠 Câmeras múltiplas
O Phaser também permite usar mais de uma câmera na mesma cena.
Isso pode ser usado para:
- minimapas
- telas divididas
- efeitos cinematográficos
🎮 Exemplo de múltiplas câmeras
Tela principal
+
Mini mapa no canto
A câmera principal mostra o gameplay.
Uma segunda câmera mostra o mapa completo.
⚠️ Erros comuns ao usar câmera
Alguns problemas comuns incluem:
Câmera muito rápida
Movimento brusco pode causar desconforto visual.
Falta de bounds
A câmera mostra áreas vazias fora do mapa.
Zoom exagerado
Pode dificultar a leitura do jogo.
🧠 Boas práticas
✔ usar follow suave
✔ definir limites da câmera
✔ usar zoom com moderação
✔ usar parallax para enriquecer cenários
✔ testar o comportamento da câmera durante o gameplay
🎮 Fluxo típico de câmera em jogos
Em muitos jogos a câmera funciona assim:
jogador se move
↓
câmera segue jogador
↓
bounds impedem sair do mapa
↓
parallax move cenários
Esse sistema cria uma experiência visual fluida.
🧠 Conceitos fixados
Após essa aula o aluno compreende:
- o papel da câmera em jogos
- como funciona o Camera System
- o que é Camera Follow
- como funciona Zoom
- como usar Bounds
- como criar profundidade com Parallax
Esses conceitos são essenciais para jogos com mundos maiores que a tela.
🎓 Conclusão
A câmera é responsável por controlar o ponto de vista do jogador dentro do mundo do jogo.
No Phaser ela oferece diversos recursos poderosos como:
- seguir personagens
- aplicar zoom
- limitar movimento
- criar efeitos visuais
- simular profundidade com parallax
Um bom sistema de câmera transforma um jogo simples em uma experiência fluida, cinematográfica e envolvente.