Módulo 4: Aprimoramento e Exportação do Jogo

Aula: Efeitos Visuais: Parallax Background e Partículas

Bem-vindos à aula de Efeitos Visuais! 🎉 Nesta lição prática, vamos aprender a adicionar profundidade e dinamismo aos nossos jogos usando duas técnicas poderosas: Parallax Backgrounds e Sistemas de Partículas. Esses efeitos são cruciais para criar uma atmosfera imersiva e dar vida aos seus cenários.

🎯 Objetivos da Aula

Ao final desta aula, você será capaz de:

• Criar e configurar um Parallax Background para adicionar profundidade aos seus cenários.
• Utilizar Sistemas de Partículas (CPUParticles2D) para gerar efeitos visuais dinâmicos como fumaça, fogo, chuva, etc.
• Integrar ambos os efeitos em uma cena de jogo.

1. Introdução aos Efeitos Visuais ✨

No desenvolvimento de jogos, os efeitos visuais não são apenas "bonitos"; eles são ferramentas narrativas e de feedback essenciais.

• Parallax Background: É uma técnica de computação gráfica onde as imagens de fundo se movem em velocidades diferentes das imagens em primeiro plano, criando uma ilusão de profundidade e distância. Pense em como, ao viajar de carro, as árvores próximas passam rapidamente, enquanto as montanhas distantes parecem se mover muito mais devagar.
• Sistemas de Partículas: São usados para simular fenômenos difusos como fumaça, fogo, explosões, chuva, neve, faíscas, poeira, etc. Eles consistem em um grande número de pequenas imagens (partículas) que são emitidas, movem-se, mudam de cor/tamanho e desaparecem, tudo de forma procedural.

Vamos mergulhar nessas ferramentas no Godot!

2. Parallax Background: Criando Profundidade no Cenário 🏞️

O Godot facilita a criação de fundos parallax com os nós ParallaxBackground e ParallaxLayer.

2.1. Entendendo os Nós

• ParallaxBackground: É o nó principal. Ele observa a câmera ativa na cena e ajusta a posição de seus filhos (ParallaxLayer) com base no movimento da câmera.
• ParallaxLayer: É o nó filho que contém os elementos visuais (geralmente Sprite2D ou TextureRect) de uma camada específica do seu background. A mágica do parallax acontece aqui, controlando a velocidade de rolagem de cada camada.

2.2. Exemplo Prático: Construindo um Cenário com Parallax

Vamos criar um cenário simples de floresta com três camadas de profundidade.

Passo a Passo:

1. Crie uma Nova Cena 2D: Adicione um Node2D como raiz e renomeie-o para GameScene.
2. Adicione um ParallaxBackground:
   • Clique com o botão direito em GameScene -> Add Child Node -> ParallaxBackground.
   • Renomeie para BackgroundParallax.
3. Adicione Camadas de Parallax (ParallaxLayer):
   • Clique com o botão direito em BackgroundParallax -> Add Child Node -> ParallaxLayer.
   • Renomeie para LayerDistantMountains.
   • Repita para criar LayerMidTrees e LayerCloseBushes.
4. Adicione os Sprites para Cada Camada:
   • Para cada ParallaxLayer, adicione um Sprite2D como filho.
   • Para este exemplo, você precisará de algumas texturas de fundo. Você pode usar as suas próprias ou encontrar algumas gratuitas online (ex: OpenGameArt). Suponha que você tenha mountains.png, trees.png, bushes.png.
   • Selecione LayerDistantMountains/Sprite2D e arraste mountains.png para a propriedade Texture no Inspector.
   • Faça o mesmo para LayerMidTrees/Sprite2D (trees.png) e LayerCloseBushes/Sprite2D (bushes.png).
   • Ajuste a posição dos Sprite2D dentro de seus ParallaxLayer para que fiquem visíveis na tela.
5. Configure o motion_scale para cada ParallaxLayer:
   • Esta é a propriedade mais importante! Ela define o quão rápido a camada se move em relação à câmera.
   • Selecione LayerDistantMountains. No Inspector, encontre a seção Parallax Layer e defina Motion -> Scale como (0.2, 1.0). (A montanha se move 20% da velocidade horizontal da câmera, mas 100% verticalmente, o que é comum para manter o chão nivelado).
   • Selecione LayerMidTrees. Defina Motion -> Scale como (0.5, 1.0).
   • Selecione LayerCloseBushes. Defina Motion -> Scale como (0.8, 1.0).
   • Dica: Quanto menor o valor x em motion_scale, mais "distante" a camada parecerá.
6. Configure a Câmera:
   • Para que o parallax funcione, precisamos de uma câmera que se mova.
   • Adicione um Camera2D como filho de GameScene (ou do seu Player, se já tiver um).
   • Certifique-se de que Current esteja marcado no Inspector para Camera2D.
   • Para testar, você pode adicionar um CharacterBody2D simples com um Sprite2D e um CollisionShape2D, e fazer a Camera2D ser filha dele, ou simplesmente mover a câmera manualmente no editor para ver o efeito.

Código de Exemplo (GDScript para mover a câmera ou um player):

# Exemplo simples de script para mover um Player e a Camera2D
# Anexe este script ao seu CharacterBody2D (Player)
extends CharacterBody2D
 
@export var speed: float = 100.0
 
func _physics_process(delta: float) -> void:
    var direction_x: float = Input.get_axis("ui_left", "ui_right")
    
    if direction_x != 0:
        velocity.x = direction_x * speed
    else:
        velocity.x = move_toward(velocity.x, 0, speed) # desacelera
    
    move_and_slide()
 
    # Se a Camera2D for filha do Player, ela se moverá automaticamente.
    # Se a Camera2D for separada, você pode fazer o ParallaxBackground
    # seguir a viewport da Camera2D.

Para que o ParallaxBackground siga a câmera, não é necessário código extra se a câmera for a current da Viewport. O ParallaxBackground automaticamente detecta a câmera ativa e ajusta seus filhos.

2.3. Repetição de Texturas com motion_mirroring

Se suas texturas de background são menores que a tela e precisam se repetir, use motion_mirroring.

1. Selecione um ParallaxLayer (ex: LayerCloseBushes).
2. No Inspector, em Parallax Layer, encontre Motion -> Mirroring.
3. Defina o x de Mirroring para a largura da sua textura (bushes.png). Por exemplo, se bushes.png tem 1024 pixels de largura, defina (1024, 0). O Godot duplicará a textura horizontalmente para preencher o espaço.

3. Sistemas de Partículas: Adicionando Vida e Dinamismo 💨

Vamos usar o nó CPUParticles2D para criar efeitos de partículas. Ele é mais simples de configurar para iniciantes do que o GPUParticles2D, que é mais performático para efeitos complexos.

3.1. Entendendo as Propriedades Chave de CPUParticles2D

• Emitting: Liga/desliga a emissão de partículas.
• Amount: O número máximo de partículas ativas a qualquer momento.
• Lifetime: Quanto tempo (em segundos) cada partícula vive.
• One Shot: Se true, emite todas as partículas de uma vez e para. Útil para explosões.
• Preprocess: Simula o sistema de partículas por um tempo antes de começar, útil para efeitos contínuos como fumaça que já deve estar visível ao carregar a cena.
• Texture: A textura (imagem) usada para cada partícula. Pode ser um pequeno círculo, uma estrela, uma gota, etc.
• Direction: Vetor que define a direção inicial das partículas.
• Spread: O ângulo de dispersão em torno da Direction (em graus).
• Gravity: A força da gravidade que afeta as partículas.
• Initial Velocity: A velocidade inicial das partículas.
• Color: Cor inicial das partículas.
• Color Ramp: Um GradientTexture que permite mudar a cor das partículas ao longo de sua Lifetime.
• Scale Amount: O tamanho inicial das partículas.
• Scale Amount Curve: Uma CurveTexture que permite mudar o tamanho das partículas ao longo de sua Lifetime.
• Emission Shape: Define a forma da área de onde as partículas são emitidas (Ponto, Esfera, Caixa, Anel).

3.2. Exemplo Prático: Criando um Efeito de Fumaça

Vamos criar um efeito de fumaça que pode ser anexado a um objeto.

Passo a Passo:

1. Crie um CPUParticles2D:
   • Na sua GameScene, adicione um novo nó CPUParticles2D. Renomeie-o para SmokeParticles.
   • Posicione-o no centro da tela por enquanto.
2. Defina a Texture da Partícula:
   • Você precisará de uma textura para a fumaça. Um pequeno círculo branco ou cinza com bordas suaves (um "blob" suave) funciona bem. Crie um no GIMP/Krita ou encontre um. Salve como smoke_particle.png.
   • No Inspector, em Drawing -> Texture, arraste smoke_particle.png.
3. Configure as Propriedades Básicas:
   • Emitting: Certifique-se de que está true.
   • Amount: 20 (um bom número para fumaça sutil).
   • Lifetime: 2.0 (segundos).
   • Preprocess: 0.5 (para que a fumaça já comece a aparecer).
   • One Shot: false (queremos fumaça contínua).
4. Ajuste o Comportamento da Partícula:
   • Direction: (0, -1) (para subir).
   • Spread: 30 (em graus, para que se espalhe um pouco).
   • Gravity: (0, -20) (uma leve gravidade negativa para ajudar a subir).
   • Initial Velocity -> Value: 20 (velocidade inicial para cima).
   • Angular Velocity -> Value: 10 (para que as partículas girem um pouco).
5. Ajuste Cor e Tamanho ao Longo da Vida:
   • Color: Defina uma cor cinza claro.
   • Color Ramp:
     • Clique na propriedade Color Ramp. Selecione New GradientTexture1D.
     • Clique na nova textura. No painel inferior, clique na aba Gradient.
     • Adicione um ponto no início (cor cinza claro, alpha total 255).
     • Adicione um ponto no meio (cor cinza um pouco mais escuro, alpha total 255).
     • Adicione um ponto no final (cor cinza escuro, alpha 0 para desaparecer).
     • Isso fará a fumaça mudar de cor e desaparecer suavemente.
   • Scale Amount -> Value: 0.5 (começa pequena).
   • Scale Amount Curve:
     • Clique na propriedade Scale Amount Curve. Selecione New CurveTexture.
     • Clique na nova textura. No painel inferior, clique na aba Curve.
     • Desenhe uma curva que comece baixo (0.5), suba para um pico (1.5) e depois desça novamente (0.2) no final da vida útil da partícula. Isso fará a fumaça crescer e depois encolher.
6. Teste o Efeito:
   • Salve a cena e execute. Você deve ver a fumaça subindo e se dispersando.

4. Integração: Parallax e Partículas em Ação 🎮

Agora que você sabe como criar ambos os efeitos, vamos integrá-los em uma cena de jogo.

Imagine que você tem um jogador que se move, e queremos que ele emita poeira ao andar ou faíscas ao pular.

Requisitos:

• Sua GameScene com o ParallaxBackground configurado.
• Um CharacterBody2D (seu jogador) com um Sprite2D e um script de movimento básico.

Passo a Passo:

1. Adicione Partículas ao Jogador:
   • Selecione seu nó CharacterBody2D (Player).
   • Adicione um CPUParticles2D como filho. Renomeie-o para DustParticles.
   • Configure DustParticles para emitir um efeito de poeira:
     • Texture: Um pequeno círculo cinza claro.
     • Emitting: false inicialmente (vamos ativar via script).
     • One Shot: true (para emitir uma vez e parar).
     • Amount: 10-15.
     • Lifetime: 0.5.
     • Direction: (0, 1) (para cair um pouco).
     • Spread: 90.
     • Gravity: (0, 200).
     • Initial Velocity -> Value: 50.
     • Color Ramp: Começa com cinza claro, termina com cinza claro com alpha 0.
     • Scale Amount Curve: Começa pequeno, cresce um pouco e encolhe.
2. Controle as Partículas via Script do Jogador:
   • Abra o script do seu CharacterBody2D.
   • Adicione uma referência ao nó de partículas e um sinal para quando o jogador se move.

# No script do seu CharacterBody2D (Player)
extends CharacterBody2D
 
@export var speed: float = 100.0
@export var jump_velocity: float = -200.0
 
@onready var dust_particles: CPUParticles2D = $DustParticles # Certifique-se que o caminho está correto
 
func _physics_process(delta: float) -> void:
    # Lógica de gravidade
    if not is_on_floor():
        velocity.y += ProjectSettings.get_setting("physics/2d/default_gravity") * delta
 
    # Lógica de pulo
    if Input.is_action_just_pressed("ui_accept") and is_on_floor():
        velocity.y = jump_velocity
        # Opcional: emitir partículas de "salto" aqui
        # dust_particles.emitting = true # Para um efeito one-shot de salto
        # dust_particles.restart()
 
    # Lógica de movimento horizontal
    var direction_x: float = Input.get_axis("ui_left", "ui_right")
    if direction_x != 0:
        velocity.x = direction_x * speed
        # Ativar partículas de poeira ao andar
        if is_on_floor() and not dust_particles.emitting:
            dust_particles.emitting = true
            dust_particles.one_shot = false # Para emitir continuamente
            dust_particles.amount = 5 # Menos partículas para andar
            dust_particles.lifetime = 0.3
            dust_particles.direction = Vector2(0, 1)
            dust_particles.spread = 45
            dust_particles.gravity = Vector2(0, 100)
            dust_particles.initial_velocity_min = 20
            dust_particles.initial_velocity_max = 50
            dust_particles.restart() # Reinicia a emissão se já estiver emitindo
    else:
        velocity.x = move_toward(velocity.x, 0, speed)
        # Parar partículas de poeira ao parar de andar
        if dust_particles.emitting and is_on_floor():
            dust_particles.emitting = false # Para parar a emissão gradual
            # Ou se for um efeito "one-shot" para finalizar de vez:
            # dust_particles.one_shot = true
            # dust_particles.emitting = false # Para parar a emissão atual
 
    move_and_slide()
 
    # Ajusta a direção das partículas para a direção do player
    # dust_particles.global_position = global_position
    # dust_particles.rotation = rotation # Se as partículas precisarem girar com o player

Explicação do Código:

• Quando o jogador se move (direction_x != 0) e está no chão, as dust_particles são ativadas para emitir continuamente.
• Quando o jogador para de se mover, as partículas são desativadas e as existentes desaparecem naturalmente.
• Você pode ajustar as propriedades das partículas (como amount, lifetime, etc.) diretamente no script para criar diferentes efeitos (ex: mais poeira ao correr, menos ao andar devagar).

5. Exercícios e Desafios 🚀

É hora de colocar a mão na massa!

Desafio 1: Aprimorando o Parallax Background

• Adicione uma quarta camada ao seu Parallax Background. Pode ser um céu distante (com motion_scale muito baixo, tipo (0.05, 0.0)) ou nuvens que se movem em uma direção específica.
• Experimente com diferentes valores de motion_scale para cada camada. Observe como isso afeta a sensação de profundidade.
• Se sua câmera estiver seguindo o jogador, faça com que o ParallaxBackground tenha scroll_limit_begin e scroll_limit_end definidos para que o fundo não role infinitamente para fora dos limites do seu mundo.

Desafio 2: Criando Novos Efeitos de Partículas

• Efeito de Chuva/Neve:
  • Crie um novo nó CPUParticles2D.
  • Configure-o para simular chuva (partículas caindo, direction para baixo, gravity alta, spread pequeno, texture de gota).
  • Ou neve (partículas mais lentas, direction para baixo, gravity menor, spread maior, texture de floco).
  • Posicione o emissor acima da tela e faça-o emitir continuamente.
• Efeito de Fogo:
  • Crie um CPUParticles2D que simule fogo (partículas subindo, direction para cima, spread moderado, color_ramp de laranja/amarelo para vermelho/transparente, scale_curve que cresce e encolhe).
  • Use uma textura de partícula que pareça uma chama suave ou um círculo.
• Efeito de Explosão:
  • Crie um CPUParticles2D com One Shot ativado e Emitting desativado inicialmente.
  • Configure Amount alto, Lifetime curto, Spread 180 (para todas as direções), Initial Velocity alto.
  • No script, chame particles.emitting = true quando uma "explosão" deve acontecer (ex: inimigo é destruído).

Desafio 3: Integração Avançada

• Partículas de Dano/Cura: Anexe um sistema de partículas ao seu jogador que emita faíscas vermelhas quando ele sofre dano, e brilhos verdes quando ele é curado. Use um script para alternar entre esses efeitos ou reiniciar um efeito one_shot conforme necessário.
• Partículas de Ambiente: Adicione partículas ambientais à sua cena parallax, como folhas caindo das árvores (LayerMidTrees) ou poeira flutuando perto dos arbustos (LayerCloseBushes).

6. Resumo e Próximos Passos 📚

Nesta aula, exploramos o poder dos efeitos visuais no Godot, focando em:

• Parallax Backgrounds: Usando ParallaxBackground e ParallaxLayer para criar a ilusão de profundidade.
• Sistemas de Partículas: Utilizando CPUParticles2D para gerar efeitos dinâmicos e imersivos.

Essas ferramentas são fundamentais para dar um toque profissional e atraente aos seus jogos. A experimentação é a chave! Brinque com todas as propriedades no Inspector para ver os diferentes efeitos que você pode criar.

Próximos Passos:

• Explorar GPUParticles2D: Para efeitos de partículas mais complexos e otimizados para GPU, especialmente se você tiver muitos emissores ou um grande número de partículas.
• Shaders Personalizados: Para controle ainda maior sobre a aparência das partículas ou para criar efeitos visuais únicos para seus fundos parallax.
• Animação de Sprites: Combine partículas com sprites animados para efeitos ainda mais ricos (ex: uma explosão animada + partículas de faíscas).

Continue praticando e adicionando esses toques visuais aos seus projetos. Eles farão uma enorme diferença na experiência do jogador! Boas criações! 🎨