Girar Pixel Art sem Estragar: RotSprite e Retoque Manual

Rotacionar pixel art com a rotação comum de um editor de imagem quase sempre estraga o sprite: o contorno abre buracos, linhas viram escadas tortas e aparecem pixels soltos. O jeito certo é usar o RotSprite, um algoritmo pensado para pixel art que o Aseprite oferece na rotação de seleções, e depois fazer um retoque manual curto em cada ângulo. Para 90 e 180 graus, nenhum algoritmo é necessário: é só girar a grade.

A seguir: por que o sprite quebra, o que o RotSprite faz em linguagem simples, onde escolher o algoritmo no Aseprite e como produzir uma espada em 8 ângulos com retoque, além de quando é melhor desenhar a rotação à mão.

Rotacionar pixel art: por que o sprite quebra

Imagine uma espada de 16x16 desenhada na diagonal perfeita, com linha de 1 pixel em degraus regulares de 1 por 1. Agora gire 20 graus. Cada pixel do desenho original vai parar numa posição que não coincide com a grade. O editor precisa decidir, para cada pixel da imagem nova, qual cor ele recebe.

A rotação comum faz uma de duas coisas:

• Vizinho mais próximo (sem suavização): pega a cor do pixel original mais perto. O resultado mantém a paleta, mas a linha fica com degraus irregulares (2, 1, 3, 1, 2), alguns pixels dobram e outros somem. Em linha de 1 pixel, aparecem buracos.
• Bilinear ou bicúbica (com suavização): mistura cores vizinhas. A forma fica mais suave, mas surgem cores intermediárias que não existem na paleta, as bordas ficam com meio-tom e o sprite deixa de parecer pixel art.

Os dois problemas pioram em sprites pequenos, onde cada pixel é uma parte importante da forma. Um olho de 1 pixel pode simplesmente desaparecer.

O algoritmo RotSprite em linguagem simples

O RotSprite foi criado por Xenowhirl e ficou conhecido na comunidade de fãs de Sonic (o wiki Sonic Retro documenta a ferramenta), justamente para gerar frames girados de sprites sem borrar. A ideia dele, na descrição técnica mais citada, tem três passos:

1. Ampliar 8 vezes com uma versão modificada do Scale2x. O Scale2x é um algoritmo de ampliação para pixel art que, em vez de transformar cada pixel num bloco 2x2 igual, olha os vizinhos e arredonda cantos de diagonais. Aplicado três vezes (2x, 4x, 8x), ele transforma degraus em linhas quase contínuas. A versão do RotSprite considera cores parecidas, não só idênticas.
2. Girar e reduzir a imagem grande de volta ao tamanho original, usando vizinho mais próximo. Como a imagem ampliada tem linhas suaves, a amostragem cai em lugares que respeitam a forma.
3. Restaurar detalhes de 1 pixel que se perderam (opcional no algoritmo original).

Na prática: o RotSprite não inventa cores (a paleta continua a mesma) e preserva muito melhor a continuidade das linhas. Ele não é perfeito. Contornos ainda engrossam em alguns pontos e detalhes pequenos se deformam. Por isso o retoque manual faz parte do processo.

Girando no Aseprite e a configuração de rotação

No Aseprite, a rotação livre acontece pelas alças da seleção:

1. Selecione o sprite com o Rectangular Marquee (M) ou com Select > All (Ctrl+A).
2. Com a ferramenta de seleção ativa, olhe o context bar (a barra acima do canvas). Existe um campo Rotation Algorithm com duas opções: Fast Rotation e RotSprite. Escolha RotSprite.
3. Leve o mouse para a parte de fora de uma das alças da seleção até o cursor mudar para o ícone de rotação. Clique e arraste.
4. Segure Shift enquanto gira para travar o ângulo em passos fixos, em vez de um valor solto como 37,4 graus.
5. Para mudar o ponto de giro (pivot), use a opção de pivot no context bar ou arraste o pivot com o mouse. O padrão é o centro da seleção.
6. Pressione Enter para aplicar.

Para 90 e 180 graus exatos, use Edit > Rotate. Nesses ângulos o Aseprite não usa o RotSprite por padrão, porque girar a grade em ângulo reto não perde nada. Se por algum motivo você quiser forçar o RotSprite também nesses casos, a opção Force RotSprite even for right/straight angles fica em Edit > Preferences > Selection.

Uma curiosidade útil: o RotSprite também aparece em Sprite > Sprite Size, no campo Method, como opção de redimensionamento. Para ampliar pixel art sem borrar, porém, o caminho continua sendo escala inteira com vizinho mais próximo, como explicado em Como ampliar pixel art sem borrar.

Ferramentas grátis. O Pixelorama tem rotação com algoritmos próprios para pixel art (cleanEdge, OmniScale e rotxel aparecem na lista de recursos dele), que cumprem o mesmo papel do RotSprite. No LibreSprite e no Piskel, confira na sua versão o que a rotação oferece. Se a ferramenta só tiver rotação comum, o processo deste post continua valendo: gire, depois retoque mais.

Exemplo: espada em 8 ângulos

Vamos produzir uma espada para um jogo top-down, que aponta em 8 direções (a cada 45 graus).

Passo 1: desenhe a espada na vertical. 16x16 pixels, lâmina de 2 pixels de largura com 1 pixel de brilho, guarda de 6 pixels, cabo de 4. A vertical é o ângulo mais fácil de desenhar limpo e serve de base.

Passo 2: gere 90, 180 e 270 com Edit > Rotate. Esses ficam perfeitos, sem retoque. Você já tem 4 das 8 direções.

Passo 3: desenhe a diagonal à mão. A diagonal de 45 graus em pixel art é uma linha de degraus 1x1, e desenhar à mão é rápido. Uma lâmina de 2 pixels na diagonal vira duas linhas paralelas de degrau 1x1. Desenhe a de 45 graus uma vez.

Passo 4: gere as outras diagonais a partir da sua. Com a diagonal de 45 graus pronta, Edit > Rotate (90 graus) e os flips (Edit > Flip Horizontal, Shift+H, e Flip Vertical, Shift+V) dão 135, 225 e 315 sem perda nenhuma.

Repare que até aqui o RotSprite nem entrou. Para 8 direções, ângulo reto mais espelhamento resolve tudo, e essa é a primeira lição: use o RotSprite só para os ângulos que não saem de giro reto ou espelho.

Passo 5: para 16 direções, aí sim RotSprite. Se o jogo pedir 16 direções (a cada 22,5 graus), gere 22,5 graus a partir da vertical com RotSprite e retoque. Os outros 7 ângulos "ímpares" (67,5, 112,5, 157,5 e assim por diante) saem dele por rotação reta e espelhos. Você retoca 1 ângulo, não 8 (depois só reposiciona luz e sombra, como mostra a lista abaixo).

Girar uma espada é um exercício contido. No jogo, isso aparece em arma, nave, torreta, projétil e personagem com 8 direções, e cada um precisa de animação, consistência de luz e integração com o código. Quem aprende sozinho costuma resolver uma peça de cada vez e se perde quando o volume de sprites cresce.

Retoque manual depois da rotação

O retoque leva poucos minutos por ângulo se você seguir sempre a mesma lista:

1. Contorno contínuo. Ande pelo contorno com o olho. Onde houver buraco, preencha. Onde houver dois pixels lado a lado criando um "L" de 3 pixels, remova o do canto (o mesmo cuidado de linha pixel perfect).
2. Degraus regulares. Linhas retas em ângulo devem ter degraus repetidos (2-2-2 ou 2-1-2-1), não 3-1-2. Ajuste mexendo 1 pixel por vez.
3. Largura da lâmina. O RotSprite costuma engrossar ou afinar partes. Confira que a lâmina tem a mesma largura de ponta a ponta.
4. Brilho e sombra. A luz do jogo não gira com a espada. Se o brilho estava à esquerda na vertical, depois de girar ele precisa continuar do lado de onde vem a luz. Reposicione os pixels de luz e sombra.
5. Detalhes de 1 pixel. Gema no cabo, ponta da lâmina. Se sumiram ou dobraram, redesenhe.

Ligue o onion skin (F3) com os frames lado a lado na timeline para comparar ângulos vizinhos. Uma espada que engorda num ângulo e afina no outro pisca quando o jogador gira.

Se você quer o detalhe dessa limpeza de linha, o post sobre linhas pixel perfect mostra os padrões de degrau que leem bem.

Ângulos que funcionam melhor: 45 e 90 graus

Pixel art tem ângulos "naturais", que são os de degrau regular:

Se o seu jogo permite, prefira ângulos com degraus regulares. Uma torreta com 8 direções (0, 45, 90...) fica limpa sem esforço; com 12 direções (a cada 30 graus), cada ângulo ímpar precisa de retoque.

Quando desenhar a rotação à mão

Há casos em que a rotação, mesmo com RotSprite, dá mais trabalho que desenhar de novo:

• Sprites muito pequenos (8x8 ou menos). Cada pixel é estrutural, e o algoritmo não sabe o que é importante.
• Objetos com perspectiva. Um personagem visto em 3/4 não "gira": a vista de lado mostra outra face. Rotação 2D só serve para objetos vistos de cima ou de lado puro.
• Animação. Uma espada girando num ataque de 6 frames é melhor desenhada como arco de movimento, com smear frames, do que como 6 rotações.
• Arte com textura ou dithering. O padrão de dithering não sobrevive à rotação; vira ruído. Gire a forma sem textura e aplique o dithering depois.

Erros comuns: girar várias vezes o mesmo sprite, rotação em tempo real na engine

Girar várias vezes o mesmo sprite. Girar 15 graus, depois mais 15, depois mais 15. Cada rotação acumula erro, e o terceiro passo já parece outro objeto. Correção: sempre gire a partir do original, com o ângulo final de uma vez.

Rotação em tempo real na engine. Colocar o sprite e girar o Transform (Unity) ou a propriedade rotation do Node2D (Godot). Com filtro de vizinho mais próximo, os pixels "dançam" a cada ângulo; com filtro linear, o sprite borra. Correção: para objetos importantes, pré-gere os ângulos e troque o frame pelo código conforme a direção. Rotação contínua na engine é aceitável em partículas, detritos e objetos rápidos, onde ninguém olha o pixel.

Esquecer a luz. Girar o sprite e deixar o brilho girar junto. O objeto parece iluminado de lugares diferentes em cada ângulo.

Usar rotação para 90 graus com algoritmo. Em versões antigas ou com o Force RotSprite ligado, um giro reto pode deslocar pixels. Para ângulos retos, use Edit > Rotate.

Próximo passo

Desenhe uma espada (ou uma flecha, ou o cano de uma torreta) em 16x16 na vertical e na diagonal, gere as 8 direções com rotação reta e flips, depois produza a versão de 22,5 graus com RotSprite e retoque seguindo a lista. Monte as 16 numa fileira e compare. Se nenhuma parecer mais grossa ou mais clara que as vizinhas, você dominou o processo.

Para organizar esses frames e exportar como sprite sheet, o guia do Aseprite para jogos mostra timeline, tags e exportação.