Animação em Loop Perfeito: Ciclo sem Pulo no Último Frame

Uma animação em loop sem pulo tem uma regra central: o último frame não é uma cópia do primeiro. Ele é o desenho que vem logo antes do primeiro, de modo que, quando o ciclo reinicia, o movimento continua sem parar. Se o frame 1 aparece de novo no fim, a mesma pose fica na tela o dobro do tempo e o olho percebe o tranco.

Este tutorial mostra como planejar um ciclo a partir das poses-chave, conferir a emenda com onion skin e playback em loop, decidir quando o ping-pong ajuda e quando atrapalha, variar o timing de cada frame e exportar o resultado como GIF e sprite sheet. Os passos estão no Aseprite e no Krita, e servem igual para LibreSprite e Pixelorama.

Animação em loop: o erro do frame duplicado

Pense num slime que sobe e desce em 4 frames. A sequência certa é:

1. Pose baixa (amassado).
2. Subindo.
3. Pose alta (esticado).
4. Descendo.

Depois do frame 4, o ciclo volta para o 1. O frame 4 é o caminho entre a pose alta e a baixa, então a emenda 4 para 1 é tão suave quanto a emenda 1 para 2.

O erro clássico é desenhar 1, 2, 3, 4 e acrescentar um frame 5 igual ao 1 "para fechar o ciclo". Na tela, o jogador vê 4, 5 (pose baixa), 1 (pose baixa de novo), 2. A pose baixa dura o dobro, e isso aparece como uma travada a cada volta.

Esse frame duplicado nasce de um hábito razoável: em vídeo, você fecha a cena na mesma pose em que começou. Em loop de jogo, o ciclo não tem começo nem fim. Todo frame é intermediário entre o anterior e o próximo, inclusive o último.

Planejando o ciclo a partir das poses-chave

Antes de desenhar qualquer intermediário, defina as poses-chave e a ordem delas num círculo, não numa linha:

• Idle respirando: pose de expiração (ombros baixos) e pose de inspiração (ombros 1 pixel acima). 4 frames: baixo, subindo, alto, descendo.
• Caminhada: contato com o pé direito à frente, passagem, contato com o pé esquerdo à frente, passagem. As duas metades são a mesma coisa espelhada nas pernas.
• Chama de tocha: não tem pose-chave simétrica. São 4 a 6 desenhos de chama em formatos diferentes, com as línguas de fogo subindo de um frame para o outro.

Desenhe as poses-chave primeiro, depois os intermediários. No caso da caminhada, se você tem 8 frames, os frames 1 e 5 são os contatos, 3 e 7 são as passagens, e o resto preenche. O frame 8 precisa levar ao frame 1, então ele é desenhado olhando o 7 e o 1 ao mesmo tempo.

No Aseprite, crie os frames com Frame > New Frame (Alt+N), que copia o atual, ou New Empty Frame. No Krita, troque para o espaço de trabalho de animação em Window > Workspace > Animation, que abre a Animation Timeline embaixo, e crie keyframes clicando com o botão direito na célula da timeline.

Último frame leva de volta ao primeiro, sem repetir

A técnica mais confiável para desenhar o último frame é o frame fantasma:

1. Depois do último frame do ciclo, adicione temporariamente uma cópia do frame 1.
2. Desenhe o último frame real olhando para o anterior e para essa cópia, com onion skin ligado.
3. Confira a sequência, depois apague a cópia antes de exportar.

No Aseprite, a cópia é rápida: selecione o frame 1 na timeline, Ctrl+C, vá para o fim e cole. Com o onion skin (F3) mostrando 1 frame para trás e 1 para frente, você vê o penúltimo e a cópia do frame 1 ao mesmo tempo (com a tinta vermelho e azul ligada nas opções do onion skin, cada lado ganha uma cor), e desenha o último no meio dos dois. No Krita, a cópia é um Ctrl + arrastar do keyframe 1 para depois do último; arrastar com Alt cria um clone frame, que é ainda melhor para isso, porque é uma referência ao mesmo desenho.

Esqueceu de apagar o fantasma? É o frame duplicado de volta. Por isso vale nomear a camada ou deixar um lembrete: no Aseprite, ponha o fantasma fora da tag do ciclo, e só a tag é exportada.

Conferindo com onion skin e playback em loop

Você só vê o tranco com a animação rodando em loop, na velocidade real, várias vezes seguidas.

Aseprite. A tecla Enter toca a animação no editor, repetindo. Melhor ainda é a janela de preview (View > Preview, ou F7): ela fica pequena num canto e toca o ciclo enquanto você edita outro frame, com Shift+Enter. Deixe o preview em tamanho real (1x ou 2x) e o editor em zoom alto: o tranco que não aparece em 800 por cento aparece na hora em 100.

Para o onion skin, o post de onion skin no Aseprite mostra como ajustar quantos frames aparecem para trás e para frente. Para checar a emenda do loop, posicione no último frame e use o frame fantasma descrito acima, porque o onion skin mostra os vizinhos na timeline, e o vizinho do último frame na timeline não é o primeiro.

Krita. O play da timeline toca o intervalo de reprodução definido nas configurações da animação (início e fim). Ajuste o fim para o último frame do ciclo, senão o Krita toca frames vazios no final e o loop parece piscar. O Onion Skin Docker controla quantos frames aparecem, a opacidade e as cores; para ligar numa camada, clique no ícone de lâmpada da camada na timeline. Atenção: o Krita não mostra onion skin em camada com fundo opaco, então anime numa camada transparente.

Um teste rápido de emenda que funciona em qualquer programa: olhe só para um elemento por vez (o topo da cabeça, a ponta da cauda, o pé de trás) durante 5 ou 6 voltas. Se algum deles "pisca" ou anda para trás por um instante, a emenda está nesse elemento.

Ping-pong: quando serve e quando denuncia

Ping-pong toca os frames para frente e depois para trás: 1, 2, 3, 4, 3, 2, 1, 2... O Aseprite oferece essa direção na tag (Frame > Tags > Tag Properties, opções Forward, Reverse e Ping-pong), e o guia de tags de animação no Aseprite mostra onde cada opção entra na exportação.

Serve quando o movimento é simétrico e volta pelo mesmo caminho:

• Item flutuando (moeda, cristal, coração de vida).
• Respiração de idle simples.
• Balanço de placa ou lanterna pendurada.

Com ping-pong, 3 desenhos viram um ciclo de 4 posições. É economia real em itens de cenário.

Denuncia quando o movimento tem direção ou impulso:

• Caminhada e corrida: tocada de trás para frente, a perna "desanda" e o personagem parece andar de ré por um instante.
• Fogo e fumaça: as línguas de fogo sobem; voltando, elas descem, e fogo que desce não existe.
• Bandeira, capa e cabelo ao vento: a onda viaja numa direção. Ping-pong faz a onda ir e voltar, como se o vento trocasse de lado a cada segundo.

Atenção nas engines: na Godot, o AnimationPlayer tem modo de loop ping-pong na animação; o AnimatedSprite2D com SpriteFrames não tem, e aí você monta a sequência repetindo os frames do meio em ordem inversa. Ao montar à mão, não repita os extremos: a sequência é 1, 2, 3, 4, 3, 2 e volta ao 1, não 1, 2, 3, 4, 4, 3, 2, 1. É o mesmo erro do frame duplicado, em outra roupa.

Timing variável por frame

Loop com todos os frames na mesma duração parece mecânico. O ciclo ganha vida quando as poses extremas ficam um pouco mais na tela e os intermediários passam rápido:

Aseprite: selecione o frame e use Frame > Frame Properties (tecla P) para digitar a duração. Para mudar vários de uma vez, selecione o intervalo na timeline, clique com o botão direito e escolha Properties.

Krita: a timeline roda numa taxa fixa de quadros (12 ou 24 por segundo são comuns para animação 2D de jogo). Para segurar uma pose, estenda o keyframe por mais células: clique com o botão direito na célula e use a opção de inserir hold no menu de frames (o nome exato muda um pouco entre versões). A 12 quadros por segundo, cada célula dura cerca de 83 ms; segurar uma pose por 2 células dá cerca de 166 ms.

O post sobre quantos frames uma animação precisa tem a tabela de referência por tipo de animação e explica a diferença entre o FPS da animação e o do jogo.

Ajustar o loop isolado é a parte fácil. A parte que costuma travar é quando esse ciclo vira idle, corrida e ataque do mesmo personagem, e as transições entre eles precisam emendar com a mesma suavidade da emenda do loop.

Um conjunto de animações que conversa entre si (idle que vira corrida sem pulo, corrida que vira pulo sem trocar de volume) depende de planejar as poses-chave de todos os ciclos juntos, e é esse o trabalho de arte de jogo que vai além de animar um loop bonito sozinho.

Erros comuns: velocidade quebrada, elemento que salta

• Frame duplicado no fim. A pose inicial aparece duas vezes. Apague o último frame se ele for igual ao primeiro, e redesenhe o anterior como ponte.
• Velocidade quebrada na emenda. Os intermediários do meio do ciclo têm espaçamento uniforme, mas o último está muito perto (ou muito longe) do primeiro. Compare a distância que um ponto fixo anda entre cada par de frames, incluindo o par último e primeiro.
• Elemento que salta. Um detalhe (brilho do olho, fivela do cinto, ponta da espada) muda de posição só num frame. Com onion skin, siga o detalhe pelo ciclo inteiro.
• Volume que muda. O personagem fica 1 pixel mais largo em um frame sem motivo. No loop, isso vira um tremor. Confira a silhueta com as camadas de cor desligadas.
• Frames vazios no fim da timeline (Krita). O intervalo de reprodução vai além do último desenho e o loop pisca. Ajuste o fim do intervalo.
• Ping-pong em movimento com direção. Caminhada, fogo e vento parecem rebobinar. Use loop normal e desenhe a volta.

Exportando GIF e sprite sheet do loop

GIF, para mostrar o loop (portfólio, redes, documentação):

• Aseprite: File > Export As e escolha a extensão .gif. O GIF usa a duração de cada frame. Se você usou tags, exporte só a tag do ciclo para o fantasma não entrar. Exporte com escala 200 ou 400 por cento, que é inteira e mantém os pixels nítidos.
• Krita: File > Render Animation. O Krita primeiro gera uma sequência de PNG e depois converte. Desde a versão 5.2, ele traz embutida uma parte do FFmpeg que cobre WebM, Matroska e OGG; GIF não está nessa lista, então para GIF você aponta o Krita para um FFmpeg completo instalado à parte, como a documentação do Krita mostra. Para pixel art ampliada, troque o Filter de escala para Nearest Neighbour nas opções de vídeo.

GIF tem limite de 256 cores e não serve como formato de animação dentro da engine.

Sprite sheet, para o jogo:

• Aseprite: File > Export > Export Sprite Sheet (Ctrl+E), com a opção de dividir por tags e gerar o JSON com a duração de cada frame.
• Krita: exporte a sequência de PNG pelo Render Animation (aba de sequência de imagens) e monte a folha depois, ou importe os PNG direto na engine.

Na Godot, um AnimatedSprite2D com SpriteFrames recebe a sequência e tem a opção de loop ligada por animação. Na Unity, o clipe de animação tem a opção Loop Time no Inspector do arquivo .anim; com o importador de Aseprite, as tags viram clipes já com o loop configurado.

Próximo passo

Anime um item flutuante de 3 desenhos com ping-pong e um idle de 4 frames com loop normal, aplicando o frame fantasma para fechar o ciclo. Depois teste os dois na engine, tocando por 30 segundos seguidos: se nenhum tranco aparecer nesse tempo, o loop está pronto. Em seguida, aplique a mesma técnica num ciclo de caminhada de 8 frames, onde a emenda é mais difícil de esconder.