← Todos os posts

Uma tela inicial na chuva

A primeira coisa rodando no Godot: um fundo com reflexo de verdade na água, chuva em camadas e o Pew piscando e atirando de dentro do logo.

Ouça este post

Narrado com a voz do Dodz, clonada por IA

0:00 / 0:00
A tela inicial do PewRun no Godot: o logo sobre uma rua chuvosa com poças.

Com um GDD e um guia de estilo em mãos, chegou a hora de abrir o Godot. Não comecei pelo movimento. Comecei pela tela inicial, porque é a primeira coisa que qualquer pessoa vê e porque ela me obrigou a resolver chuva, luz e água logo de cara. Isso é metade da identidade do PewRun.

A tela inicial, gravada direto do Godot.

A fundação que ninguém vê

Antes de qualquer pixel, algumas decisões que custam bem menos no primeiro dia:

  • Godot 4.7, GDScript com tipagem estática, renderizador Forward+ com HDR 2D ligado, para as coisas claras poderem brilhar.
  • Controles registrados por jogador no código (p1_jump, p2_jump…), em vez de um conjunto global. Não custa nada agora e deixa opções abertas para depois.
  • Inglês e português desde o começo. Não existe texto fixo no código: tudo passa por uma chave de tradução, e o jogo usa o idioma do sistema na primeira vez que abre.
  • Um gerenciador de áudio com barramentos separados para música, ambiente, efeitos e interface, em que um arquivo de som faltando vira silêncio em vez de erro.

Água que reflete

O fundo é uma pintura gerada de uma rua molhada. Para as poças refletirem de verdade, uma pequena ferramenta monta uma máscara de água: uma imagem em tons de cinza em que branco quer dizer "aqui é água". Um shader espelha o que está acima da linha d'água dentro das áreas brancas, faz ondular com ruído e espalha anéis de chuva.

O truque é que o reflexo é calculado a cada quadro. Quando o Pew atira, o clarão laranja aparece nas poças também.

O Pew mora dentro do logo

O logo tem o Pew espiando por cima das letras com o blaster. Outra ferramenta separa o logo em camadas: o logo sem tiros, a mesma imagem com os olhos do Pew fechados e o raio de plasma recortado sozinho.

A camada do logo com os olhos do Pew abertos e sem tiros.Olhos abertos
A camada do logo com os olhos do Pew fechados.Olhos fechados
Duas camadas do logo. Trocar uma pela outra é tudo o que uma piscada precisa.

Daí em diante é ritmo. O Pew pisca a cada 2,2 a 5 segundos, e uma em cada quatro piscadas é dupla. Ele dispara rajadas de três tiros, com 0,11 s entre eles, e espera de 1,6 a 3 segundos. Cada tiro empurra o logo 5 pixels para trás e ilumina a cena. São números pequenos, mas são eles que fazem o Pew parecer vivo em vez de uma animação em loop.

O brilho vem do HDR: cores acima de 1,0 passam do limiar do glow. Precisei de algumas capturas para calibrar. Luz demais estoura o logo e faz a arma sumir.

Som

O tema principal, o loop de chuva e os efeitos foram gerados na ElevenLabs por um script pequeno, com uma entrada por som. Os tiros da tela inicial tocam bem baixinho, para o tema ficar na frente.

Se a primeira tela deste site parece familiar agora, é de propósito: ela é uma versão web desta tela inicial, com a mesma água, a mesma chuva e os mesmos tempos de piscada.

A seguir: nove folhas de sprite e dezoito animações.