Animador de Sprites: Pré-visualize e Exporte Animações de Folhas de Sprites

Um animador de sprites é uma ferramenta que pega uma folha de sprites — uma grade de frames de animação empacotados em uma única imagem — e a reproduz para que você possa avaliar timing, espaçamento e silhueta antes que a arte chegue perto de um jogo. O animador de sprites do Neta Studio lê a folha, estima o tamanho do frame, a contagem de colunas e a ordem de reprodução a partir das dimensões da imagem, e começa a reproduzir em um canvas no navegador. Nada é enviado.

Um frame estático não diz nada sobre um ciclo de caminhada. Você precisa ver o frame 3 contra o frame 4, a pose de contato contra a pose de passagem, e se o conjunto todo deriva porque uma célula está um pixel fora. O animador faz isso ao carregar, depois permite corrigir o tamanho do frame, a ordem e o FPS manualmente quando a estimativa está errada.

Pré-visualize uma animação de folha de sprites

Solte um PNG ou WebP no canvas. O animador lê a largura e a altura intrínsecas e infere uma grade plausível: ele fatora as dimensões e procura uma contagem de colunas em número inteiro pequeno (2 a 16) que produza células aproximadamente quadradas em tamanhos comuns de sprite. Uma folha 512×512 com 4 colunas de frames de 128px, uma folha 384×256 com 6 colunas de frames de 64px — ambas acertam a estimativa na maioria das vezes. Uma folha 300×300 não acerta, porque 300 não divide de forma exata em 16/32/64, então você definirá o tamanho do frame manualmente.

A reprodução roda em um canvas HTML com `imageSmoothingEnabled = false`, então os pixels permanecem nítidos em escala inteira. Escalar para 4× ou 8× é nearest-neighbour, que é o que você quer para pixel art: um frame de 32px exibido a 8× é um sprite de 256px na tela, com cada pixel de origem expandido em um bloco 8×8. Suavização bilinear transformaria isso em uma massa cinzenta.

Como tudo acontece no canvas, o arquivo nunca sai da máquina. Não há upload, fila nem conta. Você pode soltar a folha não lançada de um cliente e ela permanece na aba. A contrapartida é que folhas muito grandes ficam limitadas pela memória do navegador — um PNG 4096×4096 tem cerca de 67MB decodificado em RGBA, o que é tranquilo em desktop e apertado em um tablet de entrada.

Defina tamanho do frame, ordem e FPS

Três configurações decidem o que você realmente vê: tamanho do frame, ordem de reprodução e velocidade. Erre qualquer uma delas e a animação parecerá lixo por motivos que não têm nada a ver com a arte.

O tamanho do frame é a largura e a altura de uma célula em pixels. O animador oferece 16, 32, 64 e 128 como opções padrão, além de um valor personalizado. Esse valor deve dividir as dimensões da folha exatamente. Um frame de 128px em uma folha de 400px de largura dá 3.125 colunas, que o renderizador arredonda para baixo, para 3, e deixa uma faixa de 16px de pixels não usados à direita — esses pixels então aparecem como uma lasca do frame vizinho na última coluna. Se seus frames parecem cisalhados na borda direita, o tamanho do frame não divide a largura da folha.

A ordem é row-major ou column-major. Row-major (o padrão comum, e o que a maioria dos exportadores produz) lê da esquerda para a direita, depois passa para a linha seguinte. Column-major lê de cima para baixo, depois avança para a direita. Uma folha de caminhada exportada em colunas mas lida como linhas reproduz o frame 1, depois o frame 5, depois o frame 9 — um passo que salta um quarto da animação a cada tick. A correção é um alternador, mas você precisa reconhecer o sintoma: movimento que pula.

FPS e `image_speed` são controles diferentes que as pessoas confundem. FPS é quantos frames o player avança por segundo. `image_speed` (termo do GameMaker, e o que as pessoas chegam pesquisando) é um multiplicador da taxa de animação do sprite em relação à velocidade da room; 1.0 significa que a folha reproduz um frame por passo do jogo, 0.5 significa a cada dois passos. No animador do navegador, defina o FPS diretamente. Se você está portando um sprite do GameMaker e seu personagem anima em velocidade dupla, verifique `image_speed` antes de recortar a folha.

Ciclos de caminhada, idles e ataques

Três animações carregam a maior parte da legibilidade de um personagem, e cada uma tem uma forma distinta de falhar. Nenhuma delas falha do mesmo jeito, então uma ferramenta de pré-visualização que só repete um clipe genérico perde o ponto. Abaixo, os modos de falha estão separados por tipo de animação.

A regra para todas as três: pré-visualize na escala final do jogo, não ampliada. Uma caminhada que funciona a 8× muitas vezes colapsa a 1× porque a elevação da perna é de 2 pixels e o contraste entre o pé levantado e o chão é baixo demais. Reduza a pré-visualização para o tamanho que o jogador realmente verá antes de aprovar qualquer coisa.

Uma folha de caminhada de quatro direções geralmente é ordenada como baixo, esquerda, direita, cima — baixo virado para a câmera, cima virado para longe, esquerda e direita como o par horizontal. Alguns exportadores usam baixo, cima, esquerda, direita. Se seu personagem faz moonwalk quando você aperta cima, as linhas estão trocadas e você está reproduzindo a linha de baixo para uma entrada de cima. Isso é uma correção de 2 linhas no player, não uma reexportação.

Para movimento em 8 direções você precisa de diagonais: baixo-esquerda, baixo-direita, cima-esquerda, cima-direita. Com quatro direções espelhadas horizontalmente você consegue 4 linhas baratas (esquerda e direita são a mesma arte invertida, e é por isso que muitas folhas têm 4 linhas e não 8). Movimento diagonal com apenas 4 direções força a engine a escolher a face mais próxima, o que dá um snap visível em uma entrada diagonal. Se seu jogo suporta movimento diagonal, reserve orçamento para 8 linhas distintas ou aceite o snap.

Contagem de frames: 6 ou 8 frames por direção é comum em 16–32px. Com 4 frames, uma caminhada parece picotada, mas funciona em tamanhos pequenos; com 10 frames, o espaçamento entre as poses de contato e de passagem fica apertado o suficiente para exigir timing por frame, que um player de FPS uniforme não consegue expressar. O animador do navegador reproduz de forma uniforme, então monte sua folha com espaçamento uniforme se pretende pré-visualizá-la aqui.

O idle é a animação que o jogador encara enquanto nada acontece, então carrega o maior peso por frame. A estrutura padrão é um loop de respiração: o peito sobe, os ombros levantam um pixel, o peso se desloca, e volta. Squash e stretch é o que impede que pareça um sprite estático sendo cutucado. No beat de descida, comprima o personagem um ou dois pixels na vertical e alargue-o em um; no beat de subida, faça o inverso.

A falha comum é exagerar no squash. Um personagem de 32px comprimido em 4px equivale a 12.5% da altura e parece geleia. Um pixel de alongamento vertical em um sprite de 32px é 3% e parece respiração. Se seu idle parece que o personagem está quicando em um trampolim, você provavelmente escalou a célula inteira em vez do personagem dentro dela — o frame mudou de tamanho em relação à grade.

Pré-visualize o idle no mesmo FPS que você vai lançar. Um idle a 6 FPS deriva; a 12 FPS, respira. Como um idle lento é basicamente a mesma imagem com pequenos deslocamentos, o ponto de loop é o que você está realmente verificando: o último frame precisa transicionar suavemente para o primeiro, sem salto na posição do ombro.

Um ataque tem três fases com timing desigual, não uma rajada uniforme. A antecipação puxa para trás — o braço se prepara, o corpo se retrai, muitas vezes 2–3 frames segurados ou desacelerando. O impacto é um ou dois frames, a parte mais rápida, em que a arma atinge a extensão total e a pose está no seu extremo. A recuperação é o retorno, e é onde amadores cortam cedo demais. Um ataque de 6 frames com 2 de antecipação, 1 de impacto, 3 de recuperação funciona; um ataque de 6 frames dividido igualmente 2-2-2 parece um empurrão.

Como o animador reproduz de forma uniforme, o truque é segurar a pose de antecipação duplicando frames em vez de mudar o timing por frame. Dois frames de antecipação idênticos dão a pausa. Um frame de impacto dá o snap. Essa é a mesma técnica usada em folhas feitas à mão e sobrevive a um port para qualquer engine.

Animações de conjuração adicionam um segundo problema: o efeito precisa aparecer e desaparecer em um frame específico. Se sua folha inclui o projétil ou o círculo mágico embutido no frame, o player precisa saber quando spawnar o objeto real — geralmente o primeiro frame de impacto. Se o efeito é um objeto separado, mantenha a folha limpa e sincronize o spawn com o índice do frame de impacto, não com um segundo de relógio.

Gere um ciclo de caminhada a partir de um prompt

Criar à mão oito linhas de um ciclo de caminhada é horas de trabalho, e o resultado é uma folha que ainda precisa ser verificada em um player. O Agent Sprite Forge inverte isso: você escreve uma descrição do personagem e ele produz a folha. Uma descrição, oito direções, a folha chega já cortada em uma grade com frames transparentes e guias de âncora nos pés para que o personagem não oscile quando você o posiciona.

As guias de âncora importam mais que a arte na primeira passada. Um ciclo de caminhada em que os pés não compartilham uma linha de chão parece que o personagem está em um trampolim, independentemente de quão boa é a ilustração. Como os frames gerados carregam a âncora, você pode soltar a folha no animador, reproduzir e ver a linha do chão se manter — essa é a verificação que uma imagem estática não oferece.

A saída gerada é uma folha de sprites normal: linhas e colunas, fundo transparente, tamanhos de frame padrão. Nada nela fica preso ao Neta Studio. Exporte, solte no animador para uma passada de pré-visualização, recorte se sua engine quiser uma única linha e siga em frente. Se o gerador entregar uma direção que você não precisa — digamos, trás-esquerda, porque seu jogo só suporta 4 direções — ignore essa linha na etapa de recorte.

Software de animação de sprites: o que comparar

A ferramenta certa depende do que você já tem em mãos. Uma folha pronta e uma dúvida sobre timing é um problema diferente de um canvas em branco e nenhum personagem. A tabela abaixo mapeia o ponto de partida para a ferramenta adequada, e inclui os casos em que o animador da própria engine é a resposta correta e um player de terceiros é redundante.

Uma regra prática: se você está pré-visualizando, use um player. Se está criando, use um editor. Se está gerando, use um gerador. A maior parte da confusão vem de usar um player para criar — você não consegue corrigir uma pose de contato ruim em uma ferramenta de reprodução, nem corrigir a sensação de timing em uma ferramenta de pintura que não tem reprodução.

Exporte um GIF ou uma folha recortada

Duas exportações cobrem a maioria dos casos. A primeira é um GIF animado: o loop atual, no FPS atual, na escala atual, como um único arquivo. Um GIF não tem runtime e reproduz em qualquer janela de chat, ferramenta de revisão ou issue tracker. É isso que você envia para um colaborador que não vai instalar nada. O custo é uma paleta de 256 cores, o que é aceitável para a maior parte do pixel art e deixa banding visível em gradientes suaves — se seu sprite tem um brilho suave, espere que ele sofra posterização.

A segunda é uma folha recortada. O animador pega a folha carregada e suas configurações de frame e grava uma nova imagem com um empacotamento diferente: uma única linha para um flipbook, ou quatro linhas para um conjunto direcional, ou a mesma grade em um tamanho de célula diferente. Recortar é sem perdas quando o tamanho da célula permanece o mesmo e você está apenas reordenando. Quando você muda o tamanho da célula, a ferramenta reamostra, e qualquer reamostragem de pixel art que não seja um múltiplo inteiro suavizará as bordas.

Um recorte comum é o flipbook: todos os frames de uma animação dispostos da esquerda para a direita em uma única linha, sem quebra. Algumas engines e técnicas de sprite em CSS querem esse formato. Pegue uma caminhada de 6 frames, recorte para uma linha de 6, e a tira fica com 6× a largura do frame por 1× a altura do frame. Se você precisa dessa tira como GIF, o conversor de folha de sprites para GIF faz a mesma exportação de loop a partir de uma folha empacotada.

Defina o tamanho do frame e a contagem de colunas antes de exportar. O exportador grava usando a grade que você configurou no player, não a grade que ele estimou ao carregar. Se você sobrescreveu a estimativa para corrigir um cisalhamento e não verificou de novo a contagem de frames, a folha exportada herda a contagem errada.

Entre no mundo ao qual ele pertence

Um sprite é um personagem sem lugar para ficar. O último passo é o que ninguém mais oferece: pegue a folha que você acabou de montar e coloque-a em um mundo pelo qual alguém possa andar — uma pequena ilha, um planeta, uma esquina chuvosa. Todos os mundos neste site foram feitos a partir de uma descrição escrita e publicados como uma página que você pode jogar.

Perguntas frequentes