Como transformar uma folha de sprites em um GIF com repetição perfeita

Confira a grade antes de enviar

Em uma folha de 256 × 128 pixels com quatro colunas e duas linhas, cada célula tem 64 × 64 pixels. O ImageMint lê as células da esquerda para a direita e depois de cima para baixo. Se a folha tiver preenchimento, células irregulares ou uma última linha com espaço vazio, um corte direto por linhas e colunas pode incluir parte de um vizinho ou uma pose vazia. Recorte esses quadros antes com o Recortador de folhas de sprites e use a opção de imagens separadas.

Dê a cada pose o mesmo tamanho de tela e a mesma âncora. Um personagem caminhando não deve subir um pixel porque um quadro foi aparado de forma mais justa. O desalinhamento aparece na prévia como um salto; alterar a velocidade de reprodução não o corrige.

Crie e teste um ciclo de oito quadros

1. Escolher Opção B para uma folha com células iguais. Informe duas linhas e quatro colunas antes de carregar. Se você já tem oito PNGs numerados, use Opção A no lugar.
2. Abra a faixa Ordem dos quadros e clique nas oito poses. Use os controles de seta para adiantar ou atrasar uma pose que esteja fora de lugar. O último quadro deve levar naturalmente de volta ao primeiro; evite repetir a primeira pose no final, a menos que queira uma pausa intencional.
3. Reproduza a 8 FPS como teste inicial. Oito quadros a 8 FPS levam um segundo por ciclo; a 16 FPS, os mesmos desenhos completam o ciclo em meio segundo. Avalie os pés e o centro de massa do personagem, em vez de considerar uma taxa de FPS universalmente correta.
4. Use Repetir se for uma animação de personagem parado ou caminhando. Deixe desativado para um efeito único, como uma reação a um golpe. Exporte apenas quando a prévia no navegador tiver a ordem e o ritmo desejados.

Saiba o que o GIF altera

GIF tem uma paleta de cores limitada e transparência essencialmente binária, enquanto PNG e WebP podem preservar bordas semitransparentes mais suaves. Sombras delicadas ou antialiasing suave podem ficar mais duros após a exportação. Isso é mais perceptível em sprites com brilhos, fumaça translúcida ou gradações sutis de cor. Compare o GIF baixado com a prévia PNG sobre fundos claros e escuros.

O exportador usa um único intervalo para todos os quadros, com base na configuração de FPS, arredondado para 10 ms. Ele não armazena uma duração individual de pausa para uma pose especial. Para simular uma pausa mais longa, adicione intencionalmente um quadro duplicado ou edite os tempos de cada quadro depois em uma ferramenta dedicada de animação. Guarde seus quadros de imagem originais se precisar de assets de jogo sem perdas.

A exportação de GIF é limitada a 1024 pixels por lado e 20 milhões de pixels de quadros no total. Se uma folha válida ultrapassar isso, reduza sua escala ou exporte menos quadros. A prévia da animação ainda pode ajudar a diagnosticar os tempos antes de escolher uma exportação menor.

Teste o alinhamento com um ponto de referência fixo

Antes de exportar, escolha um ponto que deve permanecer estável: o pé apoiado em uma animação de repouso, o centro de um ícone giratório ou o cabo de um objeto em movimento. Percorra as miniaturas e compare esse ponto com o limite do quadro. Se você adicionar imagens de tamanhos diferentes, o exportador de GIF as centraliza na maior tela; ele não alinha um pé ou cabo escolhido. Recoloque os recortes menores em uma tela comum antes de importar.

Em um ciclo de caminhada, diferencie o movimento intencional do corpo de um erro de recorte. Uma cabeça pode subir e descer enquanto um pé apoiado permanece no chão. Mover todas as poses para alinhar a borda superior apagaria essa diferença e criaria um pé deslizando. Use a linha de base pretendida da arte, não a caixa delimitadora mais justa.

Verifique o ciclo baixado, não apenas a prévia no navegador

Um ciclo de oito quadros a 8 FPS é exibido na prévia com 125 ms por pose. O exportador de GIF arredonda para 130 ms, fazendo o arquivo repetir em 1.04 segundos. A 16 FPS, grava 60 ms, fazendo o ciclo durar 0.48 segundos. Essas diferenças podem importar ao comparar uma animação com música ou outro efeito sincronizado. Um GIF não é um arquivo mestre com temporização precisa.

1. Abra o GIF novamente e assista a vários ciclos completos. Um salto do último para o primeiro quadro fica mais fácil de perceber com a repetição.
2. Confira a mesma saída sobre fundos claros e escuros, principalmente nas bordas parcialmente transparentes.
3. Guarde a folha original, as configurações de linhas/colunas e o FPS escolhido em uma anotação do projeto. O GIF sozinho não é um projeto de animação editável.