Animação 2D na Unity: do Sprite Sheet ao Animator

Fazer sprite sheet animation na Unity leva quatro passos: importar o PNG como Sprite em modo Multiple, fatiar os quadros no Sprite Editor com Grid By Cell Size, arrastar os quadros para criar um Animation Clip e ligar os clips num Animator Controller. O que costuma dar errado não está nesses passos, está nos detalhes: o Sample Rate escondido na janela Animation e o pivô que faz o sprite pular a cada quadro.

Este guia vai do arquivo PNG ao personagem animado no Unity 6.3 LTS, com Idle e Run trocando pelo Animator, e com a correção dos três defeitos que todo mundo encontra na primeira vez.

Preparando a sprite sheet para a Unity

Uma sprite sheet é uma imagem com vários quadros de animação lado a lado. Se você ainda está montando a sua, o post sobre sprite sheet: o que é e como montar explica o formato e a exportação nas ferramentas mais usadas.

Para a Unity fatiar sem dor de cabeça, a sprite sheet precisa de:

• Células do mesmo tamanho. Um personagem de 32x32 em todos os quadros, mesmo que a pose ocupe menos.
• Personagem na mesma posição dentro da célula. Os pés na mesma linha em todos os quadros. É isso que mantém o personagem parado no lugar enquanto anima.
• Uma linha por animação, de preferência. Linha 1 é Idle, linha 2 é Run. Facilita achar os quadros.
• Espaço vazio entre células é opcional; se existir, anote quantos pixels (vai virar Padding no fatiamento).

Importando:

1. Arraste o PNG para o Project, numa pasta como Assets/Art/Characters.
2. No Inspector: Texture Type em Sprite (2D and UI), Sprite Mode em Multiple.
3. Pixels Per Unit: o tamanho do tile do jogo (16 ou 32 em pixel art).
4. Filter Mode em Point (no filter) e Compression em None, se for pixel art.
5. Apply.

O botão Open Sprite Editor só aparece com o pacote 2D Sprite instalado. Projetos de template 2D já vêm com ele; em projeto 3D, o Inspector mostra um botão para instalar no lugar.

Fatiando no Sprite Editor: Grid by Cell Size

1. Clique em Open Sprite Editor.
2. No topo da janela, abra Slice.
3. Type: Grid By Cell Size.
4. Pixel Size: o tamanho da célula, por exemplo X 32, Y 32.
5. Offset: se a primeira célula não começa no canto (margem na imagem), informe aqui.
6. Padding: o espaço entre células, se existir.
7. Pivot: Bottom para personagem de plataforma (o pivô fica nos pés). Center para objetos que giram, como projéteis.
8. Clique em Slice e depois em Apply no canto superior direito.

Por que não Automatic? O modo automático recorta cada quadro pelo contorno do desenho. Um quadro com o braço esticado vira um retângulo maior que um quadro com o braço recolhido, e o pivô de cada um cai num lugar diferente. Na animação, o personagem "anda" alguns pixels a cada quadro. Automatic é ótimo para folhas de itens soltos, não para animação.

As outras opções: Grid By Cell Count (você informa colunas e linhas em vez do tamanho) e Isometric Grid (para tiles isométricos).

O fatiamento tem outros truques (nomear frames, ajustar pivô individual, fatiar tileset com margem), que estão no guia de fatiar sprites no Sprite Editor. Aqui, o fatiamento é só o meio do caminho.

Criando a animação 2D arrastando frames

Depois do Apply, a sprite sheet aparece no Project com uma setinha. Expanda e você vê cada quadro como um sprite separado (player_0, player_1...).

Jeito rápido, que cria tudo de uma vez:

1. Selecione os quadros do Idle no Project (clique no primeiro, Shift+clique no último).
2. Arraste para a Hierarchy ou para a cena.
3. A Unity pergunta onde salvar o clip. Salve como Player_Idle.anim.

Ela cria um GameObject com Sprite Renderer, um componente Animator, um Animator Controller e o clip. Renomeie o objeto para Player e o Controller para Player.controller.

Para o segundo clip, não arraste de novo para a cena (criaria outro objeto e outro Controller). Faça pela janela Animation:

1. Window > Animation > Animation (ou Ctrl+6).
2. Selecione o Player na Hierarchy.
3. No menu de clips, no canto superior esquerdo da janela, escolha Create New Clip, salve como Player_Run.anim.
4. Selecione os quadros do Run no Project e arraste para a linha do tempo da janela Animation. Cada sprite vira um keyframe.

O clip novo é adicionado automaticamente ao Controller do objeto.

Animar sprite em outras engines segue a mesma lógica (fatiar, montar o clip, decidir a velocidade). O post sobre animação de sprite 2D em jogos trata da parte de arte: quantos quadros usar e como desenhar cada ciclo.

Sample Rate e duração de cada frame

O Sample Rate é quantos quadros por segundo o clip tem. Pixel art costuma ser animada entre 8 e 12 quadros por segundo; um Idle respirando pode ficar em 6, e um ataque rápido pede 12 a 15.

O problema: na janela Animation, o campo fica escondido por padrão. Para mostrar:

1. Com o clip aberto na janela Animation, clique no menu de opções no canto superior direito da janela.
2. Marque Show Sample Rate.
3. O campo Samples aparece ao lado dos controles de reprodução. Digite 10, por exemplo.

Um detalhe que pega muita gente: mudar o Samples não reescala keyframes já posicionados no tempo, e quando você arrasta sprites, a Unity distribui um keyframe por amostra do Sample Rate atual. Por isso, ajuste o Samples antes de arrastar os quadros, ou arraste de novo depois de mudar.

Duração diferente por quadro: animação boa raramente tem todos os quadros com o mesmo tempo. Um soco segura o quadro de impacto mais que os outros. Na janela Animation, arraste o keyframe para a direita para segurar o quadro anterior por mais amostras. Com Samples em 12, cada amostra dura cerca de 0,083 segundo; segurar três amostras dá 0,25 segundo.

Loop: selecione o .anim no Project e confira Loop Time. Idle e Run com Loop Time marcado; ataque e pulo, desmarcado. Atenção ao último quadro: o clip termina no tempo do último keyframe, então o último quadro fica na tela por uma amostra a menos se você não adicionar espaço depois dele. Se o loop parece "engolir" o último quadro, adicione um keyframe repetindo o último sprite uma amostra depois.

Até aqui você tem um personagem que anima. Um personagem que anima certo com o que o jogador faz (corre quando anda, para quando solta, ataca sem travar o movimento) envolve código, física e Animator trabalhando juntos. É nessa integração que a maioria dos projetos sozinhos fica pela metade, e é o que um curso de Unity com um jogo completo ensina a amarrar.

Ligando os clips ao Animator

Abra Window > Animation > Animator com o Player selecionado. O grafo mostra Player_Idle (laranja, o estado padrão) e Player_Run.

1. Na aba Parameters, crie um Float chamado Speed.
2. Clique com o botão direito em Player_Idle, Make Transition, clique em Player_Run. Na transição: Has Exit Time desmarcado, Transition Duration em 0 (sprite não mistura quadros), condição Speed Greater 0.1.
3. Faça a volta: Player_Run para Player_Idle, mesmas opções, condição Speed Less 0.1.

No script de movimento do personagem, uma linha atualiza o parâmetro:

animator.SetFloat("Speed", Mathf.Abs(rb.linearVelocity.x));

rb é o Rigidbody2D e animator é o componente Animator, ambos como [SerializeField] private no script. O Mathf.Abs faz a velocidade para a esquerda também contar como corrida. Estados, transições, layers e o script completo de animação estão no guia de Animator Controller.

Erros comuns: sprite pulando por pivô, frame borrado e loop errado

Sprite pulando ou tremendo durante o ciclo. Pivôs diferentes entre quadros. Confira no Sprite Editor: clique em cada quadro e veja o pivô no painel. A correção definitiva é fatiar de novo com Grid By Cell Size e Pivot igual para todos. Se a arte foi desenhada com o personagem em posições diferentes dentro da célula, a correção é na arte, alinhando os pés na mesma linha.

Personagem "afundando" no chão ou flutuando. Pivô no Center em vez de Bottom. O Transform fica no meio do corpo, e o collider e o ground check ficam desalinhados com os pés.

Frame borrado ou com linha de outro quadro na borda. Filter Mode em Bilinear, compressão ligada, ou Padding errado no fatiamento puxando pixels da célula vizinha.

Animação rápida ou lenta demais. Sample Rate. Lembre que mudar o Samples depois de posicionar os keyframes não redistribui os quadros.

Animação de pulo repetindo no ar. Loop Time marcado no clip de pulo.

Personagem virado para o lado errado. Não crie clips espelhados. Use spriteRenderer.flipX pela direção da velocidade.

Próximo passo: virar o sprite e Blend Tree 2D

Com Idle e Run funcionando, adicione o flip pela direção (flipX = rb.linearVelocity.x < 0, só quando a velocidade for diferente de zero, para o personagem não virar sozinho ao parar). Depois, se o jogo é top-down com quatro ou oito direções, o passo seguinte é a Blend Tree 2D, que escolhe o clip pela direção do movimento num único estado, em vez de uma teia de transições. E se o seu personagem vai ganhar ataque, dano e morte, revise o fatiamento no guia do Sprite Editor antes de importar as próximas folhas: acertar o padrão de célula e pivô agora poupa refazer todos os clips depois.