Animação de Voo: Asas de Pássaro, Morcego e Dragão

Uma animação de voo convincente depende de uma regra que quase todo iniciante erra: o corpo sobe quando a asa desce. A batida para baixo é a que empurra o ar e levanta o animal; a subida da asa é só a recuperação, e nela o corpo cai um pouco. Com essa regra e um ciclo de 4 a 6 frames, você anima um pássaro, um morcego e um dragão em pixel art, mudando só o tipo de asa e o tempo da batida.

Este guia explica a mecânica da batida, mostra o pássaro em 4 frames, o morcego com membrana e batida rápida, o dragão com peso, e fecha com planar, mergulho e os erros que deixam o voo sem vida. Tudo com passos no Aseprite.

Animação de voo: mecânica básica da batida de asa

Toda batida tem quatro momentos. Use-os como os quatro frames base, mesmo que depois você acrescente intermediários:

1. Alto. Asas no ponto mais alto, acima do corpo. O corpo está no ponto mais baixo do ciclo.
2. Batida para baixo (meio). Asas na horizontal, abertas ao máximo, empurrando o ar. O corpo está subindo.
3. Baixo. Asas no ponto mais baixo, abaixo do corpo. O corpo chegou ao ponto mais alto.
4. Recuperação (meio). Asas subindo, dobradas ou com a ponta para trás, para cortar menos ar. O corpo desce.

O frame 4 é o que diferencia animação boa de animação mecânica. Se a asa sobe aberta do mesmo jeito que desceu, o voo parece um brinquedo de corda. Na natureza, a asa se recolhe na subida.

Em sprite, o movimento vertical do corpo é pequeno: 1 pixel em criaturas de 16x16, 2 a 3 pixels em criaturas de 32x32 ou maiores.

Pássaro: asa de pena em 4 frames

Vamos animar um pássaro de 16x16 visto de perfil (voando para a direita).

Configuração no Aseprite:

1. File > New com 16x16, fundo transparente.
2. Desenhe o corpo no frame 1: uma gota deitada de 6x4 pixels, cabeça na frente, cauda em leque de 3 pixels atrás.
3. Crie uma camada "asa" acima do corpo.
4. Ligue o onion skin (F3). O post sobre onion skin no Aseprite mostra como deixar o frame anterior e o próximo visíveis com cores diferentes.

Os 4 frames:

Crie cada frame com Alt+N (duplica o atual) e ajuste. A duração fica em Frame > Frame Properties (P). Repare que os frames do meio são mais rápidos: a asa passa rápido pelo meio e "para" um instante nos extremos. Isso é ease in e ease out aplicado à asa, e um dos princípios que o post sobre os 12 princípios da animação em jogos aprofunda.

Detalhe de pena. No frame 2 (asa aberta), deixe 1 pixel transparente entre as 2 ou 3 penas da ponta. É isso que diz "pena" para o olho, em vez de "placa". No frame 4, as penas ficam juntas.

Morcego: membrana e batida rápida

O morcego muda duas coisas: a estrutura da asa e o ritmo.

Estrutura. A asa do morcego é uma membrana esticada entre dedos longos. Visualmente:

• Os "dedos" são linhas de 1 pixel no tom mais escuro, partindo do pulso e abrindo em leque.
• A membrana entre eles é um tom médio, com a borda de fora formando curvas côncavas entre um dedo e outro (o famoso recorte de asa de morcego).
• Quando a asa fecha, a membrana dobra como guarda-chuva e quase some.

Ritmo. Morcegos batem rápido e de forma irregular. Para um inimigo de 16x16:

1. Frame 1: asas abertas para cima, membrana esticada.
2. Frame 2: asas na horizontal, abertas.
3. Frame 3: asas para baixo, envolvendo parcialmente o corpo.
4. Frame 4: asas recolhidas, quase fechadas, corpo descendo.

Duração: 50 a 70 ms por frame, todos parecidos. Morcego não tem a pausa nos extremos que o pássaro tem.

Movimento errático. O que faz um morcego parecer morcego no jogo não é só a animação, é a trajetória: subidas e descidas curtas e trocas de direção repentinas. Isso é código. Na arte, ajuda desenhar uma versão do ciclo com o corpo inclinado (para quando ele vira) e uma pose de "ataque" com as asas abertas e a boca aberta.

Dragão: peso e batida lenta

O dragão usa a mesma membrana do morcego, mas a impressão tem que ser de peso. Três ferramentas:

Mais frames, mais tempo. Um dragão de 64x64 pede 6 a 8 frames por ciclo, com 100 a 150 ms cada. A batida inteira leva perto de 1 segundo.

Antecipação na subida. Antes da batida forte, a asa sobe devagar e para no alto por um frame a mais. Essa espera é o que comunica força. Um esquema de 6 frames:

Os frames 3 e 4 têm durações opostas: 3 longo (150 ms ou mais), 4 curto (60 a 80 ms). A diferença entre os dois é o "golpe" da asa.

Corpo que reage. No dragão, o pescoço e a cauda seguem o corpo com atraso de 1 a 2 frames. Quando o corpo sobe, o pescoço ainda está descendo, e vice-versa. Esse atraso é overlapping action e é o que deixa uma criatura grande orgânica.

Organize cada ciclo com tags (Frame > Tags > New Tag): fly, glide, dive, attack. O post sobre tags de animação no Aseprite mostra como guardar vários ciclos num arquivo só e exportar cada tag como uma animação separada para a engine.

Animar o voo isolado é uma etapa. O dragão do jogo também precisa decolar, pousar, cuspir fogo, levar dano e morrer, e cada uma dessas animações precisa emendar com o voo sem pulo. Coordenar esse conjunto e levar para dentro do jogo com o timing certo é onde a maioria de quem estuda sozinho para no meio.

O corpo sobe quando a asa desce

Essa regra merece uma seção própria porque é o erro mais comum e o ajuste mais barato.

Faça um teste: anime as asas sem mexer o corpo e toque a animação. Depois mova o corpo 1 pixel para cima nos frames em que a asa está descendo e chegando embaixo, e 1 pixel para baixo nos frames de subida da asa. Toque de novo. A segunda versão parece voar; a primeira parece pendurada num fio.

Uma forma prática de fazer no Aseprite sem redesenhar: com o corpo numa camada separada, selecione a célula do frame, use a ferramenta Move (V) e mova 1 pixel com as setas. Faça o mesmo com a camada da asa, se ela estiver presa ao corpo.

Se a criatura tem cabeça, cauda ou pernas penduradas, elas reagem um frame depois: quando o corpo sobe, a cauda ainda está embaixo, e só sobe no frame seguinte.

Planar e mergulho

Planar. Asas abertas, paradas, com as pontas levemente curvadas para cima. O corpo fica estável. Para não parecer congelado, faça 2 frames lentos (300 a 400 ms cada) com as pontas das asas mudando 1 pixel. No jogo, alternar alguns ciclos de batida com alguns segundos de planar dá ritmo natural, principalmente para pássaros grandes e dragões.

Mergulho. Asas recolhidas junto ao corpo, corpo inclinado para baixo. Um frame só resolve, mais 1 frame de transição (asas meio fechadas). Para o retorno, a primeira batida depois do mergulho é a mais forte e pode ter 1 frame de asa bem aberta, freando.

Pairar (hover). Para criaturas que ficam paradas no ar (como inimigos de jogo de plataforma), use o ciclo normal de batida com o corpo subindo e descendo, mas sem deslocamento horizontal. Nesse caso, o sobe e desce do corpo é ainda mais importante, porque é a única coisa que mostra que a criatura está lutando contra a gravidade.

Erros comuns: corpo parado, asa com tamanho variando

Corpo parado. O erro número um. As asas batem e o corpo não se mexe. Correção: corpo sobe na batida para baixo, desce na recuperação, 1 a 3 pixels conforme o tamanho.

Asa com tamanho variando. No frame alto a asa tem 5 pixels de comprimento, no meio tem 8 e embaixo tem 4. A asa parece encolher e crescer. Correção: com o onion skin ligado, confira que o comprimento da asa (do ombro à ponta) é o mesmo em todos os frames em que ela está esticada. A asa só fica mais curta quando está dobrada de propósito.

Subida e descida iguais. A asa sobe aberta do mesmo jeito que desce. Correção: na recuperação, a asa dobra ou gira para cortar o ar.

Todos os frames com a mesma duração em criaturas grandes. A batida fica mecânica. Correção: extremos mais longos, meio mais curto, pausa antes da batida forte.

Morcego com asa de pássaro. Bordas retas e penas num morcego, ou membrana num pássaro. Correção: pena tem pontas separadas; membrana tem dedos e recortes côncavos.

Próximo passo

Anime o pássaro de 16x16 em 4 frames, depois o morcego com o mesmo tamanho e compare os dois lado a lado: se você consegue dizer qual é qual só pelo movimento, sem olhar a cor, os ciclos estão certos. Em seguida, encare o dragão de 6 frames com a pausa antes da batida. Exporte os três como GIF e veja em tamanho real.