Keyframe na Animação 2D: Pose-Chave, Breakdown e Intervalo

Keyframe, na animação, é a pose-chave: o desenho que define a ação, como o agachamento antes do pulo ou o ponto mais alto dele. Entre duas chaves entram o breakdown, que decide o caminho do movimento, e os intervalos (inbetweens), que só levam o desenho de um ponto ao outro. Saber qual é qual diz onde vale a pena gastar desenho e onde o timing resolve sozinho.

Aqui você anima um único pulo de personagem em três passes no Krita: primeiro só as chaves, depois os breakdowns, por último os intervalos. No fim, você vai saber quantos desenhos um pulo de jogo precisa de verdade e por que ele precisa de menos do que um pulo de desenho animado.

Keyframe na animação: o que é uma pose-chave

Pose-chave é o desenho sem o qual a ação deixa de existir. No pulo, são três: o personagem agachado (antecipação), o personagem no alto e o personagem aterrissando com os joelhos dobrados. Mostre só esses três desenhos em sequência e qualquer pessoa entende "ele pulou".

Uma boa pose-chave tem três características:

• É um extremo. O agachamento é o ponto mais baixo, o topo é o ponto mais alto. Pose no meio do caminho raramente é chave.
• Lê sozinha. Se você imprimir só esse desenho, dá para dizer o que está acontecendo.
• Tem linha de ação clara. A curva que atravessa o corpo da cabeça ao pé está visível e exagerada.

Um aviso de vocabulário, porque ele confunde muita gente que vem do software. Na timeline do Krita, keyframe é qualquer quadro com desenho próprio. O Krita não sabe se aquele desenho é chave, breakdown ou intervalo: para ele, todo quadro em que você desenhou é um keyframe, e os quadros vazios seguintes só seguram a imagem anterior na tela. Na teoria de animação, keyframe é só a pose que define a ação. Neste post, "pose-chave" é o conceito; "keyframe do Krita" é o quadro na timeline.

Breakdown: a pose que define o arco

Entre o agachamento e o topo, o corpo pode subir reto, como um elevador, ou pode esticar inteiro, braços para cima, pernas estendidas, e depois encolher no ar. As duas versões ligam as mesmas chaves. Quem escolhe é o breakdown.

O breakdown é a primeira pose entre duas chaves e é ele que dá personalidade ao movimento. Ele responde a perguntas como:

• O corpo passa por qual caminho? Em arco, quase sempre.
• Que parte lidera? No pulo, o peito e os braços puxam o corpo; as pernas vêm atrás.
• O movimento acelera ou desacelera aqui?

Se você pular o breakdown e mandar direto para os intervalos, a tendência natural é desenhar a média entre as duas chaves. A média de um agachamento e de um topo é um boneco meio agachado, meio no ar, subindo em linha reta. É o motivo de muita animação de iniciante parecer mecânica: falta a pose que diz "o corpo estica aqui".

Intervalo (inbetween): quantos colocar e onde

Intervalo é o desenho que preenche o espaço entre chave e breakdown, ou entre breakdown e a próxima chave. Ele não muda a ação, só a velocidade e a suavidade dela.

A regra prática para decidir quantos colocar vem do spacing:

• Movimento rápido: poucos intervalos, ou nenhum. A decolagem do pulo acontece em um instante; dois desenhos (agachado, esticado) bastam.
• Movimento que desacelera: intervalos agrupados perto da pose onde ele para. No topo do pulo, o corpo perde velocidade, fica um instante quase parado e volta a cair. É ali que entram os intervalos, bem próximos da pose do topo.
• Movimento que acelera: intervalos agrupados perto da pose de saída, e cada vez mais espaçados.

Intervalo espalhado por igual entre as chaves dá velocidade constante, que quase nada no mundo tem. O post sobre os 12 princípios da animação chama isso de slow in e slow out; aqui o que interessa é a consequência prática: intervalo tem lugar certo, e o lugar certo é perto de onde o movimento muda de velocidade.

Pose a pose vs straight ahead em sprite

Existem dois jeitos de animar:

• Pose a pose: você desenha as chaves, depois os breakdowns, depois os intervalos. Controle total de tempo e de proporção.
• Straight ahead: você desenha o quadro 1, depois o 2, depois o 3, em ordem, sem planejar o fim. Dá movimento solto e orgânico, bom para fogo, fumaça, cabelo e capa.

Para sprite de personagem de jogo, pose a pose ganha quase sempre. O sprite precisa caber na mesma área de colisão, voltar para a pose inicial num loop e manter o volume do corpo entre quadros. Straight ahead deriva: no quadro 8 o personagem está dois pixels maior e meio passo à frente de onde deveria. Use straight ahead nos elementos secundários (o cachecol do personagem durante o pulo, por exemplo) por cima de um corpo animado pose a pose.

Exemplo: pulo em 3 passes no Krita

Prepare o documento: canvas de 256x256 px (ou o tamanho em que você desenha o personagem antes de reduzir), uma camada de pintura para o personagem e outra embaixo com uma linha de chão. No docker Animation Timeline, defina o frame rate em 12 quadros por segundo. É uma taxa confortável para pensar em quadros e ainda dá movimento fluido em personagem de jogo.

Ligue o onion skin no ícone de lâmpada da camada animada (a camada precisa ter quadros e não pode ser totalmente opaca) e ajuste quantos quadros antes e depois aparecem no docker Onion Skins. Deixe 2 quadros antes e 2 depois, com cores diferentes para passado e futuro. Se nunca usou onion skin, o post sobre onion skin no Aseprite explica a lógica, que é a mesma nas duas ferramentas.

Passe 1: só as chaves. Desenhe apenas cinco poses, nos quadros:

Para criar cada quadro, clique com o botão direito na célula da timeline e escolha Create Duplicate Frame: ele copia o desenho anterior, e você ajusta a partir dele, em vez de começar do zero com Create Blank Frame. Dê play. Com só cinco desenhos, o pulo já funciona, só que aos trancos. Se ele não se lê nesse passe, nenhum intervalo vai salvar: volte e exagere as chaves.

Passe 2: os breakdowns. Acrescente dois:

• Quadro 5: decolagem, corpo inteiro esticado, braços apontando para cima, pés ainda tocando o chão. É a pose que diz que a força veio das pernas.
• Quadro 12: começo da queda, pernas descendo à frente do corpo, braços abrindo para equilibrar. É a pose que prepara a aterrissagem.

Dê play de novo. O movimento ganha arco: o corpo estica antes de encolher, e a queda não é só o topo ao contrário.

Passe 3: os intervalos. Agora entra o mínimo:

• Quadros 8 e 10: um antes e um depois do topo, quase iguais a ele. É a desaceleração e a reaceleração, a sensação de flutuar um instante.
• Quadro 14: um intervalo entre a queda e a aterrissagem, só se o impacto parecer seco demais.
• Entre agachado e decolagem: nenhum. A decolagem tem que ser explosiva.

No total, nove ou dez desenhos para vinte quadros de timeline. Os quadros sem desenho só seguram o anterior, e o Krita cuida disso sozinho: é o timing fazendo o trabalho que intervalos fariam.

Fazer um pulo isolado ficar bom é a parte fácil. O difícil começa quando o personagem tem pulo, corrida, ataque e dano, cada animação com chaves que precisam conversar com as outras e com o tamanho do sprite no jogo, e você sozinho não sabe se o problema está no desenho, no timing ou na exportação. É esse conjunto que um curso de Arte 2D para jogos organiza, do primeiro esboço ao sprite pronto na engine.

Em jogo, menos intervalo e pose mais clara

O pulo acima é um pulo de animação. Num jogo de plataforma, ele quase sempre é dividido de outro jeito, porque quem move o personagem pelo ar é a física, não o desenho.

A altura e a duração do pulo dependem do botão que o jogador segura, da gravidade e de quanto ele cai. A animação não sabe quanto tempo o personagem vai ficar no ar. Por isso o pulo vira estados separados:

• Decolagem: 1 ou 2 quadros (agachado curto, esticado). Rápido, para não atrasar o controle.
• Subida: 1 quadro, ou um loop curto de 2, enquanto a velocidade vertical é positiva.
• Topo: 1 quadro, mostrado quando a velocidade vertical está perto de zero.
• Queda: 1 quadro ou loop curto, enquanto o personagem desce.
• Aterrissagem: 2 quadros, que o jogo pode até cortar se o jogador já estiver correndo.

Repare o que aconteceu com os intervalos: quase sumiram. O movimento suave pelo ar vem da posição do personagem, que a engine atualiza a cada quadro do jogo. A desaceleração no topo, que no Krita custava dois intervalos, sai de graça da gravidade. Sobrou para o desenho o que ele faz melhor: poses-chave e breakdowns bem claros.

Esse é o ponto do recorte "onde gastar frame". Em sprite de jogo, gaste desenho nas chaves e nos breakdowns que mudam a leitura da ação. Gaste intervalo só onde o movimento acontece dentro do próprio sprite (um golpe de espada, um cabelo balançando) e não pode ser feito pela posição na tela.

O mesmo vale para a duração: em vez de desenhar intervalo para segurar uma pose, aumente a duração daquele quadro. O post sobre Krita para arte 2D de jogos mostra como exportar a animação em sequência de PNG para levar à engine, onde você ajusta a duração de cada quadro.

Erros comuns: intervalo uniforme e pose-chave fraca

Intervalo espalhado por igual. Três intervalos com o mesmo espaçamento entre agachado e topo dão um personagem subindo de elevador. Agrupe os intervalos perto da pose onde o movimento para e deixe espaço grande onde ele é rápido.

Pose-chave fraca. O agachamento é só meio agachado, o topo tem as pernas quase retas. Quando a chave é tímida, o pulo inteiro fica sem energia, e intervalo nenhum compensa. Exagere a chave até parecer demais, depois recue um pouco.

Começar pelos intervalos. Quem anima em ordem, quadro a quadro, sem marcar as chaves, chega ao fim com o personagem no lugar errado. Marque as cinco chaves antes de qualquer outro desenho.

Confundir keyframe do software com pose-chave. Contar "tenho 20 keyframes no Krita" não diz nada sobre a animação. Conte quantas poses-chave você tem; normalmente são de 3 a 5 por ação.

Desenhar intervalo para segurar pose. Se a pose fica parada, não redesenhe: aumente a duração do quadro. Redesenhar a mesma pose causa tremida, porque nenhum desenho à mão sai idêntico ao anterior.

Breakdown igual à média das chaves. Se o breakdown está exatamente no meio do caminho, ele não está decidindo nada. Mova o arco: mais alto, mais esticado, mais para trás.

Próximo passo

Anime o pulo dos três passes, mas pare no passe 1 e mostre a alguém só as cinco chaves. Se a pessoa entender o pulo, siga para os breakdowns. Depois, refaça o mesmo pulo no formato de jogo, com os cinco estados separados, e compare quantos desenhos cada versão gastou. Para ver como antecipação, arco e exagero entram nas outras animações do personagem, siga para o post sobre os 12 princípios da animação aplicados a jogos.