Nove folhas, dezoito animações

Uma folha de personagem não é um personagem. Para se mover, o Pew precisava de quadros: parado, correndo, pulando, atirando, mirando, dando dash, levando dano. Este post conta como esses quadros foram feitos e como viraram algo que o Godot consegue tocar.

Uma animação por vez

Cada animação começou como uma folha gerada com um preset de sprite, salva como toda imagem: pew_<estado>_vNNN.png. Duas coisas fizeram muita diferença nos pedidos:

• Descrever a pose de cada quadro. "Quadro 3: pé direito à frente, braços para trás" em vez de "um ciclo de corrida". Sem isso, as folhas voltam com quadros repetidos.
• Dizer em que mão fica a arma. O Pew é destro: virado para a direita, o blaster fica na mão do braço mais perto da câmera. Sem essa linha, a arma troca de mão no meio da animação. Quando o Pew olha para a esquerda, o jogo só espelha o sprite.

Depois vinha a revisão. Cada animação virava um GIF e era aprovada sozinha antes de seguir para a próxima. A corrida foi a teimosa: a folha aprovada é a pew_run_v007. Seis corridas antes dela ficaram pelo caminho.

Nove folhas que não concordam

No fim eram nove folhas aprovadas: parado, corrida, pulo, tiro, correr atirando, mira, dash, dano e morte.

Elas não concordam sobre o tamanho do Pew. Cada folha foi gerada sozinha, então numa ele está um pouco maior e em outra um pouco menor. Coloque isso no jogo do jeito que está e o Pew cresce e encolhe toda vez que troca de animação.

Medindo cabeças

A solução é um script, o build_pew_spriteframes.py. Em cada quadro, ele acha a maior mancha de pele verde, que é sempre a cabeça do Pew, e mede a largura. Ele pega a mediana de cada animação e reescala a animação inteira para a cabeça ter a mesma largura em todas.

Depois coloca todos os quadros numa grade de células iguais, com os pés no mesmo ponto em todas elas. Esse ponto vira a origem do sprite no Godot, então trocar de um quadro de corrida para um de pulo nunca faz o Pew dar um pulinho para o lado.

Saem três arquivos: a imagem do atlas, um recurso SpriteFrames do Godot e um JSON pequeno com o tamanho da célula e a posição dos pés. Nove folhas viram dezoito animações, porque algumas folhas têm várias: só a folha de mira rende seis poses (cinco direções de mira mais o agachado), e a do pulo se divide em impulso, subida, topo, queda e aterrissagem.

Todas elas, ao vivo

Este site usa o mesmo atlas, exportado em WebP. Estas são as dezoito animações, tocando aqui mesmo:

• idle6f · 8 fps · loop
• run8f · 12 fps · loop
• run_shoot8f · 12 fps · loop
• jump_start2f · 14 fps
• jump_rise1f · 1 fps
• jump_apex1f · 1 fps
• jump_fall1f · 1 fps
• land1f · 12 fps
• shoot4f · 14 fps
• aim_up1f · 1 fps
• aim_diag_up1f · 1 fps
• aim_forward1f · 1 fps
• aim_diag_down1f · 1 fps
• aim_down1f · 1 fps
• crouch_shoot1f · 1 fps
• dash4f · 16 fps
• hurt3f · 12 fps
• death6f · 10 fps

O jogo tem uma cena de prévia que faz a mesma coisa: todas as animações lado a lado, para eu achar um quadro ruim antes de ele entrar no jogo.

Com um Pew que se anima, o trabalho seguinte foi fazer ele ser gostoso de controlar: fazendo um ET pequeno ser gostoso de controlar.