Onion Skin no Aseprite: Anime Frame a Frame

O onion skin no Aseprite é o recurso que mostra os quadros anterior e seguinte em transparência atrás do frame que você está desenhando. O nome vem da animação tradicional: as camadas de papel vegetal empilhadas na mesa de luz, translúcidas como as camadas de uma cebola, deixavam o animador ver o desenho de baixo enquanto traçava o de cima. No Aseprite é a mesma ideia, só que digital: você enxerga onde o braço estava no frame passado enquanto decide onde ele vai no frame atual.

Sem isso, animar frame a frame vira chute. Você desenha uma pose, apaga, cria o próximo frame com a tela em branco e tenta lembrar de cabeça onde a mão estava. O resultado quase sempre pula: o personagem "teleporta" de uma posição pra outra porque você errou a distância no olho. O onion skin resolve exatamente esse problema, mostrando a referência embaixo do seu traço o tempo todo. É a diferença entre animar com os olhos abertos e animar de olhos fechados.

Como ligar o onion skin no Aseprite

Primeiro, abra a timeline. Se ela não estiver visível, aperte Tab. A timeline é aquela faixa embaixo do canvas com os frames em colunas e as camadas em linhas.

No canto superior esquerdo da timeline tem uma pequena barra de ícones. O botão do onion skin é o que parece um par de folhas sobrepostas com um brilho. Clique nele e pronto: os frames vizinhos aparecem como fantasmas semitransparentes atrás do frame atual. Clique de novo pra desligar.

Não existe atalho de teclado padrão pra isso, mas se você usa muito vale criar um. Vá em Edit > Keyboard Shortcuts, busque por "onion" e associe uma tecla livre. Numa sessão de animação você liga e desliga o onion skin toda hora (liga pra posicionar, desliga pra ver a pose limpa), então uma tecla economiza muito clique.

Um detalhe importante desde já: o onion skin é puramente visual. Ele não é desenhado no sprite, não vira pixel de verdade e nunca entra na exportação. Pode deixar ligado à vontade que o PNG final sai limpo, só com o frame de fato.

Ajustando quantos frames pra trás e pra frente

O padrão do Aseprite mostra um frame antes e um depois. Na maior parte do tempo é o suficiente, mas você controla isso.

Ao lado do botão de onion skin tem um pequeno menu (a setinha ou o clique com o botão direito no próprio ícone, dependendo da versão) que abre as opções. Ali você define quantos frames pra trás (Frames before) e quantos pra frente (Frames after) o onion skin considera. Você também pode arrastar os marcadores que aparecem na régua de frames, na timeline, pra esticar ou encolher o alcance visualmente.

Quando mais de um frame ajuda:

• Movimento rápido e amplo, tipo um golpe de espada, fica mais fácil de acertar vendo dois ou três frames de cada lado. Você percebe o arco inteiro do movimento de uma vez.
• Ciclos de caminhada ganham com dois frames pra trás, porque você enxerga o ritmo da passada e não só o passo anterior.

Quando um frame só é melhor:

• Desenhos densos, com muito detalhe por frame, viram uma sopa ilegível se você empilhar quatro fantasmas. Aí menos é mais.
• Idle sutil (respiração, piscada) mexe tão pouco que o frame vizinho já basta de referência.

A regra prática: comece com um pra cada lado e só aumente quando sentir que precisa enxergar mais contexto do movimento. Fantasma demais atrapalha mais do que ajuda.

As cores azul e vermelho: passado e futuro

Repare que os fantasmas não são todos da mesma cor. Por padrão, os frames anteriores aparecem com uma tonalidade azul e os seguintes com uma tonalidade vermelha. Isso não é decoração: é como você lê a direção do movimento sem se perder.

Pense assim: azul é de onde o movimento veio, vermelho é pra onde ele vai. Quando você está desenhando o meio de uma caminhada, o pé azul mostra a posição que a perna acabou de deixar e o pé vermelho mostra onde ela precisa chegar no próximo frame. Seu trabalho é desenhar o meio-termo entre os dois. É quase um preencher-o-espaço guiado.

A opacidade dos fantasmas também é ajustável nas preferências, em Edit > Preferences > General (ou na própria caixa de opções do onion skin, dependendo da versão), onde tem os controles de Opacity mínima e máxima. Frames mais distantes do atual ficam mais apagados, o que é ótimo: o vizinho imediato aparece forte, e os mais longe só dão contexto de fundo. Se as cores azul e vermelho não combinam com a sua paleta e atrapalham a leitura, dá pra trocá-las ali também.

Se você quer o panorama completo da ferramenta antes de mergulhar só na animação, o guia de Aseprite para jogos cobre canvas, camadas e exportação de sprite sheet, e o onion skin encaixa exatamente no meio desse fluxo.

Animando uma caminhada com onion skin

O ciclo de caminhada é o exercício clássico, e é onde o onion skin mais mostra serviço. Um walk cycle simples de jogo 2D costuma ter de 4 a 8 frames. Vamos pensar em 6.

O fluxo, na prática:

1. Desenhe o frame de contato, com a perna da frente esticada tocando o chão e a de trás esticada pra trás. Essa é a pose mais aberta da passada.
2. Crie o próximo frame com Alt+N (novo frame vazio) ou Alt+B (que duplica o frame atual, muitas vezes mais útil, porque você edita em cima em vez de redesenhar do zero).
3. Com o onion skin ligado, o frame de contato aparece em azul embaixo. Desenhe a passagem, onde a perna de trás sobe e passa pela frente. O fantasma azul te diz exatamente quanto mover.
4. Repita até fechar a metade do ciclo. A outra metade costuma ser um espelho: dá pra copiar os frames, virar na horizontal (Edit > Flip Horizontal) e ajustar.

O ganho do onion skin aqui é o espaçamento (spacing). Numa caminhada, os pés precisam se mover a uma distância parecida entre um frame e outro, senão o personagem parece mancar. Vendo o frame anterior em azul, você mede a passada no olho e mantém o passo regular. Sem a referência embaixo, cada frame vira um chute novo, e o mancar é quase garantido.

Pra dar play e sentir o ritmo, aperte Enter. Se a caminhada estiver correndo rápido ou devagar demais, ajuste a duração dos frames (clique duplo no número de milissegundos do frame na timeline). E quando o ciclo estiver fechado, é hora de nomear tudo: agrupar esses frames numa tag chamada walk deixa a animação pronta pra engine. O passo a passo de como organizar isso está no guia de tags de animação no Aseprite, que é o par natural deste post: onion skin pra desenhar, tags pra organizar e exportar.

Animando um idle sutil

O idle (o personagem parado, "respirando") é o oposto da caminhada: em vez de movimento amplo, o desafio é o movimento minúsculo. Um idle bom tem de 2 a 4 frames e mexe pouquíssimo, tipo o tronco subindo um ou dois pixels e descendo.

Aqui o onion skin trabalha ao contrário do walk cycle. Numa caminhada você quer ver bastante deslocamento; num idle, você usa o fantasma pra garantir que o movimento não seja grande demais. É comum o iniciante fazer o idle balançar como se o personagem tivesse tremendo. Com o frame anterior em azul embaixo, você vê que subiu três pixels quando queria subir um, e corrige na hora.

Duplique o frame com Alt+B, suba o tronco um ou dois pixels com a seleção retangular (M), e deixe cabeça e pés mais ou menos no lugar. O onion skin confirma que só o que devia mudar mudou. Idle é sobre contenção, e o fantasma é seu medidor de contenção.

Erros comuns (e como o onion skin evita)

Frame que pula. É o erro número um: o personagem "teleporta" entre dois frames porque a distância entre as poses ficou grande demais. Quase sempre isso acontece quando o onion skin está desligado e você anima de memória. Ligue-o, e o salto fica visível antes mesmo de você terminar de desenhar, porque o fantasma vizinho denuncia o buraco.

Espaçamento irregular. Numa caminhada ou corrida, se um passo anda 8 pixels e o próximo anda 3, o olho percebe como mancada, mesmo que cada frame isolado esteja bonito. O onion skin em azul é sua régua: mantenha o deslocamento entre frames consistente medindo pelo fantasma anterior.

Confiar só na tela estática. Onion skin é ótimo pra posicionar, mas ele não substitui ver a animação rodando. Anime alguns frames com o fantasma, depois desligue o onion skin e aperte Enter pra assistir ao loop limpo. Às vezes o que parecia certo com os fantasmas empilhados fica estranho em movimento, e só o play revela isso. Ligar pra desenhar, desligar pra revisar: esse vai-e-vem é o fluxo saudável.

Fantasma demais poluindo a tela. Se você subiu o onion skin pra três ou quatro frames de cada lado num sprite detalhado, a tela vira uma bagunça translúcida e você não enxerga mais o próprio traço. Reduza pra um ou dois. Mais contexto nem sempre é melhor; legibilidade é o que importa na hora de desenhar.

Esquecer que loop precisa fechar. Animação de ciclo (walk, idle, run) tem que voltar ao começo sem solavanco. Um truque com onion skin: quando estiver no último frame, configure o alcance pra mostrar também o primeiro frame como referência do "próximo". Assim você desenha a última pose já pensando na transição de volta pro frame 1, e o loop fecha liso.

Fechando

O onion skin não é um recurso avançado que você liga um dia "quando estiver pronto". É o primeiro botão que você aperta ao começar qualquer animação frame a frame no Aseprite, do lado dos frames e das tags. Ele transforma animar de um exercício de memória num exercício de observação: em vez de lembrar onde a pose estava, você vê.

O fluxo completo é simples: liga o onion skin, desenha a pose usando o fantasma azul como referência do passado e o vermelho como alvo do futuro, cria o próximo frame com Alt+B, repete, e de tempos em tempos desliga tudo e aperta Enter pra assistir ao loop. Quando a animação estiver fechada, você nomeia com tags e exporta pra engine.

Se você está montando o caminho do zero até publicar um jogo com suas próprias animações, esse fluxo de arte encaixa num quadro maior de produção, e o curso de criação de jogos para iniciantes mostra como as peças (arte, animação, engine, lógica) se conectam num projeto de verdade. Por enquanto, abra o Aseprite, crie um sprite de 32x32, ligue o onion skin e faça um idle de 4 frames com o personagem respirando. É a animação mais simples que existe, e dá pra terminar hoje.