Animação subpixel

O que é

Num sprite pequeno, o menor movimento inteiro é um pixel, e um pixel pode ser muito. Um personagem de 16 pixels que levanta o peito um pixel para respirar parece estar com soluço.

A animação de subpixel contorna isso. Em vez de mover a forma, você muda a cor dos pixels ao longo da borda. Se um pixel da borda passa da cor do fundo para um meio-tom e depois para a cor cheia da forma, a borda parece avançar um terço de pixel, depois dois terços. O olho lê um movimento pequeno e suave.

Por que os artistas fazem isso

• Idles suaves. Respirar, flutuar e balançar parecem calmos em vez de bruscos.
• Sprites pequenos. Com 16 ou 32 pixels não há espaço para movimentos grandes, então as frações importam.
• Suavidade sem mais pixels. Acrescenta resolução aparente ao movimento sem redesenhar num tamanho maior.

Erros comuns

• Cores intermediárias demais. Se você acrescenta cores novas só para as bordas, a paleta cresce e o sprite fica borrado. Use cores que já estão nas suas rampas.
• Usá-la para movimentos grandes. Um ciclo de corrida ou um golpe de espada se leem melhor com poses claras em pixels inteiros.
• Bordas inconsistentes. Se um lado de uma forma usa degraus subpixel e o outro salta, a forma parece esticar.
• Cintilação. Mudar um pixel para lá e para cá entre os quadros sem uma direção clara parece ruído, e não movimento.

Como fazer à mão

1. Desenhe as poses inicial e final, a um pixel de distância.
2. Entre eles, acrescente um ou dois quadros em que só os pixels de borda mudam.
3. Para cada pixel da borda que será coberto pelo movimento, passe-o por uma cor intermediária da rampa.
4. Reproduza o loop na velocidade do jogo e com zoom de 1×. Ajuste o timing antes de adicionar mais quadros.
5. Mantenha todos os outros pixels do sprite parados, para que a mudança seja lida como movimento da borda.

Onde o Pixor se encaixa

O nó de Estilo Movimento subpixel do Pixor mostra uma parte que se move menos de um pixel por quadro nos pixels da borda, como um artista faria. Além disso, o Pixor mantém uma animação renderizada estável o bastante para que valha a pena adicionar retoques de subpixel. O pivô fica preso a um pixel em cada quadro e lado, então o corpo não treme. As faixas de luz se mantêm até a superfície claramente virar, o pontilhado fica preso à superfície, e uma passada de limpeza remove pixels soltos e traços que aparecem por um quadro só. O Pixor também mede a tremulação ao longo de um clipe.

A partir daí, exporte para o Aseprite, onde cada ação e lado tem sua própria tag, e adicione retoques de subpixel numa camada separada. Quando você renderiza de novo, as camadas pintadas à mão ficam nos seus quadros.

Relacionados

• Mixels: por que os movimentos devem ficar na grade de pixels
• Sprites pré-renderizados
• Animação, Aseprite e o manual de exportação