Sprite Pivot: Alinhar Frames para a Animação Não Tremer

O sprite pivot é o ponto do sprite que a engine coloca exatamente na posição do objeto: é ali que ele gira, escala e espelha. Quando cada frame da animação tem o pivot num lugar diferente em relação ao desenho, o personagem muda de posição a cada troca de quadro e a animação treme, mesmo com o objeto parado. A correção é de arte e de import: todos os frames com o mesmo tamanho de canvas, o personagem apoiado na mesma linha, e um pivot único que a engine respeita.

Este post mostra de onde vem o tremor, como alinhar os frames no Aseprite com onion skin e uma linha de chão, qual pivot escolher para cada tipo de sprite e como configurar na Godot e na Unity.

Sprite pivot: o ponto que a engine usa para posicionar

Pense no personagem como um recorte de papel preso por um alfinete. O alfinete é o pivot. A engine move o alfinete; o desenho vai junto. Se você troca o recorte (o frame) e o alfinete fura num ponto diferente do desenho, o personagem pula.

Toda engine guarda o pivot como uma posição relativa ao retângulo do frame: "centro", "base no meio", ou um pixel específico. Isso tem uma consequência importante: se o retângulo muda de tamanho entre frames, o pivot calculado também muda, mesmo que o número seja o mesmo. "Centro" de um frame de 32x32 é o pixel 16, 16. "Centro" de um frame de 28x30 é o pixel 14, 15. O personagem desenhado no mesmo lugar acaba deslocado.

Por isso a regra que resolve a maioria dos casos é simples: todos os frames de um personagem com o mesmo tamanho e o mesmo pivot.

Animação tremendo: canvas variável e trim

As três causas mais comuns de animação tremendo:

1. Personagem desenhado fora do lugar. No frame 3 da corrida, o corpo está 2 pixels mais à direita que no frame 2, sem motivo de animação. O canvas é igual, o pivot é igual, mas o desenho não.
2. Frames de tamanhos diferentes. Comum quando cada frame vem de um arquivo PNG separado, recortado no tamanho do desenho, ou quando a sprite sheet é fatiada no modo automático, que recorta cada frame justo no desenho.
3. Trim no export sem guardar o deslocamento. O Aseprite tem no File > Export > Export Sprite Sheet (Ctrl+E) as opções Trim Sprite, Trim Cels e By Grid na seção de bordas. Trim Cels corta o espaço vazio de cada frame separadamente: economiza espaço na folha, mas cada frame sai com um tamanho. O Aseprite grava no JSON o deslocamento original de cada frame (campos spriteSourceSize e sourceSize), e só funciona se a engine ler esse JSON.

Para saber qual é o seu caso, abra a sprite sheet exportada e passe uma régua: se os frames têm tamanhos diferentes, é a causa 2 ou 3. Se são iguais, é a causa 1, e o conserto é no desenho.

Alinhamento de frames no Aseprite com onion skin

No Aseprite, todos os frames de um arquivo dividem o mesmo canvas, o que já elimina a causa 2 enquanto você trabalha lá dentro. Falta garantir que o desenho fique no lugar.

1. Canvas com folga. Para um personagem de 32 pixels de altura com ataque de espada, use um canvas de 48x32 ou 64x48. O canvas precisa caber o frame mais largo da animação inteira. Ajuste em Sprite > Canvas Size.
2. Camada de referência do chão. Crie uma camada chamada ref, desenhe uma linha horizontal de 1 pixel na altura dos pés (por exemplo, y 31 num canvas de 32 de altura) e uma linha vertical curta no centro do corpo. Deixe a camada no topo, com opacidade baixa, e trave com o cadeado. Antes de exportar, esconda a camada (o olho), e ela não sai no PNG.
3. Onion skin ligado. Aperte F3 para ver os frames anterior e seguinte por transparência. Com o onion skin, você enxerga se o quadril e os pés estão subindo ou andando para o lado sem querer.
4. Pés na linha. Em animação de idle e corrida, pelo menos um pé toca a linha do chão em todos os frames de contato. Em pulo, o pé sai da linha, e isso é animação, não erro.
5. Centro do corpo na linha vertical. O tronco pode balançar 1 pixel para cada lado, mas não pode "andar" pelo canvas.

O post de onion skin no Aseprite mostra a configuração da quantidade de frames e das cores do onion skin. O que importa aqui é usar o onion skin como régua, não só como referência de pose.

Nas ferramentas grátis o fluxo é igual: o LibreSprite herda a mesma lógica de canvas único e onion skin do Aseprite, o Pixelorama tem onion skin na timeline e guias arrastáveis da régua, e o Piskel tem onion skin no painel lateral. Em qualquer uma, a camada de referência do chão funciona do mesmo jeito.

Com os frames alinhados, juntar essa animação com física, troca de estado e câmera dentro de um jogo é o passo seguinte, e é onde muita gente que anima bem trava sozinha: o personagem anima lindo no Aseprite e escorrega, afunda ou pula de lugar na engine. O curso de Arte 2D trabalha a animação já pensando em como ela entra no jogo.

Pivot pixel art: pés, centro ou base

Escolha o pivot pelo que o sprite faz no jogo:

Em pixel art, atenção a um detalhe: o "centro" de um canvas de largura par (32) cai entre dois pixels. Se o personagem tem um eixo de 1 pixel no meio (nariz, fivela), ele fica meio pixel desalinhado do pivot e, ao espelhar, pula 1 pixel. Duas saídas: desenhar o personagem simétrico em relação à linha entre os pixels 15 e 16, ou usar canvas ímpar (31 ou 33 de largura). A primeira costuma ser mais simples.

Definindo o pivô na Godot (offset) e na Unity (Sprite Editor)

Na Godot 4, o Sprite2D e o AnimatedSprite2D não têm um campo chamado pivot. Eles têm duas propriedades:

• centered: ligada por padrão, coloca o centro da imagem (ou do frame) na posição do nó.
• offset: desloca o desenho em relação à posição do nó.

Para pivot nos pés com frames de 32x32: mantenha centered ligado e coloque offset em (0, -16). O centro do frame sobe 16 pixels, e a base do frame passa a ficar na posição do nó. Outra forma é desligar centered (o canto superior esquerdo vai para a posição do nó) e usar offset (-16, -32). Como o AnimatedSprite2D usa o mesmo offset para todos os frames, os frames precisam ter o mesmo tamanho; daí a importância do canvas fixo. Se a sprite sheet tem margens, o post sobre sprite sheet explica como montar a folha em grade.

Na Unity 6.3, o pivot é definido por sprite no Sprite Editor. Fatie a sheet com Grid By Cell Size (todos os frames do mesmo tamanho) e escolha Pivot: Bottom (o centro da base, BottomCenter na API) antes de clicar em Slice. Para um ponto exato, use Custom com a unidade em pixels e digite o pixel dos pés. O passo a passo completo, com a fatia e a forma de colisão, está no post sobre o Sprite Editor da Unity. Evite o fatiamento Automatic para personagens animados: ele recorta cada frame justo no desenho, e é exatamente a causa 2 do tremor.

Nas duas engines, o espelhamento (flip horizontal) acontece em volta do pivot ou do centro do sprite. Pivot fora do eixo do corpo faz o personagem "pular" para o lado ao virar. Se isso acontece, o problema é o pivot ou o desenho fora do centro, não o código.

Erros comuns: trim no export sem guardar o offset

Trim Cels ligado sem importador. Cada frame sai de um tamanho e a engine não sabe onde ele estava. Exporte sem trim, ou use um importador que leia o JSON do Aseprite.

Frames de arquivos diferentes. Idle num arquivo de 32x32, ataque noutro de 48x32. Na engine, o pivot "Bottom" (centro da base) de cada um cai em pixels diferentes do corpo. Use o mesmo canvas para todas as animações do personagem, com o corpo na mesma coordenada.

Linha de chão esquecida no export. A camada ref sai no PNG. Esconda antes do Ctrl+E.

Pivot por sprite diferente na Unity. Alguém ajustou um frame à mão e esqueceu os outros. Selecione todos no Sprite Editor e confira.

Corpo andando no canvas. O onion skin mostra; a linha vertical de referência mostra melhor ainda.

Canvas par com personagem de eixo ímpar. Pula 1 pixel ao espelhar. Ajuste o desenho ou o canvas.

Próximo passo

Pegue uma animação de corrida que você já tem, abra no Aseprite, crie a camada de referência do chão e passe frame a frame com o onion skin ligado. Corrija o que andou, exporte sem trim numa grade e teste na engine com o pivot nos pés. Se a animação ainda parece dura, o problema já não é o pivot: é timing e pose, e o post sobre onion skin no Aseprite é um bom ponto para refinar os intervalos.