Voltar para: Games com Phaser + Reactjs

🎯 Objetivos da Lição

Ao final desta lição o aluno será capaz de:

• Carregar e reproduzir efeitos sonoros no Phaser
• Implementar música de fundo com controle de volume
• Criar feedback sonoro para ações do jogador
• Aplicar efeitos visuais de impacto (tint, shake, flash)
• Implementar partículas para reforço visual
• Sincronizar eventos de áudio com lógica de jogo
• Organizar assets de áudio de forma escalável

---

🧠 Conteúdo

---

🔊 1. Sistema de Áudio no Phaser

O Phaser possui suporte nativo via WebAudio.

🔹 Carregando áudio

this.load.audio("jump", "assets/audio/jump.wav");
this.load.audio("bgMusic", "assets/audio/music.mp3");

---

🔹 Tocando efeitos sonoros

this.sound.play("jump");

Ideal para:

• Pulo
• Ataque
• Coleta de item
• Dano

---

🔹 Música de Fundo (Loop)

this.bgMusic = this.sound.add("bgMusic", {
  loop: true,
  volume: 0.5
});this.bgMusic.play();

Boa prática:

• Volume entre 0.3 e 0.6
• Nunca competir com efeitos sonoros

---

🔹 Parar música no Game Over

this.bgMusic.stop();

---

👁️ 2. Feedback Visual

Áudio ativa o ouvido. Feedback visual ativa a atenção.

---

🔹 Efeito de Dano (Tint)

player.setTint(0xff0000);this.time.delayedCall(200, () => {
  player.clearTint();
});

Resposta instantânea à colisão.

---

🔹 Tremor de Tela (Shake)

this.cameras.main.shake(200, 0.01);

Parâmetros:

• 200 → duração em ms
• 0.01 → intensidade

Ótimo para:

• Explosões
• Dano forte
• Impacto pesado

---

🔹 Flash de Tela

this.cameras.main.flash(300, 255, 255, 255);

Pode ser usado para:

• Transição de fase
• Ataque especial
• Power-up

---

✨ 3. Sistema de Partículas

Partículas criam sensação de energia em movimento.

4

---

🔹 Criando emissor de partículas

const particles = this.add.particles("spark");const emitter = particles.createEmitter({
  speed: { min: -100, max: 100 },
  scale: { start: 1, end: 0 },
  lifespan: 500,
  quantity: 20
});

---

🔹 Disparando no local do evento

emitter.explode(20, player.x, player.y);

Aplicações:

• Coleta de moeda
• Derrota de inimigo
• Ataque especial

---

🔁 4. Integração com React (Controle de Som)

Podemos criar controle de áudio fora do canvas.

Exemplo:

Botão React:

<button onClick={toggleSound}>
  Ativar / Desativar Som
</button>

Enviar evento:

window.dispatchEvent(new Event("toggleSound"));

No Phaser:

window.addEventListener("toggleSound", () => {
  this.sound.mute = !this.sound.mute;
});

Separação clara de responsabilidades.

---

🗂 Organização Profissional de Assets

/assets
   /audio
      /sfx
      /music
   /particles

Boas práticas:

✔ Sons curtos em .wav
✔ Música em .mp3 ou .ogg
✔ Normalizar volume dos arquivos
✔ Não usar arquivos excessivamente grandes

---

🧪 Atividade Prática

Parte 1 – Áudio

• Adicionar som de pulo
• Adicionar som de ataque
• Implementar música de fundo em loop
• Parar música no Game Over

---

Parte 2 – Feedback Visual

• Implementar tint vermelho ao sofrer dano
• Implementar shake na câmera
• Criar partícula ao coletar item

---

Parte 3 – Controle Externo

• Criar botão React para mutar som
• Manter arquitetura desacoplada

---

🏆 Resultado Esperado

Ao final da aula o aluno deverá:

✅ Implementar sistema básico de áudio funcional
✅ Utilizar efeitos visuais como reforço de impacto
✅ Criar partículas dinâmicas
✅ Controlar áudio externamente via React
✅ Entender importância de feedback sensorial no game design