[Tutorial] Animando um personagem

Após o excelente feedback que recebi sobre a aula de como criar um personagem em pixel art, desta vez estou trazendo um tutorial de como não só criar um personagem mas também como animá-lo! E o melhor, você apenas precisará do Photoshop para fazer todo o processo.

Ao final deste artigo, você criará e animará o coelho a seguir e estará apto a criar seus próprios personagens animados:

Então vamos lá?

1. Projetar o personagem

Passo 1

Antes de criarmos uma animação, precisamos ter um personagem, certo? Nesse caso, criaremos um coelho e o primeiro passo (que pode ser opcional) é criar um esboço dele à mão, para facilitar o processo criativo.

O esboço feito para o nosso exemplo será esse:

Passo 2

Agora transformaremos esse coelho em pixel art. Então vamos criar um novo arquivo (Arquivo > Novo) e definiremos o tamanho do projeto para 400 px x 400 px. Uma dica bem legal, é dar bastante zoom no projeto, assim você consegue melhor manipular os pixels. Após, selecione a ferramenta Lápis para desenhar um pixel de cada vez e comece criando os olhos do coelho, conforme o exemplo:

Os olhos serão simplesmente duas linhas próximas umas das outras. Cada olho tem 3 px de altura por 1 px de largura e a cor preta.

Passo 3

Com os olhos feitos, você pode prosseguir com o nariz do coelho e alguns outros detalhes. Não se preocupe muito com detalhes por enquanto.

Passo 4

Agora podemos suavizar algumas dessas linhas. Também é legal por um dente na frente, já que coelhos têm essa característica. Obs: Utilize a ferramenta Borracha para apagar determinados pixels. 

Passo 5

O nosso coelho tem que sorrir:

Passo 6

Agora vamos adicionar duas orelhas ao coelho.

Passo 7

É legal dobrarmos essas orelhas dele, para dar um visual mais legal:

Passo 8

Um coelho sem um bochechão não é um coelho! Então vamos completar a cabeça criando uma bochecha nesse nosso coelho:

Passo 9

Aqui criaremos um corpo para o coelho e começaremos pelo tronco:

Passo 10

Adicionaremos pernas curtas e pés grandes ao coelho. Veja só como ficará:

Passo 11

Por fim, adicionaremos um braço ao coelho, terminando assim o personagem em uma posição “idle” (estática). O formato do braço é bem similar ao do tronco:

2. Adicionando cores

Passo 1

Agora iremos colorir o nosso personagem. Para isso, um bom macete é utilizar a ferramenta Balde de Tinta. Com ela você conseguirá preencher uma grande área com uma cor toda de uma vez. Mas para pintar áreas pequenas, basta utilizar a ferramenta Lápis também. Você pode usar a cor que achar melhor, no nosso exemplo, ele ficará assim:

Passo 2

Vamos adicionar alguns detalhes de cores, como uma barriga branca, dente branco e um toque rosa no nariz:

Passo 3

O personagem já parece bom, certo? Mas que tal adicionarmos mais alguns detalhes? Vamos por algumas sombras nele, apenas selecionando a cor atual do corpo e deixando-a mais escura um pouco.

Passo 4

Para finalizar, colocaremos mais alguns detalhes na pintura do coelho. Alguns pixels internos na boca e nariz foram substituídos por um marrom escuro. Bem como adicionamos uma cor um pouco mais clara nas partes das sombras:

3. Desenhando os quadros para animação

Agora faremos o nosso coelho ter algum movimento em loop. Para isso, será necessário desenhá-lo em 6 quadros com posições diferentes.

Passo 1

Vamos tirar os membros do coelho por enquanto. Obs: Duplique a sua camada atual (Ctrl + J) para não perder o progresso feito até o momento e faça essa modificação na camada cópia. Após duplicar, torne a camada debaixo invisível para não atrapalhar na visualização. Isso acontece porque a cabeça e o tronco do personagem praticamente são estáveis durante toda a animação. Você pode criar uma linha embaixo do personagem para servir de referência como um “chão”.

Passo 2

Vamos inclinar o tronco para frente. Para fazer isso é bem simples, selecione a ferramenta de marcação retangular (tecla M) e selecione a cabeça e um pedaço do pescoço, após, selecione a ferramenta de movimentação (tecla V) e aperte duas vezes a seta direcional do seu teclado para a direita, para mover 2px para a direita. Assim, a área selecionada moverá, ficando desta forma:

Passo 3

Antes de criarmos as pernas é importante entendermos que precisaremos criar 6 quadros de animação e cada quadro conterá as pernas em uma posição diferente, simulando uma corrida. Utilizaremos uma referência com a posição desejada para a perna em cada quadro:

Passo 4

Crie uma nova camada e copie e cole o seu personagem nela, após, coloque 6 cópias lado a lado e adicione a referência acima nessa camada, isso serve para facilitar na hora de criar as pernas:

Passo 5

Criaremos uma perna cobrindo cada linha azul da referência, assim conseguiremos criar mais rápido e tendo a movimentação correta do coelho:

Passo 6

Para que as pernas corram, elas devem mover alternadamente, de modo que quando uma perna é estendida para a frente, a perna oposta é estendida para trás.

Ao fazer isso, crie antes uma nova camada para essas pernas. Essa nova camada deve estar por trás da camada do corpo de coelho:

Muito bem! Estamos quase lá! Se fôssemos finalizar do jeito que está agora, a animação ficaria assim:

Passo 7

Agora vamos adicionar os braços! Para isso, como feito anteriormente com as pernas, utilize a referência a seguir para criar os membros superiores:

Passo 8

Crie uma nova camada para adicionarmos os braços. Colocando a referência anterior por cima, ficará mais fácil. Você pode fazer os braços mais “gordinhos”. O resultado será esse:

Passo 9

Agora faremos o braço oposto. Crie uma nova camada para ele e faça na posição oposta, ficando assim:

E tcharan! Com braços e pernas, seu personagem já estará assim:

Passo 10

Para dar mais realismo ao movimento, podemos fazer a orelha e a bochecha terem uma leve movimentação. Para isso, na animação 3 e na 6, modifique a orelha e a bochecha, deixando-as diferentes das outras:

Ficará assim:

Passo 11

Podemos – e devemos – criar uma calda para o nosso personagem, não!? Para isso, basta adicionarmos ela puxando alguns pixels na cor branca para traz do coelho. Você pode criá-la em uma nova camada por traz do corpo, ficando assim:

4. Animando!

Temos 6 imagens para 6 quadros de animação. Temos que colocá-las em ordem e exportar uma de cada vez!

Passo 1

Selecione todas as camadas do seu personagem (na aba camadas – ou layers – selecione todas segurando a tecla Ctrl e clicando uma por uma) e mescle todas em uma (Ctrl + E). Assim, todas as suas camadas deverão tornar-se uma só.

Obs: O fundo não pode ter cor, viu? Se tiver criado alguma cor de fundo em algum momento, delete antes de mesclar.

Vamos criar um novo arquivo (Arquivo > Novo) com as dimensões 400px por 400px.

Volte ao projeto anterior e vá selecionando os 6 quadro a quadro e colando no novo projeto. Para selecionar quadro a quadro, basta utilizar a ferramenta de Seleção Retangular (tecla M) e selecionar uma a uma.

Quando for colar no novo projeto, crie uma camada (Ctrl + Alt + Shift + N) para cada quadro!

É normal que fiquem uma sob a outra:

Reforçando: cada imagem deverá ficar em uma camada separada! Assim:

Passo 2

Para fazer a animação no Photoshop, precisaremos abrir a janela de linha do tempo (Janela > Linha do Tempo). Com a janela aberta, pressione o botão Criar Animação de Quadro e em seguida, pressione o botão de opções no canto superior direito da janela e selecione a opção Criar Quadros das Camadas ficará assim:

Passo 3

Por fim, selecione todos os quadros e ajuste o atraso (escolhi um atraso de 0,1 segundo) e defina as opções de loop para Para Sempre (ou Forever).

Pronto! Você tem seu coelho correndo em loop!

O que fazer agora?

Você pode exportar um arquivo .gif para mostrá-lo aos seus amigos ou exibi-lo na internet. Além disso, você também pode exportar imagem por imagem (lembra dos 6 quadros/camadas?) e usá-lo em um jogo! Os 6 quadros juntos compõem um sprite.

Tenho certeza de que com as técnicas mostradas nesse tutorial você já consiga criar seus próprios personagens e animar eles! Com um pouco de treinamento e foco, os resultados virão.

Créditos: René Alejandro

Gostou desse artigo? Temos mais em nosso blog: www.crieseusjogos.com.br

Também temos vídeos toda semana em nosso canal do Youtube: Crie seus jogos – Youtube

Baixe gratuitamente: os passos para desenvolver jogos de sucesso