Walk Cycle: Ciclo de Caminhada para Personagem de Jogo

Um ciclo de caminhada (walk cycle) é a sequência de poses que leva o personagem de um passo ao mesmo passo seguinte, desenhada para repetir em loop sem emenda. Num jogo, ele é a animação que o jogador mais vê, e por isso é a que mais denuncia erro: um ciclo de caminhada com timing errado ou um pé que desliza no chão aparece em toda tela.

Aqui você vai montar um walk cycle de 8 frames a partir das quatro poses-chave, definir o tempo de cada frame em milissegundos, acrescentar movimento secundário e, principalmente, sincronizar o loop com a velocidade do personagem na engine para ele não patinar. Os exemplos usam o Aseprite, com o equivalente no Krita em cada passo.

O que é um ciclo de caminhada

Caminhar é cair para a frente e se segurar com a perna. A cada passo o corpo perde altura quando o pé recebe o peso e ganha altura quando a perna empurra. Um ciclo completo tem dois passos: um com a perna direita na frente, outro com a esquerda. Quando o último frame volta para o primeiro, o personagem está na mesma pose em que começou.

Para jogo, o ciclo é desenhado no lugar: o personagem não sai do quadro, ele caminha sobre uma esteira invisível. Quem move o sprite pelo mundo é o código. Esse detalhe é o que gera o problema de patinação, que você vai resolver no fim.

As poses-chave do walk cycle

Quatro poses por passo. Desenhe na ordem abaixo, porque as duas primeiras definem o resto.

1. Contato. Os dois pés no chão, passada mais aberta. O calcanhar da frente acaba de tocar o chão, a ponta do pé de trás ainda está apoiada. Braços no extremo oposto às pernas: perna direita na frente, braço direito atrás. É a pose que define o comprimento do passo.
2. Recuo (down). O pé da frente recebe o peso, o joelho dobra e o corpo desce. É o ponto mais baixo do ciclo. A perna de trás começa a sair do chão.
3. Passagem (passing). A perna de apoio está reta embaixo do corpo, a outra passa ao lado dela, dobrada, com o pé no ar. Braços perto do corpo, cruzando.
4. Alto (up). A perna de apoio empurra, o corpo sobe ao ponto mais alto. A perna livre se estica para a frente, prestes a fazer o próximo contato.

Depois vem o contato com a outra perna e as mesmas quatro poses espelhadas. Em sprite visto de lado, "espelhar" quer dizer trocar qual perna está na frente, não virar o desenho: o lado do corpo virado para a câmera continua o mesmo.

Ciclo de caminhada em 8 frames passo a passo

No Aseprite, crie o sprite (32x32 é um bom tamanho para treinar) e ligue o onion skin na timeline. Se ainda não usa, o post sobre onion skin no Aseprite mostra como configurar os fantasmas azul e vermelho.

1. Frame 1: contato, perna direita na frente. Desenhe a pose inteira. Trace uma linha de chão numa camada de guia e mantenha os pés encostados nela.
2. Frame 5: contato, perna esquerda na frente. Crie os frames até o 5 com Alt+N (novo frame) e desenhe o contato oposto. Com os dois contatos prontos, o comprimento do passo está travado.
3. Frame 3: passagem. Entre os dois contatos. Perna de apoio reta, a outra passando.
4. Frame 7: passagem com a outra perna.
5. Frames 2 e 6: recuo. Corpo 1 pixel mais baixo do que no contato, joelho da frente dobrado.
6. Frames 4 e 8: alto. Corpo 1 pixel mais alto do que na passagem, perna livre esticando.
7. Crie uma tag cobrindo os 8 frames, chamada walk, com direção Forward. O post sobre tags de animação no Aseprite cobre a nomeação para exportar.

Toque em loop com Enter e observe só o quadril: ele deve desenhar uma onda suave, baixo no recuo, alto no alto. Se o quadril fica parado, a caminhada parece de robô.

No Krita: troque o espaço de trabalho em Janela > Espaço de trabalho > Animação (Window > Workspace > Animation). Desenhe o contato no frame 0, use o botão direito na timeline e Create Duplicate Frame para gerar o próximo a partir dele, e ligue o onion skin pelo ícone de lâmpada na camada animada. A ordem de desenho é a mesma.

Timing por frame

No Aseprite, cada frame tem duração própria em milissegundos. Selecione o frame e aperte P (ou Frame > Frame Properties) para editar. Para mudar vários de uma vez, selecione o intervalo na timeline, clique com o botão direito e escolha Properties.

Ponto de partida para 8 frames:

Isso dá um ciclo de 800 ms, uma caminhada normal. Ajustes que mudam a personalidade:

• Personagem pesado: recuo com 140 ms. O corpo "afunda" mais tempo no peso.
• Personagem leve: alto com 80 ms e o resto a 90 ms. Fica saltitante.
• Cansado ou ferido: todos em 140 a 160 ms e recuo mais profundo (2 pixels).

No Krita, o controle é por frame rate do documento (na docker de animação) e por exposição: um desenho que ocupa 2 frames dura o dobro. Para chegar perto de 100 ms, use 10 quadros por segundo com cada desenho ocupando 1 frame, ou 20 com cada desenho ocupando 2.

Movimento secundário: braço, cabeça, cabelo

Com as pernas certas, três detalhes tiram a caminhada do mecânico:

• Braço oposto à perna. Perna direita na frente, braço direito atrás. Em 32x32, o braço pode ser só 2 ou 3 pixels de mão indo e vindo.
• Cabeça acompanha o quadril, mas com o mesmo deslocamento de 1 pixel. Não balance a cabeça sozinha; ela sobe e desce junto com o corpo.
• Cabelo, capa, cachecol atrasam 1 frame. Quando o corpo desce no frame 2, o cabelo desce no frame 3. Quando o corpo sobe no frame 4, o cabelo sobe no 5. Esse atraso é o princípio de follow through, e é o que dá peso ao material.

Até aqui é animação. O passo seguinte é onde a arte encontra o código, e é onde a maioria trava: o personagem anda no jogo e parece deslizar sobre o chão.

Juntar animação, física e câmera num personagem que parece pisar no chão de verdade é o tipo de detalhe que separa um protótipo de um jogo que dá vontade de jogar, e é o que se treina quando a arte é produzida já pensando na engine.

Sincronizar com a velocidade do personagem (sem patinar)

O pé de apoio, aquele que está no chão, recua uma certa quantidade de pixels a cada frame. No mundo, esse pé deveria ficar parado enquanto o corpo avança. Para isso, o personagem precisa se mover exatamente na mesma velocidade com que o pé recua na animação.

A conta:

1. No Aseprite, compare a posição do pé de apoio entre o frame de contato (1) e o frame de passagem (3). Suponha que ele recuou 6 pixels em 2 frames: 3 pixels por frame.
2. Com 100 ms por frame, são 3 pixels a cada 0,1 segundo: 30 pixels por segundo.
3. Converta para a unidade da engine. Na Unity, com Pixels Per Unit 32, são 30 / 32 = 0,94 unidade por segundo. Na Godot, que trabalha em pixels, são 30 pixels por segundo na escala 1.

Se o game design pede uma velocidade diferente, não force: ajuste a velocidade da animação. A razão entre a velocidade real e a velocidade "desenhada" vira o multiplicador de reprodução.

Unity: no script do personagem, depois de calcular a velocidade, faça animator.speed = Mathf.Abs(rb.linearVelocity.x) / velocidadeDesenhada; enquanto o estado de caminhada estiver ativo. Ou, melhor, crie um parâmetro float no Animator e use-o como Multiplier de velocidade do estado walk, assim as outras animações não são afetadas.

Godot: com AnimatedSprite2D, ajuste speed_scale pelo mesmo cálculo: sprite.speed_scale = absf(velocity.x) / velocidade_desenhada. Com AnimationPlayer, a propriedade equivalente também é speed_scale.

Com isso, se o personagem acelera, as pernas aceleram junto. Para aceleração e fricção bem resolvidas no código, o post de movimento de personagem 2D de plataforma é a outra metade deste.

Erros comuns

Quadril sem subir e descer. Caminhada de boneco de corda. 1 pixel para baixo no recuo, 1 para cima no alto.

Passadas de tamanho diferente. Um passo mais longo que o outro faz o personagem mancar. Compare os dois contatos com o onion skin.

Braço do mesmo lado da perna. Fica estranho e ninguém sabe dizer por quê. Braço oposto.

Todos os frames com a mesma duração por preguiça. Funciona, mas ajustar 20 a 40 ms no recuo já dá personalidade.

Velocidade do jogo decidida sem olhar a animação. Patinação. Meça os pixels do pé de apoio.

Primeiro e último frame iguais. O loop "engasga" porque a mesma pose aparece duas vezes seguidas. O frame 8 é o alto, não o contato.

Próximo passo

Faça este ciclo de 8 frames num personagem simples de 32x32, exporte e coloque na engine com a velocidade calculada. Depois reduza para 6 frames (contato, passagem e alto de cada perna) e compare. Com a caminhada resolvida, a corrida é o passo natural: ela muda a postura, encurta o contato e adiciona a fase com os dois pés no ar.