Construct do Zero: Efeitos Visuais (Partículas, Blend Modes e Animações de Feedback)

O que são “efeitos de feedback” e por que eles importam

Efeitos visuais de feedback são sinais rápidos que confirmam uma ação do jogador (coletar, levar dano, vencer) sem depender de texto. Em jogos 2D no Construct, esse polimento costuma vir de três frentes: partículas (poeira, faíscas, explosões), animações/tweens por eventos (escala, rotação, fade, “pulo” do ícone) e blend modes (como Additive para brilho). O objetivo é aumentar a clareza e a sensação de impacto, mantendo performance e organização dos eventos.

Partículas: poeira, explosão e trilhas rápidas

Conceito

Partículas são muitos elementos pequenos (pontos/sprites) emitidos em um curto período para simular fenômenos visuais. No Construct, o caminho mais comum é usar o objeto Particles (emissor) e configurar suas propriedades (taxa, vida, velocidade, gravidade, tamanho, cor, opacidade).

Boas práticas rápidas

• Use partículas como “picos”: emita por poucos frames (burst) em vez de manter emissão contínua.
• Limite a quantidade: prefira menos partículas maiores do que muitas minúsculas.
• Desative quando fora da câmera: se o efeito não aparece, não precisa existir.
• Reaproveite emissores: um emissor pode servir para vários efeitos mudando parâmetros antes de emitir.

Passo a passo: poeira ao aterrissar

Objetivo: quando o personagem toca o chão após cair, gerar uma “poeira” curta.

• 1) Crie o objeto: adicione um objeto Particles chamado P_Dust. Coloque-o em uma camada de efeitos (acima do chão, abaixo do HUD).
• 2) Configure o visual: defina cor em tons claros (bege/cinza), tamanho inicial médio e final menor, opacidade caindo até 0, vida curta (ex.: 0.3–0.6s).
• 3) Configure o movimento: velocidade moderada com variação, ângulo espalhado (ex.: 180° a 360° para subir e abrir), gravidade leve para cair.
• 4) Emissão em burst: mantenha a taxa em 0 e use emissão por evento (burst) quando necessário.
• 5) Evento de aterrissagem: quando detectar a transição “no ar → no chão”, posicione o emissor nos pés do personagem e dispare um burst.

Grupo: FX - Poeira (reutilizável)

Condição: Player acabou de tocar o chão (transição)
Ações:
- P_Dust: Set position (Player.X, Player.Y + offset_pés)
- P_Dust: Set angle (270) com variação (ex.: 180..360)
- P_Dust: Burst (quantidade: 12..20)

Dica: a “transição” é a parte importante. Não emita poeira enquanto o jogador estiver andando; emita só quando aterrissa ou dá um dash, para não poluir a tela.

Passo a passo: explosão ao destruir inimigo

• 1) Crie um emissor P_Explosion (pode ser o mesmo objeto com preset diferente).
• 2) Visual: cores quentes (laranja/amarelo), vida curtíssima (0.2–0.4s), tamanho inicial maior e final menor, opacidade rápida.
• 3) Movimento: velocidade alta, ângulo 0–360, sem gravidade ou gravidade leve.
• 4) Evento: no momento em que o inimigo é destruído, posicione e faça burst.

Grupo: FX - Explosão

Condição: Inimigo foi destruído (no mesmo evento da destruição)
Ações:
- P_Explosion: Set position (Inimigo.X, Inimigo.Y)
- P_Explosion: Burst (20..40)

Blend Modes: brilho, energia e destaque

Conceito

Blend mode define como um objeto é “misturado” com o que está atrás dele. Para efeitos, os mais usados são:

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

• Normal: padrão, sem brilho extra.
• Additive: soma luz, ótimo para faíscas, magia, brilho de coleta.
• Multiply: escurece, útil para sombras e vinhetas discretas.

Passo a passo: “glow” ao coletar item

Objetivo: ao coletar, criar um brilho rápido que “estoura” e some.

• 1) Crie um sprite simples (um círculo suave/halo) chamado FX_Glow. Deixe-o invisível por padrão (ou use instâncias criadas na hora).
• 2) Defina Blend Mode do FX_Glow para Additive.
• 3) No evento de coleta: crie o FX_Glow na posição do item, aumente a escala rapidamente e faça fade-out.

Grupo: FX - Coleta

Condição: Player coleta Item
Ações:
- Create FX_Glow at (Item.X, Item.Y)
- FX_Glow: Set scale (0.6)
- FX_Glow: Set opacity (100)
- Tween (ou animação por eventos): Scale to 1.4 em 0.12s (ease out)
- Tween: Opacity to 0 em 0.18s
- After 0.2s: Destroy FX_Glow

Observação: se você não estiver usando um behavior de tween, dá para simular com eventos (ex.: a cada tick reduzir opacidade e ajustar escala), mas tweening tende a ficar mais limpo e previsível.

Tweening por eventos: impacto sem complicar

Conceito

Tweening é a transição suave entre valores (escala, posição, rotação, opacidade) em um tempo curto, geralmente com curvas (ease in/out) para parecer natural. Você pode aplicar tween em: sprites do mundo (hit flash, knockback visual), UI (ícone pulsando) e câmera (shake).

Padrões de tween mais usados

Passo a passo: “pop” no ícone de pontuação ao coletar

Objetivo: ao coletar, o ícone do HUD (ou contador) dá um “pulo” de escala.

• 1) Identifique o alvo: por exemplo, HUD_IconCoin ou HUD_ScoreText.
• 2) No evento de coleta: aplique um tween de escala curto, com ease out.
• 3) Evite empilhar tweens: antes de iniciar, pare/reescreva o tween atual do mesmo tipo (se sua abordagem permitir), para não “inflar” a escala em coletas rápidas.

Grupo: FX - HUD

Condição: Player coleta Item
Ações:
- HUD_IconCoin: Set scale (1.0) (opcional para reset)
- Tween: HUD_IconCoin scale to 1.25 em 0.08s (ease out)
- Tween: HUD_IconCoin scale to 1.0 em 0.12s (ease in)

Shake de câmera: impacto controlado

Conceito

Shake é um deslocamento rápido e temporário da câmera para transmitir impacto. O segredo é: curto, amplitude baixa e decrescendo. Em excesso, cansa e atrapalha leitura.

Passo a passo: shake ao tomar dano

Uma forma simples é aplicar offsets aleatórios pequenos por alguns frames e depois zerar. Se você já tem um objeto/controle de câmera, aplique o offset nele (ou no scroll).

Grupo: FX - Dano

Variáveis sugeridas:
- CameraShakeTime (segundos)
- CameraShakePower (pixels)

Condição: Player toma dano
Ações:
- Set CameraShakeTime = 0.18
- Set CameraShakePower = 8

Condição: CameraShakeTime > 0
Ações:
- Subtract dt from CameraShakeTime
- Set camera offset X = random(-CameraShakePower, CameraShakePower)
- Set camera offset Y = random(-CameraShakePower, CameraShakePower)
- Set CameraShakePower = CameraShakePower * 0.85 (por tick ou por intervalo)

Condição: CameraShakeTime <= 0
Ações:
- Set camera offset X = 0
- Set camera offset Y = 0

Dica: use shake mais forte para explosões e mais leve para dano comum. Para vitória, geralmente não use shake; prefira brilho e confete.

Efeitos de camada/objeto com parcimônia (performance)

O que pesa mais

• Muitas partículas simultâneas (principalmente com vida longa).
• Blend Additive em excesso (muitos objetos brilhando ao mesmo tempo).
• Efeitos por pixel (dependendo do efeito e do dispositivo).
• Tweens em centenas de instâncias ao mesmo tempo.

Checklist prático de otimização

• Defina um “orçamento”: por exemplo, no máximo 1 explosão grande na tela e 2–3 efeitos pequenos simultâneos.
• Vida curta: efeitos de feedback devem durar pouco (0.1–0.6s na maioria).
• Destrua instâncias assim que terminarem (ou recicle).
• Evite loops contínuos de emissão; prefira burst.
• Camada de efeitos separada: facilita desativar/ocultar em momentos específicos e organizar draw order.
• Teste em cenário “pior caso”: várias coletas seguidas, muitos inimigos, explosões em cadeia.

Organização: grupos reutilizáveis de eventos (clareza e manutenção)

Estratégia

Em vez de espalhar ações de efeitos por todo o Event Sheet, crie grupos e padronize entradas com variáveis/flags. Uma abordagem simples:

• Grupo FX - Coleta: tudo que acontece visualmente quando um item é coletado.
• Grupo FX - Dano: flash do player, shake, partículas de impacto.
• Grupo FX - Vitória: confete, brilho, animação do banner/ícone.

Para reutilizar, você pode:

• Usar funções (se estiver usando esse recurso) como FX_PlayCollect(x,y), FX_PlayHit(x,y,dir), FX_PlayWin().
• Ou usar um objeto controlador (ex.: FX_Controller) com variáveis e eventos que disparam efeitos quando uma flag é setada.

Modelo de “assinatura” de efeitos (padrão)

Exercício: 3 efeitos de feedback (coleta, dano, vitória) com grupos reutilizáveis

Objetivo

Implementar três feedbacks visuais e organizar os eventos em grupos para manter o Event Sheet legível.

Preparação (uma vez)

• Crie/tenha disponíveis: P_Dust, P_Explosion (ou P_Sparks), FX_Glow (blend Additive), e opcionalmente FX_Confetti (Particles com cores variadas).
• Crie uma camada FX para efeitos do mundo e uma camada FX_UI para efeitos do HUD (se necessário).
• Crie os grupos: FX - Coleta, FX - Dano, FX - Vitória, e um grupo FX - Util (para shake e helpers).

1) Feedback de coleta

• No evento onde o item é coletado, além de atualizar pontuação, dispare:
• Glow additive no ponto do item
• Pop de escala no ícone/contador do HUD
• Partículas leves (burst pequeno)

Grupo: FX - Coleta

Condição: Item foi coletado
Ações:
- Create FX_Glow at (Item.X, Item.Y)
- FX_Glow: Blend = Additive
- Tween FX_Glow: scale 0.6 → 1.4 (0.12s), opacity 100 → 0 (0.18s)
- P_Dust (ou P_Sparks leve): Set position (Item.X, Item.Y)
- Burst (8..14)
- HUD_IconCoin: punch scale (1.0 → 1.25 → 1.0)

2) Feedback de dano

• Quando o player toma dano:
• Flash rápido (por exemplo, alternar visibilidade/cor/efeito por poucos frames)
• Shake de câmera curto
• Faíscas/impacto (burst pequeno)

Grupo: FX - Dano

Condição: Player tomou dano
Ações:
- Player: iniciar flash (ex.: set effect/opacity por 0.1s)
- Set CameraShakeTime = 0.18
- Set CameraShakePower = 8
- P_Sparks: Set position (Player.X, Player.Y)
- P_Sparks: Burst (10..18)

3) Feedback de vitória

• Quando o estado de vitória é acionado:
• Confete (partículas coloridas) por 0.6–1.2s (ou bursts em sequência)
• Brilho suave additive no centro da tela ou no troféu
• Animação de UI (banner/ícone) com tween de entrada

Grupo: FX - Vitória

Condição: Vitória acionada
Ações:
- Create FX_Glow at (CenterX, CenterY) com Additive
- Tween FX_Glow: opacity 0 → 100 (0.15s) e depois 100 → 0 (0.35s)
- FX_Confetti: Set position (CenterX, TopY)
- FX_Confetti: Burst (40..70)
- UI_VictoryBanner: tween de entrada (Y de fora da tela → posição final, ease out)
- UI_VictoryBanner: punch scale leve (1.0 → 1.08 → 1.0)

Critérios de verificação do exercício

• Os três feedbacks são perceptíveis em menos de 0.5s após o gatilho (coleta/dano) e em até 1.5s na vitória.
• Os efeitos não ficam “ligados” continuamente (sem emissão infinita desnecessária).
• Os eventos de FX estão agrupados e não misturados com regras de gameplay.
• Em coletas repetidas, o HUD não acumula escala indefinidamente (tween controlado/reset).