Carregador de Mudanças: Desenvolvendo Jogos Arcade de Agilidade com Phaser 3

Carregador de Mudanças: como funciona um arcade de reflexos feito com Phaser 3

Dia de mudança, e as coisas estão caindo. O seu trabalho é correr de um lado para o outro e não deixar nada chegar ao chão. O Carregador de Mudanças é um jogo de reflexos de uma tecla só, e justamente por ser simples ele é um ótimo exemplo de como montar um arcade completo com Phaser 3.

Este artigo passa pelas partes do jogo na ordem em que o Phaser as executa: as cenas, a física, a captura dos itens, a curva de dificuldade e as adaptações para o celular.

Como se joga

• Caixas e vasos caem do alto da tela, um de cada vez.
• Você move o carregador para a esquerda e para a direita: com as setas do teclado ou, no celular, segurando o dedo na metade esquerda ou direita da tela.
• Cada item pego vale 10 pontos.
• Você tem 3 chances. Cada item que cai no chão custa uma, com um som e um tremor de tela.
• ESC volta ao menu.

O placar no topo mostra quatro números: Nível, Chances, Pontos e Vasos. O recorde fica salvo no próprio navegador e aparece no menu.

A estrutura em cenas

Um jogo em Phaser é dividido em cenas, e cada uma cuida de uma etapa. O Carregador tem cinco:

Separar assim deixa cada parte pequena e fácil de mexer. A cena de jogo não precisa saber como o menu funciona; ela só recebe um aviso para começar e, no fim, chama a cena de Game Over passando a pontuação.

Todos os recursos do jogo, incluindo imagens e sons, vão embutidos num único arquivo. Isso torna o carregamento mais pesado na primeira vez, mas elimina dezenas de pedidos separados ao servidor e garante que, quando o jogo abre, está tudo lá.

A física: gravidade e uma zona de captura invisível

O jogo usa a física Arcade do Phaser, a mais simples e rápida das que ele oferece. Ela trata cada objeto como um retângulo e é perfeita para jogos em que não importa a forma exata das coisas, só se elas se tocaram.

A configuração liga uma gravidade de 300 px/s² para baixo:

physics: {
  default: 'arcade',
  arcade: { gravity: { y: 300 } }
}

Por que não usar o próprio personagem para pegar os itens

A solução óbvia seria verificar se o item tocou o sprite do carregador. O problema é que o sprite tem braços, cabeça e pés, e o jogador espera pegar o item com as mãos, não com o pé. Usar o retângulo do sprite inteiro faria o jogo "pegar" coisas que visualmente passaram longe.

O Carregador resolve isso com uma zona de captura invisível de 80 por 80 pixels, posicionada logo acima do personagem, onde estariam os braços:

this.catcher = this.add.zone(0, 0, 80, 80);
this.physics.add.existing(this.catcher);
this.physics.add.overlap(this.catcher, this.items, this.collectItem);

A cada quadro, a zona acompanha o personagem. Quando você está andando com as setas, ela também se adianta 30 pixels na direção do movimento. É um detalhe pequeno que deixa o jogo mais justo: quem corre para pegar um item alcança um pouco antes, como faria uma pessoa esticando os braços.

Quando um item conta como perdido

Um item só é considerado perdido quando passa 100 pixels abaixo da borda da tela. Essa folga evita que um item que ainda está terminando de entrar na zona de captura seja descontado cedo demais.

A curva de dificuldade

Um arcade precisa ficar mais difícil com o tempo, senão vira rotina. O Carregador faz isso com níveis:

spawnItem() {
  this.vases++;
  if (this.vases % 15 === 0) this.level++;

  const bonus = (this.level - 1) * 75;
  item.setVelocityY(Phaser.Math.Between(200 + bonus, 450 + bonus));
}

• Um item novo aparece a cada 1,5 segundo, sempre. O ritmo de chegada não muda.
• Cada item começa a cair com uma velocidade sorteada entre 200 e 450 px/s.
• A cada 15 itens lançados, o nível sobe e essa faixa ganha 75 px/s. No nível 5, os itens já saem entre 500 e 750 px/s.
• A gravidade continua puxando, então todo item acelera enquanto cai.

Por que aumentar a velocidade e não a quantidade? Porque com um item de cada vez o jogo continua legível. O jogador sempre sabe qual é o próximo alvo, e a dificuldade vem de chegar a tempo, não de escolher entre dois itens ao mesmo tempo. É a mesma lógica de muitos arcades clássicos: uma regra só, ficando mais rápida.

A velocidade sorteada também importa. Como cada item cai num ritmo diferente, você não consegue decorar um tempo de reação. Dois itens seguidos podem chegar com intervalos bem diferentes, mesmo nascendo com a mesma distância de tempo.

O ponto de nascimento é sorteado entre 10% e 80% da largura da tela, então os itens nunca aparecem colados nas bordas, onde seria impossível alcançá-los a tempo.

Animação do personagem

O carregador vem de um único spritesheet, uma imagem com vários quadros de 94 por 150 pixels lado a lado. O Phaser monta animações escolhendo quais quadros tocar:

this.anims.create({
  key: 'player_left',
  frames: this.anims.generateFrameNumbers('player', { frames: [2, 4, 6] }),
  frameRate: 12,
  yoyo: true,
  repeat: -1
});

Há uma animação para andar para a esquerda, outra para a direita e dois quadros parados, um olhando para cada lado. O yoyo faz a animação ir e voltar (2, 4, 6, 4, 2...), o que dá a impressão de passos com apenas três desenhos. As caixas também são animadas, com quatro quadros a 8 por segundo.

Jogando no celular

A tela base é de 1024 por 768. Abaixo de 768 pixels de largura, o jogo troca para um layout de celular:

O controle por toque divide a tela ao meio: segurar à esquerda anda para a esquerda, à direita para a direita. Duas setas discretas na tela acendem enquanto o dedo está pressionado, para o jogador ver que o toque foi entendido.

Vidas extras e o portal

Quando as chances acabam, a tela de Game Over mostra a pontuação e oferece recomeçar. Se você estiver com login no portal, aparece também um botão para ganhar mais uma vida: a partida continua de onde parou, com a mesma pontuação e o mesmo nível, e uma chance. Sem login, o botão leva à página de cadastro.

O jogo descobre se você está logado conversando com a página do portal em que está embutido, por mensagens entre a página e o jogo. Assim o jogo não precisa lidar com senhas nem contas.

Resumo

• Phaser 3 com cinco cenas e física Arcade
• Zona de captura de 80×80 acima do personagem, que se adianta na direção do movimento
• Um item a cada 1,5 s; a velocidade sobe 75 px/s a cada 15 itens
• 3 chances, 10 pontos por item, recorde salvo no navegador
• Layout próprio para telas abaixo de 768 px

Jogar o Carregador de Mudanças

Continue lendo

• GG Pong por dentro: a CPU e o multiplayer peer-to-peer
• Virando cartas com CSS 3D: animação para jogos de memória