Idle Animation Pixel Art: Respiração em Poucos Frames

A idle animation em pixel art é o loop que o personagem toca quando o jogador não está apertando nada, e na maioria dos jogos ela tem de 2 a 4 frames: a respiração move 1 pixel do tronco, o resto do corpo acompanha e, de vez em quando, o personagem pisca. É a animação mais simples de desenhar e uma das que mais aparecem na tela, porque todo jogador para.

Aqui você vai fazer uma idle de 2 frames, depois uma de 4, acrescentar a piscada e aprender a técnica de sub-pixel para movimentos menores que 1 pixel. Também tem os tempos sugeridos por frame e a diferença entre a idle do herói e a de inimigos e NPCs.

Para que serve a animação idle

Sprite parado e congelado parece travado. O jogador olha e pensa que o jogo deu erro. A idle avisa três coisas: o jogo está rodando, o personagem está vivo e ele está pronto para agir.

Ela também é a primeira impressão de personalidade. Um cavaleiro de pé, firme, respirando fundo; um ladino que balança o peso de uma perna para a outra; um mago com a capa ondulando. Antes de o jogador apertar qualquer botão, a idle já disse quem é o personagem.

E é a animação base: a corrida, o ataque e o pulo começam e terminam nela. Se a pose de idle é fraca, todas as transições saem fracas.

Idle animation pixel art com 2 frames

A versão mínima, em 32x32:

1. Frame 1: repouso. A pose padrão do personagem, de prontidão. Joelhos levemente dobrados, peso nos dois pés.
2. Frame 2: inspiração. Selecione a parte de cima do corpo (cabeça, tronco, braços) com a Rectangular Marquee (M), da cintura para cima, e mova 1 pixel para cima com a seta do teclado. As pernas ficam onde estão.

Pronto: o personagem respira. No Aseprite, crie o segundo frame com Alt+N (que duplica o atual), faça o deslocamento e toque com Enter.

Depois de mover, conserte a emenda: a cintura ficou com 1 linha de diferença. Na inspiração, o tronco "estica", então redesenhe a linha da cintura para unir o tronco às pernas. Os ombros podem subir 1 pixel e os braços ficam no lugar de antes, o que dá a impressão de que o peito inflou.

Crie a tag idle cobrindo os dois frames. O post de tags de animação no Aseprite mostra como o nome vai para a exportação.

Respiração de 1 pixel

Quatro frames dão uma respiração com começo, meio e fim:

1. Repouso.
2. Meio da inspiração: só a cabeça e os ombros sobem 1 pixel.
3. Inspiração completa: cabeça, ombros e peito no alto; o peito ganha 1 pixel de volume.
4. Meio da expiração: igual ao frame 2.

O detalhe que muita gente erra: a cabeça não deve subir mais que o tronco. Se ela sobe 2 pixels e o tronco 1, o pescoço estica e o personagem parece uma tartaruga. Movimente em bloco, com no máximo 1 pixel por parte.

Outro detalhe: os pés nunca se mexem na idle. Pé que treme no chão é um defeito clássico de idle amadora, porque denuncia que o sprite inteiro foi deslocado.

Sub pixel animation: movimento menor que 1 pixel

Em 16x16 ou 32x32, mover 1 pixel inteiro já é muito. A respiração fica com cara de soluço. A saída é a sub pixel animation: em vez de mover a forma, você muda a cor dos pixels da borda, e o olho interpreta como deslocamento parcial.

Como funciona na prática, no ombro de um personagem:

• Frame 1: a linha do ombro é feita de pixels de cor média sobre o fundo.
• Frame 2: os pixels de cima da borda do ombro ficam um tom mais claro (mais perto do fundo) e os de baixo um tom mais escuro (mais perto do corpo). A forma não se moveu, mas o peso visual desceu meio pixel.

Exemplos onde a técnica brilha:

• Olho: um pixel de brilho que muda de posição dentro da íris, ou a pupila que alterna entre dois tons, sugere que o olho se moveu sem deslocar o desenho.
• Cabelo: a ponta de uma mecha alterna a cor de 1 ou 2 pixels entre o tom do cabelo e um tom intermediário. Parece que o fio balançou.
• Peito: em vez de subir o tronco 1 pixel, escureça a sombra embaixo do peito num frame e clareie no outro.

Requisito: a paleta precisa ter tons intermediários entre o contorno e o preenchimento, e entre o objeto e o fundo. Com uma paleta de 3 cores por material (sombra, base, luz), dá para fazer. Teste sempre na escala real do jogo (1x ou 2x), não no zoom do editor, porque em zoom alto a técnica parece borrão.

Piscada e detalhes secundários

A piscada é um frame à parte, com o olho fechado (uma linha horizontal na cor do contorno ou da pele). Duas formas de usar:

• Dentro do loop: um ciclo de idle de 4 frames com a piscada substituindo um deles a cada repetição seria rápido demais. Em vez disso, crie um ciclo mais longo (por exemplo, 8 frames: a respiração duas vezes, com a piscada num frame curto no meio da segunda).
• Como variação: uma tag idle_blink separada que a engine toca a cada poucos segundos, com um intervalo aleatório. Fica mais natural e o arquivo continua simples.

Outros detalhes secundários que cabem numa idle: capa ou cachecol ondulando 1 pixel com atraso de 1 frame em relação ao tronco, uma chama na tocha, a ponta da espada brilhando. Cada um como camada própria no Aseprite, para poder desligar se poluir.

Fazer o personagem parado parecer vivo, com respiração, piscada e variações tocadas na hora certa, já exige que a arte e o comportamento na engine sejam pensados juntos. É nesse ponto que desenhar deixa de ser suficiente.

Montar o conjunto inteiro de animações de um personagem (idle, corrida, pulo, ataque) com o mesmo estilo e o mesmo timing é o trabalho de produção de arte de jogo, e é muito mais rápido quando você segue um processo do que quando reinventa a cada sprite.

Timing: frames longos e curtos

No Aseprite, a duração de cada frame se edita com P (Frame Properties), em milissegundos. Idle é lenta; a respiração humana em repouso leva alguns segundos.

Para 2 frames:

• Repouso: 500 ms
• Inspiração: 400 ms

Para 4 frames:

• Repouso: 400 ms
• Meio da inspiração: 200 ms
• Inspiração completa: 300 ms
• Meio da expiração: 200 ms

Repare que os frames de transição são mais curtos que os de pose. É o princípio de slow in e slow out: o corpo "para" nos extremos e passa rápido pelo meio.

Piscada: 80 ms de olho fechado. Mais que 120 ms parece sono.

Variações de idle: dispare entre 3 e 8 segundos de inatividade, com tempo sorteado. Intervalo fixo vira relógio.

Idle de inimigo e NPC

Inimigo precisa comunicar ameaça e leitura rápida. A idle pode ser mais agressiva: um slime que pulsa 1 pixel para os lados, um esqueleto que balança a espada, um morcego que bate as asas sem sair do lugar. Inimigo fica pouco tempo na tela, então 2 frames com movimento claro funcionam melhor que 4 sutis.

NPC mora no cenário e o jogador passa por ele várias vezes. Idle muito chamativa cansa. Respiração de 2 frames com tempos longos (600 ms ou mais) e uma variação rara, como varrer o chão ou olhar para o lado, deixa o lugar vivo sem roubar a atenção.

Dica de produção: se você tem 20 NPCs, desenhe uma idle base de corpo genérica e mude só cabeça e roupa. A respiração é a mesma para todos.

Erros comuns

Pés se mexendo. O sprite foi deslocado inteiro. Mova só da cintura para cima.

Respiração rápida demais. Frames de 100 ms parecem ofegantes. Idle fica entre 200 e 500 ms por frame, com as poses mais longas que as transições.

Movimento exagerado. Tronco subindo 2 ou 3 pixels em 32x32 parece soluço. 1 pixel, ou sub-pixel.

Idle parada demais. Só a piscada, sem respiração, deixa o personagem com cara de estátua. Pelo menos 1 pixel de movimento.

Cabeça subindo mais que o corpo. Pescoço estica. Mova em bloco.

Pose de idle relaxada demais num jogo de ação. Personagem curvado e de braços soltos parece desinteressado. Em jogo de ação, a idle é de prontidão.

Próximo passo

Faça a idle de 2 frames, depois a de 4 com sub-pixel no peito e compare as duas na escala real do jogo. Acrescente a piscada como tag separada. Se o personagem ainda não tem uma pose base que convença, volte ao guia de como criar um personagem em pixel art e ajuste a silhueta antes de animar.