Ciclo de caminhada em pixel art: anime um personagem em 4 quadros

Um ciclo de caminhada simples em pixel art precisa de só quatro quadros: a pose inicial, um passo com a perna esquerda, a pose inicial de novo e um passo com a perna direita. Em cada passo, a perna, o cotovelo e a cabeça descem um pixel. Os quadros 1 e 3 são iguais, então você só desenha dois. Experimente aqui embaixo com o sábio e depois aperte Play.

Este sprite é largo. É mais fácil desenhar no computador, ou com o celular deitado.

Passo 1

Cores deste passo
Ferramentas
Guia

Mostrar o passo pronto

O básico de animação em um minuto

Sábio animado em pixel art andando sem sair do lugar, visto de frente
O ciclo de caminhada do curso
Slide do Roman: quatro quadros do sábio de 150 ms cada, keyframes nas pontas, um ciclo de animação de 4 quadros e 600 ms, uns 7 quadros por segundo
Dos slides do meu curso: quadro, keyframe, ciclo de animação e FPS no sábio.
  • Animação é uma ação mostrada como uma sequência de imagens, chamadas quadros.
  • Um quadro é uma única imagem da animação. Esta tem quatro.
  • Um keyframe é um quadro que marca onde uma ação começa ou termina. Aqui o primeiro e o último quadro são keyframes.
  • O ciclo de animação é a duração e o número de quadros juntos. Cada quadro aqui dura 150 milissegundos, quatro quadros dão 600 milissegundos.
  • Quadros por segundo é quantos quadros você vê em um segundo: 1000 dividido por 150 dá mais ou menos sete.

Só sete quadros por segundo, e mesmo assim fica fluido. Pixel art perdoa taxas de quadros baixas. Desenhos animados costumam começar em 24 quadros por segundo e ir bem mais alto, mas em pixel art poucos quadros já rendem muito.

O que se mexe em um passo

Os quadros 1 e 3 são exatamente a mesma pose inicial. Os quadros 2 e 4 são os passos, esquerdo e direito. Então você só trabalha em dois quadros.

Comece pela parte de fora do sprite. No passo esquerdo, a perna esquerda e parte do manto descem um pixel, o cotovelo desce um pixel e o chapéu desce um pixel. Depois volta para cima. No passo direito é o espelho, e o chapéu balança para baixo de novo. A cada passo, o sábio balança a cabeça.

Depois a parte de dentro. Enquanto a perna esquerda desce, o braço direito desce também, e o braço esquerdo fica um pouco mais curto. A estampa do manto se desloca um pixel e inclina um pouco, como se o tecido se mexesse com o corpo.

É muita coisa para acompanhar de uma vez. Se parecer demais, comece simples: anime só os passos. Depois adicione o chapéu, depois os braços, depois a textura do manto.

Uma dica: nos quadros dos passos, a parte de cima do corpo inteira fica um pixel mais baixa, então muitos pixels mudam. Selecione essa parte (M) e desça um pixel (V), tanto no Aseprite quanto no treino interativo. Depois ajuste os detalhes à mão.

Configuração do onion skin

No Aseprite, eu configuro o onion skin para aparecer atrás do sprite, no modo de tingimento vermelho e azul, com mais ou menos metade da opacidade. Assim você vê exatamente quais pixels vão se mexer no próximo quadro. No treino interativo, o quadro anterior aparece em vermelho.

Sua vez: quatro direções

Sábio animado em pixel art andando em quatro direções: de costas, de frente, para a esquerda e para a direita
O desafio bônus do curso

Quando a frente estiver funcionando, tente as costas, o lado esquerdo e o direito. Mesma ideia: os quadros 1 e 3 são a pose inicial, os quadros 2 e 4 são os passos. Eu faria as costas primeiro, porque são parecidas com a frente. Repare nos detalhes: a barra do manto balança um pouco a cada passo, e a textura se desloca. São essas coisinhas que dão ritmo a uma caminhada. A vista lateral tem o seu próprio treino: ciclo de caminhada de lado.

E quando estiver confiante, experimente. Mude como a textura se mexe, ou os membros, ou a cabeça. A animação é sua.