Slime em Pixel Art: Criatura Simples com Animação

Um slime em pixel art é o melhor primeiro inimigo para aprender animação: forma simples, sem membros, e um movimento que é quase todo squash and stretch. Neste tutorial, você desenha um pixel art slime em 16x16 no Aseprite com 3 a 4 cores e um brilho, anima um idle de 4 frames e um pulo de 6 frames com antecipação, voo e aterrissagem, e exporta tudo como sprite sheet para a engine.

O foco é aplicar os princípios de animação no corpo mais simples possível. O que você aprende aqui (manter o volume, antecipar, dar peso com timing) vale para qualquer personagem depois.

Pixel art slime: por que é o primeiro inimigo ideal

• Forma de uma peça só. Uma gota com olhos. Sem braço, perna ou arma para sincronizar.
• Movimento que mostra os princípios. Amassar, esticar, antecipar, cair com peso. Tudo visível em poucos pixels.
• Leitura instantânea. Jogador reconhece slime na hora, o que facilita o design do jogo: é o inimigo fraco do começo.
• Variação barata. Cor, tamanho e olhos geram uma família inteira de inimigos com o mesmo desenho base.
• Poucos frames. Idle e pulo cobrem o comportamento todo de muitos jogos.

Forma e paleta: 3 a 4 cores e brilho

Paleta. Para um slime verde, quatro cores da mesma família, do escuro ao claro, mais um branco opcional para o brilho:

Evite contorno preto puro: um verde muito escuro deixa o slime mais "gelatinoso" e integrado ao cenário.

Forma. Pense numa gota achatada: base reta e larga (o slime está apoiado no chão), topo arredondado. A largura é maior que a altura. Os olhos ficam no terço superior, um pouco para o lado para onde ele olha.

Desenhando o slime em 16x16

1. Canvas. File > New, 16x16, fundo transparente. Ative a grade de pixel (View > Show > Pixel Grid) e abra o preview em tamanho real (View > Preview).
2. Silhueta. Com a cor de contorno, desenhe a base na última linha (linha 15, contando de 0) com cerca de 14 pixels de largura. Suba as laterais e feche o topo numa curva, até mais ou menos a linha 6. O corpo fica com uns 14x10 pixels. A curva segue a regra de segmentos que diminuem em sequência (3, 2, 1, 1), sem degrau irregular.
3. Preenchimento. Balde de tinta (G) com a cor base dentro do contorno.
4. Sombra. Com a cor de sombra, pinte as 2 ou 3 linhas de baixo do corpo e a borda do lado oposto à luz (luz vindo de cima à esquerda, sombra embaixo e à direita).
5. Luz. Uma faixa curva de cor clara no topo, do lado da luz.
6. Brilho. Dois ou três pixels de brilho no alto à esquerda, separados do contorno por 1 pixel de base. É o detalhe que diz "isto é gosma brilhante".
7. Olhos. Dois olhos de 1x2 pixels (verticais), na cor de contorno ou preto, com 2 ou 3 pixels de distância entre eles.

Confira em 1x no preview: o slime precisa ser reconhecido na hora. Se o brilho e os olhos viram ruído, simplifique.

Idle com squash and stretch

O idle é o slime "respirando": amassa e estica levemente, com a base sempre colada no chão.

Configuração. Duplique o frame 1 três vezes (Alt+N cria um frame novo copiando o atual). Ligue o onion skin com F3 para ver os frames vizinhos em transparência. Se é a primeira vez com essa função, o post sobre onion skin no Aseprite mostra as opções.

Regra do volume: quando o slime fica 1 pixel mais largo, fica 1 pixel mais baixo, e vice-versa. Assim a quantidade de "gosma" parece constante. Se ele ficar maior em todas as direções, parece que está inflando.

Para cada frame, ajuste o contorno, depois refaça sombra, luz e brilho na mesma posição relativa. Olhos e brilho sobem e descem junto com o topo do corpo.

Durações. Clique com o botão direito no número do frame, Frame Properties, e defina a duração. Durações diferentes por frame dão um ritmo orgânico; tudo igual parece mecânico.

Tag. Selecione os 4 frames na timeline e crie uma tag chamada idle (Frame > Tags > New Tag). Nas propriedades da tag, a direção pode ficar em Forward com loop. O post sobre tags de animação no Aseprite explica tags, direções e como elas vão para o JSON.

Pulo: antecipação, voo e aterrissagem

O pulo é onde o slime ganha personalidade. Seis frames, na mesma tag pulo:

Os princípios em ação:

• Antecipação (frame 1). Antes de subir, o slime amassa. Sem ela, o pulo parece sair do nada. A duração mais longa dá ao jogador tempo de ler que ele vai pular, o que também é design de jogo: é o aviso do ataque.
• Esticar na velocidade (frames 2 e 4). Quando se move rápido, ele estica na direção do movimento. O frame de decolagem é curto: é velocidade.
• Arredondar no topo (frame 3). No ponto mais alto, a velocidade é quase zero, e o slime relaxa.
• Impacto (frame 5). Amassa mais que na antecipação, mostrando peso.
• Recuperação (frame 6). Volta ao neutro. Sem ele, o pouso parece congelado.

Uma decisão importante: desenhe todos os frames com a base no mesmo lugar do canvas e deixe a engine mover o slime para cima e para baixo durante o pulo. Assim, o canvas continua 16x16, o pivô fica nos pés e a altura do pulo é ajustada no código, sem redesenhar. Nos frames 2 e 3, o slime pode "descolar" a base 1 ou 2 pixels dentro do canvas para reforçar a ideia de saída do chão, se o canvas permitir.

Desenhar o pulo é uma parte; fazer ele combinar com o movimento do código (o salto começando exatamente depois da antecipação, a aterrissagem tocando no frame do impacto) é onde a animação de inimigo realmente funciona ou não. É uma integração entre arte e engine que costuma travar quem aprende sozinho.

Variações: cor, tamanho, olhos

Com o slime pronto, a família de inimigos sai quase de graça:

• Cor. Troque a paleta: azul (água), vermelho (fogo), roxo (veneno). No Aseprite, em modo indexado (Sprite > Color Mode > Indexed), basta mudar as cores da paleta e todos os frames atualizam. Em RGB, use Edit > Replace Color para cada tom.
• Tamanho. Um slime grande de 32x32 para chefe ou para o slime que se divide em dois pequenos ao morrer. Redesenhe na escala nova em vez de ampliar, para manter o pixel do mesmo tamanho que o resto do jogo.
• Olhos. Olhos bravos (inclinados), um olho só, olhos fechados (slime dormindo). A expressão muda a leitura do inimigo.
• Acessórios. Um capacete, uma coroa, uma folha no topo. Desenhe como camada separada para reaproveitar em vários slimes.
• Transparência. Um slime de gelo com fundo visível através dele: use uma cor de base com opacidade parcial, se a engine e o estilo do jogo aceitarem.

Mantenha a silhueta e o ritmo da animação iguais entre variações. O jogador aprende o comportamento pelo movimento; a cor diz o que muda (dano, resistência).

Erros comuns: volume que muda, brilho que pisca

Volume que muda. O slime cresce em todas as direções no frame esticado. Confira a regra: mais largo, mais baixo.

Brilho que pisca. O reflexo pula de lugar entre frames ou some num deles. Ele deve acompanhar o topo do corpo, sempre do mesmo lado. Com onion skin ligado, compare a posição.

Base que flutua. No idle, a base deixa o chão em algum frame. O slime parece tremer. A base fica na mesma linha em todo o idle.

Pulo sem antecipação. O slime decola do nada. Adicione o frame amassado antes.

Durações iguais. Todos os frames a 100 ms. O pulo fica sem peso. Frames de impacto e de velocidade são curtos; antecipação e topo são mais longos.

Detalhe demais. Textura, bolhas internas e três brilhos em 16x16 viram ruído. Menos é mais nesse tamanho.

Exportando o slime para a engine

No Aseprite, File > Export > Export Sprite Sheet. Em Layout, Sheet Type By Rows; em Sprite, marque Split Tags, para cada tag ficar numa linha própria. Em Borders, deixe Trim desligado, para todos os frames manterem 16x16 e o pivô no mesmo ponto. Em Output, marque o PNG e JSON Data, com Tags em Meta. O resultado é slime.png com duas linhas (idle e pulo) e slime.json com os nomes das tags e a duração de cada frame.

No Godot, defina o filtro de textura como Nearest (em Project Settings > Rendering > Textures > Canvas Textures > Default Texture Filter), crie um AnimatedSprite2D e, no painel SpriteFrames, adicione frames a partir da sprite sheet, informando 6 colunas e 2 linhas e selecionando os frames de cada linha, para criar as animações idle e pulo. Ajuste a velocidade de cada uma para se aproximar das durações do Aseprite. O post sobre exportar sprite sheet do Aseprite para o Godot mostra o caminho completo, incluindo a leitura das durações.

Na Unity, importe com Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit 16, Filter Mode Point (no filter) e Compression None. No Sprite Editor, Slice > Grid By Cell Size com 16x16 e pivô Bottom. Selecione os frames de uma linha e arraste para a cena: a Unity cria o clipe de animação e o Animator. Ajuste o tempo de cada frame no clipe para respeitar as durações diferentes.

O próximo passo: anime agora uma terceira ação curta, o slime sendo atingido (2 frames: amassado de lado e piscando na cor clara) e morrendo (3 frames: achatando até virar uma poça). Com idle, pulo, dano e morte, você tem um inimigo completo, e o mesmo processo serve para o próximo inimigo do jogo.