Game Loop no Phaser

Voltar para: Games com Phaser + Reactjs

0

Todo jogo digital possui um coração que nunca para de bater.
Esse coração é chamado de Game Loop.

No Phaser o Game Loop é o mecanismo responsável por manter o jogo vivo, atualizando constantemente o mundo do jogo e redesenhando tudo na tela.

Sem esse ciclo contínuo, o jogo seria apenas uma imagem estática.

🎯 Objetivos da Lição

Ao final desta aula o aluno será capaz de:

  • Entender o que é Game Loop
  • Compreender o conceito de FPS
  • Entender Delta Time
  • Compreender como funciona o update()
  • Entender como o sistema de física é sincronizado
  • Aprender por que jogos precisam de controle de tempo

🧠 O que é Game Loop

O Game Loop é um ciclo que se repete continuamente enquanto o jogo está rodando.

Esse ciclo executa três tarefas principais:

1. Processar entrada do jogador
2. Atualizar o estado do jogo
3. Renderizar a tela

Esse processo acontece dezenas de vezes por segundo.

Esse fluxo cria a ilusão de movimento contínuo.

🔄 Estrutura conceitual do Game Loop

De forma simplificada, o loop funciona assim:

while (jogo_está_rodando) {   lerEntradaDoJogador()   atualizarLógicaDoJogo()   atualizarFísica()   atualizarAnimações()   renderizarTela()}

Esse ciclo acontece repetidamente durante toda a execução do jogo.

🎬 FPS – Frames por segundo

FPS significa:

Frames Per Second

Ou seja:

quantas imagens o jogo desenha por segundo

Valores comuns:

FPSExperiência
30 FPSaceitável
60 FPSideal
120 FPSultra fluido

A maioria dos jogos modernos trabalha com:

60 FPS

Isso significa que o jogo desenha:

60 imagens por segundo

Cada imagem é chamada de frame.

🖼️ O que é um Frame

Um frame é simplesmente uma atualização visual da tela.

Imagine um desenho animado.

Cada desenho é uma imagem estática.

Quando exibimos muitas imagens rapidamente, o cérebro interpreta como movimento.

O mesmo acontece nos jogos.

⏱️ Tempo entre frames

Se um jogo roda a 60 FPS, significa que cada frame possui aproximadamente:

1 / 60 segundo

Ou aproximadamente:

16.67 milissegundos

Isso significa que o jogo precisa:

  • atualizar lógica
  • atualizar física
  • renderizar tela

em menos de 16 ms.

Caso contrário, o FPS cai.

⚠️ Problema clássico de iniciantes

Se um jogo depende diretamente do FPS para movimentar objetos, surgem problemas.

Exemplo simples:

personagem.x += 5

Se o jogo roda a:

60 FPS

o personagem anda uma velocidade.

Mas se o jogo roda a:

120 FPS

o personagem anda duas vezes mais rápido.

Isso cria inconsistências.

É aqui que entra o Delta Time.

⏳ Delta Time – O segredo da velocidade consistente

Delta Time representa:

o tempo que passou desde o último frame

Ele permite ajustar movimentos com base no tempo real, não na quantidade de frames.

Isso garante que o jogo funcione igual em qualquer máquina.

📊 Exemplo conceitual

Sem Delta Time:

posição += velocidade

Com Delta Time:

posição += velocidade * delta

Assim a movimentação depende do tempo real, não do FPS.

🎮 Delta Time no Phaser

No Phaser, a função update() recebe dois parâmetros importantes:

update(time, delta)

Significados:

ParâmetroDescrição
timetempo total do jogo
deltatempo desde o último frame

O delta geralmente é medido em milissegundos.

🧠 Exemplo conceitual de movimento

Movimento com Delta Time:

player.x += velocidade * (delta / 1000)

Dividimos por 1000 porque:

1000 ms = 1 segundo

Assim a velocidade passa a ser medida em unidades por segundo.

🔁 Função update()

Dentro de uma Scene do Phaser existe uma função chamada:

update()

Essa função é executada uma vez a cada frame.

Ou seja:

Se o jogo roda a:

60 FPS

então:

update() roda 60 vezes por segundo

🎯 O que acontece dentro do update()

Dentro do update normalmente ficam:

  • movimentação de personagens
  • lógica de inimigos
  • verificação de colisões
  • atualização de HUD
  • controle de câmera

Exemplo conceitual:

update() {   moverPersonagem()   atualizarInimigos()   verificarColisões()   atualizarPontuação()}

⚙️ Physics Timing – Atualização da física

Jogos possuem um sistema separado para física.

A física precisa ser:

  • consistente
  • previsível
  • estável

Para isso muitos motores utilizam timing fixo para física.

🧲 Atualização da física

O sistema de física calcula:

  • gravidade
  • colisões
  • forças
  • movimento

Se a física dependesse totalmente do FPS, o jogo ficaria instável.

Por isso muitos motores usam um Physics Step fixo.

🧠 Conceito de Physics Step

Em vez de atualizar a física a cada frame variável, o motor usa intervalos fixos.

Exemplo:

60 atualizações de física por segundo

Isso garante:

  • colisões consistentes
  • simulação previsível
  • comportamento estável

🎮 Física no Phaser

O Phaser possui dois sistemas principais:

  • Arcade Physics
  • Matter Physics

Ambos são integrados ao Game Loop.

A física normalmente é atualizada antes da renderização.

Fluxo simplificado:

input
↓
update lógica
↓
update física
↓
renderização

🔄 Fluxo completo do Game Loop

Dentro do Phaser o ciclo conceitual funciona assim:

1 Capturar entrada do jogador2 Executar update() da Scene3 Atualizar sistema de física4 Atualizar animações5 Atualizar câmeras6 Renderizar todos os objetos7 Enviar frame para a GPU

Esse ciclo ocorre continuamente.

📉 O que acontece quando o FPS cai

Se o jogo demora muito para processar um frame:

FPS diminui

Consequências:

  • movimento fica travado
  • animações ficam lentas
  • experiência do jogador piora

Por isso otimização é importante.

🚀 Técnicas para manter FPS alto

Boas práticas incluem:

  • evitar cálculos pesados dentro do update
  • reutilizar objetos
  • limitar partículas
  • otimizar colisões
  • reduzir draw calls

Motores como o Phaser utilizam aceleração gráfica via:

  • WebGL
  • HTML5 Canvas

🧠 Conceitos fundamentais fixados

Após compreender Game Loop, o aluno entende:

  • como jogos funcionam internamente
  • por que FPS importa
  • por que Delta Time é essencial
  • como update controla o jogo
  • como física e renderização são sincronizadas

Esses conceitos são fundamentais para qualquer motor de jogos.

🎓 Conclusão

Todo jogo é essencialmente um sistema que atualiza continuamente um mundo virtual.

O Game Loop é responsável por manter esse mundo em funcionamento.

Os conceitos principais são:

FPS
define quantas imagens por segundo são renderizadas

Delta Time
garante movimento consistente independente do hardware

update()
é onde a lógica do jogo acontece

Physics Timing
garante que colisões e movimento sejam estáveis

Dominar esses conceitos transforma a forma como um desenvolvedor pensa sobre jogos.

Não se trata apenas de mover objetos.

Trata-se de controlar o tempo dentro de um universo digital.