Run Cycle Pixel Art: Animação de Corrida em Poucos Frames

Um run cycle em pixel art é a animação de corrida em loop do personagem, normalmente com 6 a 8 frames (4 funcionam em estilo simples), e a diferença real para a caminhada é a fase de voo: um frame em que os dois pés estão fora do chão. Sem esse frame, o que você tem é uma caminhada acelerada, e o jogador sente isso mesmo sem saber explicar.

Aqui você vai desenhar uma corrida de 4 frames e outra de 6 em 32x32, entender o que muda no tronco e nos braços, definir o timing para a engine e montar a transição de caminhada para corrida sem engasgo. O foco é fazer a corrida ler como corrida sem precisar de mais frames que a caminhada.

Corrida vs caminhada: o que muda

Se você já tem uma caminhada pronta (o post de ciclo de caminhada cobre as 4 poses-chave), a corrida não é ela mais rápida. Quatro coisas mudam:

1. Fase de voo. Na caminhada sempre há um pé no chão. Na corrida, depois do impulso, o corpo fica no ar.
2. Tronco inclinado para a frente. A cabeça vai à frente do quadril. Em 32x32, isso é 1 a 2 pixels de deslocamento da cabeça em relação à caminhada.
3. Braços dobrados em ângulo reto, balançando com mais amplitude e mais alto, perto do peito.
4. Movimento vertical maior. O corpo sobe e desce 2 pixels em vez de 1. O ponto mais baixo é logo depois do contato, quando a perna absorve o impacto.

Também muda a passada: o pé da frente toca o chão mais perto da linha do corpo, e o pé de trás chuta mais para cima. Joelho da perna livre sobe alto na passagem.

Run cycle pixel art com 4 frames

Quatro frames é o mínimo que ainda lê como corrida. Cada frame faz o trabalho de duas poses da caminhada, então a escolha das poses é tudo:

1. Contato com impulso (perna direita na frente). Pé da frente tocando o chão debaixo do joelho, perna de trás esticada, empurrando. Corpo no ponto médio.
2. Voo. Os dois pés no ar. Perna da frente dobrada com o joelho alto, perna de trás dobrada com o calcanhar subindo em direção ao quadril. Corpo 2 pixels acima do frame 1.
3. Contato com impulso (perna esquerda na frente). Espelho do frame 1, trocando as pernas e os braços.
4. Voo com a outra perna. Espelho do frame 2.

No Aseprite, desenhe o frame 1, adicione os frames seguintes com Frame > New Frame (Alt+N) e desenhe o contato oposto no frame 3 antes de fazer os voos. Use o onion skin no Aseprite com 1 frame de cada lado para manter o comprimento da passada igual entre as pernas.

O truque para 4 frames não parecerem duros: exagere a pose de voo. Joelho mais alto do que você acha razoável e o pé de trás quase encostando no quadril. Em pixel art, a pose extrema é o que o olho guarda.

Versão com 6 frames

Com 6 frames você ganha a pose de recuo, que dá peso:

1. Contato (perna direita na frente, calcanhar tocando).
2. Recuo: o corpo afunda 1 pixel, joelho de apoio dobrado, perna livre passando atrás.
3. Voo: impulso concluído, os dois pés no ar, corpo no ponto mais alto.
4. Contato com a perna esquerda.
5. Recuo com a perna esquerda.
6. Voo com a perna esquerda.

A sequência de altura do corpo fica: médio, baixo, alto, médio, baixo, alto. É essa onda, mais forte que a da caminhada, que vende a energia. Seis é o número mais equilibrado para personagem de plataforma em 32x32: lê bem em movimento e não custa o dobro de desenho.

Inclinação, fase de voo e braço

Inclinação. Desenhe o tronco inteiro inclinado, não só a cabeça avançada. Uma linha do quadril até a cabeça com 1 pixel de deslocamento a cada 4 ou 5 pixels de altura já inclina sem parecer que o personagem está caindo. Mantenha a mesma inclinação em todos os frames; variar a inclinação por frame faz o personagem balançar como bêbado.

Fase de voo. É o frame que diferencia. Confira com o onion skin desligado: no voo, deve existir pelo menos 1 linha de pixels vazia entre o pé mais baixo e a linha do chão. Se o pé encosta, o olho lê como caminhada.

Braço. Na caminhada o braço pendura e balança do ombro. Na corrida ele dobra no cotovelo, em ângulo próximo de 90 graus, e o punho sobe até a altura do peito na frente. Em 32x32, o braço é um bloco de 2 pixels de largura que alterna entre "punho à frente na altura do peito" e "cotovelo atrás e para cima". O braço do lado de trás do corpo pode ficar escondido em alguns frames, e tudo bem.

Poeira. Um ou dois pixels de poeira saindo do pé no frame de contato vendem velocidade. Faça como uma animação separada (partícula na engine) ou numa camada própria, para poder desligar.

Timing e velocidade na engine

No Aseprite, edite a duração de cada frame com P (Frame Properties). Pontos de partida:

• 4 frames: contato 80 ms, voo 80 ms. Ciclo de 320 ms.
• 6 frames: contato 70 ms, recuo 70 ms, voo 90 ms. Ciclo de 460 ms.

Deixar o voo um pouco mais longo que o resto ajuda o olho a registrar que o personagem saiu do chão.

O mesmo cuidado da caminhada vale aqui: o pé de apoio recua um número de pixels por frame, e o personagem precisa andar no mundo na mesma velocidade para não patinar. Se o pé recua 5 pixels por frame a 70 ms, são cerca de 71 pixels por segundo. Na Unity, com Pixels Per Unit 32, isso dá cerca de 2,2 unidades por segundo; na Godot, 71 pixels por segundo na escala 1. Se o game design pede outra velocidade, ajuste a velocidade de reprodução da animação, não o desenho.

Esse é o ponto em que a corrida deixa de ser só desenho: ela depende do script de movimento, da física e da máquina de estados de animação conversando.

Uma corrida bem desenhada que patina na engine continua parecendo errada. Produzir a animação já sabendo como ela vai ser tocada no jogo economiza a rodada de "desenhar de novo" que quase todo mundo passa.

Transição de walk para run

A troca entre caminhada e corrida é por velocidade. Você define um limite (por exemplo, 70% da velocidade máxima) e a engine escolhe a animação.

Unity: no Animator, crie um parâmetro float Speed e atualize no script com o valor absoluto de rb.linearVelocity.x. Do estado walk para run, uma transição com a condição Speed maior que o limite; de volta, a condição menor. Desmarque Has Exit Time nas duas para a troca ser imediata, e deixe Transition Duration em 0, porque sprite não mistura frames como esqueleto. Para começar a corrida na perna certa, use Transition Offset de 0,5 quando a caminhada estiver na segunda metade do ciclo, ou simplesmente desenhe os dois ciclos começando com a mesma perna na frente.

Godot: com AnimatedSprite2D, compare a velocidade no _physics_process e chame play("run") ou play("walk"). Para manter a perna, guarde a proporção do frame atual (frame dividido pelo total de frames do walk) e aplique no run com set_frame_and_progress. Com AnimationTree, um BlendSpace1D por velocidade faz a mesma coisa.

Uma alternativa de arte que esconde a troca: um frame de transição, com o personagem inclinando o tronco e dando um passo mais forte, tocado uma vez só entre walk e run. Em jogos de plataforma rápidos, em geral nem vale; a troca direta lê bem.

Erros comuns

Sem fase de voo. Corrida vira caminhada rápida. Pelo menos 1 frame com os dois pés no ar.

Tronco reto. A corrida parece de desenho infantil. Incline o corpo inteiro para a frente.

Braço solto como na caminhada. Dobre o cotovelo, punho na altura do peito.

Frames demais para o tamanho. Em 16x16, oito frames de corrida viram tremedeira, porque as poses intermediárias mudam 1 pixel só. Menos frames com poses mais claras.

Corpo sem subir e descer. A corrida fica "flutuando". 2 pixels de diferença entre o ponto alto e o baixo.

Velocidade do jogo sem relação com a animação. Patinação. Meça o pé de apoio.

Inclinação diferente em cada frame. O personagem balança. A inclinação é constante no ciclo.

Próximo passo

Desenhe a versão de 4 frames do seu personagem, teste na engine e só depois decida se precisa da de 6. Em seguida, faça a parada brusca (1 ou 2 frames com o corpo jogado para trás e o pé derrapando), que é a animação que mais dá sensação de controle numa corrida. Para revisar proporção e silhueta antes de animar, o guia de como criar um personagem em pixel art ajuda a ter um modelo base que aguenta essas poses extremas.