Voltar para: Games com Phaser + Reactjs

🎯 Objetivos da Lição

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

• Criar emissores de partículas personalizados
• Controlar física e comportamento das partículas
• Aplicar efeitos combinados (shake, zoom, flash)
• Utilizar múltiplas camadas de impacto visual
• Criar efeitos de explosão, rastro e power-up
• Aplicar pós-processamento básico com câmera
• Integrar efeitos com eventos do jogo

---

🧠 Conteúdo

---

✨ 1. Sistema de Partículas Avançado no Phaser

Partículas não são imagens soltas.
São sistemas controlados por emissores.

---

🔹 Criando sistema de partículas

const particles = this.add.particles("spark");

---

🔹 Configuração detalhada do emissor

const emitter = particles.createEmitter({
  speed: { min: -200, max: 200 },
  angle: { min: 0, max: 360 },
  scale: { start: 1, end: 0 },
  alpha: { start: 1, end: 0 },
  lifespan: 600,
  quantity: 15,
  gravityY: 200,
  blendMode: "ADD"
});

Explicação técnica:

Propriedade	Função
speed	Velocidade inicial
angle	Direção de emissão
scale	Tamanho inicial/final
alpha	Transparência
lifespan	Tempo de vida
gravityY	Gravidade aplicada
blendMode	Tipo de mistura visual

---

🔹 Explodindo partículas sob demanda

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

Ideal para:

• Derrota de inimigo
• Coleta
• Impacto especial

---

💥 2. Efeitos de Explosão Cinemática

4

---

Combinar múltiplos efeitos cria sensação de peso:

this.cameras.main.shake(200, 0.015);
this.cameras.main.flash(200, 255, 255, 255);
emitter.explode(40, enemy.x, enemy.y);

Isso gera:

• Impacto visual
• Movimento da tela
• Brilho momentâneo
• Energia explosiva

Camadas criam intensidade.

---

🌪 3. Efeito de Rastro (Trail Effect)

Ideal para:

• Tiro rápido
• Dash
• Poder especial

---

🔹 Emissor preso ao jogador

const trail = particles.createEmitter({
  speed: 0,
  scale: { start: 0.5, end: 0 },
  alpha: { start: 0.7, end: 0 },
  lifespan: 300,
  frequency: 50
});trail.startFollow(player);

Isso cria um rastro contínuo.

---

⚡ 4. Efeito de Power-Up Visual

Quando jogador ativa poder:

player.setScale(1.2);this.tweens.add({
  targets: player,
  scale: 1,
  duration: 300,
  ease: "Bounce"
});

Podemos combinar com:

this.cameras.main.zoomTo(1.2, 200);

Zoom temporário amplifica sensação de poder.

---

🎥 5. Pós-processamento com Câmera

Phaser permite efeitos via câmera.

---

🔹 Zoom progressivo

this.cameras.main.zoom = 1.1;

---

🔹 Fade In / Fade Out

this.cameras.main.fadeOut(500, 0, 0, 0);

Ótimo para:

• Transição de fase
• Game Over
• Cena de vitória

---

🧩 6. Combinação Profissional de Impacto

Impacto ideal usa:

1. Som
2. Partículas
3. Shake
4. Flash
5. Pequena pausa

Exemplo:

this.physics.pause();
this.time.delayedCall(100, () => {
  this.physics.resume();
});

Essa micro pausa cria efeito de peso.

---

🗂 Organização de Recursos

/assets
   /particles
   /effects
   /sprites

Boas práticas:

✔ Usar texturas pequenas para partículas
✔ Evitar partículas excessivas simultâneas
✔ Controlar duração curta
✔ Reutilizar emissores quando possível

---

🧪 Atividade Prática

Parte 1 – Explosão

• Criar efeito de explosão ao derrotar inimigo
• Adicionar shake leve
• Adicionar flash rápido

---

Parte 2 – Rastro

• Criar rastro ao personagem se mover
• Ajustar transparência
• Ajustar duração

---

Parte 3 – Power-Up

• Implementar aumento temporário de escala
• Criar zoom leve da câmera
• Retornar ao normal após tempo definido

---

🏆 Resultado Esperado

Ao final da aula o aluno deverá:

✅ Dominar criação de emissores de partículas
✅ Criar efeitos visuais combinados
✅ Aplicar impacto cinematográfico
✅ Controlar câmera para reforço visual
✅ Entender como efeitos elevam qualidade do jogo