Sprite Sheet to GIF e GIF para Sprite Sheet: Como Converter

Para converter uma sprite sheet em GIF (sprite sheet to GIF) e um GIF em sprite sheet, o caminho mais direto é o Aseprite, que abre os dois formatos e exporta os dois. De graça, o ImageMagick faz cada conversão com um comando, o GIMP abre o GIF com cada quadro numa camada, e o ezgif.com resolve no navegador. O cuidado que separa uma conversão boa de uma quebrada é o mesmo nos quatro: quadros inteiros (não otimizados) e o tempo de cada quadro preservado.

Este guia mostra os dois sentidos em cada ferramenta, com os erros que aparecem só depois que a folha está no jogo, e termina com a parte que quase ninguém comenta: a licença do GIF.

Por que converter GIF em sprite sheet

A engine não toca GIF como animação de sprite. Unity e Godot trabalham com quadros numa imagem (a sprite sheet) ou em arquivos separados. O GIF é ótimo para mostrar uma animação em rede social ou num documento, mas para o jogo ele precisa virar folha.

O caminho inverso também é comum: você tem a folha do jogo e quer um GIF para divulgar, mostrar ao artista ou colocar na página do jogo.

Três diferenças técnicas que explicam os problemas de conversão:

1. Paleta. GIF tem no máximo 256 cores por quadro e transparência de 1 bit (o pixel é transparente ou não). PNG tem milhões de cores e transparência gradual. Pixel art sobrevive bem ao GIF; arte pintada com sombra suave, não.
2. Otimização. Muitos GIFs guardam em cada quadro só a região que mudou. Montar a folha direto disso gera quadros com pedaços faltando.
3. Tempo por quadro. GIF guarda a duração de cada quadro (em centésimos de segundo), e ela pode variar. A sprite sheet em grade não guarda tempo nenhum.

Se o conceito de folha ainda não está claro, o post sobre sprite sheet explica grade, células e padding.

GIF para sprite sheet no Aseprite

1. File > Open e escolha o GIF. Cada quadro do GIF vira um frame, com a duração original. Confira passando o mouse sobre o número do frame na timeline ou em Frame Properties.
2. Se o GIF veio com fundo sólido que deveria ser transparente: GIFs costumam abrir em modo de cor Indexed (confira em Sprite > Color Mode). Nesse modo, Sprite > Properties tem o campo Transparent Color; escolha ali o índice da cor de fundo e ela vira transparente em todos os frames de uma vez.
3. File > Export > Export Sprite Sheet (Ctrl+E).
4. Aba Layout: Sheet Type em By Rows, e em Constraints escolha Fixed # of Columns com o número de colunas que você quer (8, por exemplo).
5. Aba Borders: deixe tudo em 0 para pixel art com filtro Nearest; use Spacing ou Extrude se a arte vai ser filtrada (veja a seção de erros).
6. Aba Output: marque Output File (o PNG) e, se a duração dos quadros varia, marque JSON Data. O JSON guarda a duração de cada frame.
7. Export.

O post sobre exportar sprite sheet do Aseprite para a Godot detalha cada aba e a leitura do JSON na engine.

Pelo GIMP

O GIMP (série 3.x, a estável atual no site oficial) abre um GIF animado com cada quadro numa camada. O nome de cada camada traz a duração, como Frame 3 (100ms) (combine) (o texto pode vir traduzido conforme o idioma da interface).

O "(combine)" é o sinal de GIF otimizado: aquele quadro foi feito para ser combinado com o anterior. Antes de qualquer coisa:

1. Filters > Animation > Unoptimize (Filtros > Animação > Desotimizar, na interface em português). O GIMP gera uma imagem nova com todos os quadros inteiros.
2. Confira com Filters > Animation > Playback.

O GIMP não monta sprite sheet nativamente. O caminho mais limpo a partir daqui é exportar e montar com o ImageMagick:

magick entrada.gif -coalesce +append folha.png

• -coalesce faz o mesmo que o Desotimizar: reconstrói cada quadro inteiro.
• +append junta todos lado a lado, numa linha só.

Para várias linhas (8 quadros por linha, por exemplo):

magick montage entrada.gif -coalesce -tile 8x -geometry +0+0 -background none folha.png

Se você prefere ficar no GIMP, dá para montar à mão: aumente a tela em Image > Canvas Size para largura do quadro vezes o número de quadros, e posicione cada camada com a ferramenta Align ou digitando Offset X e Offset Y em Layer > Layer Attributes (com a camada do tamanho do quadro). Funciona para 4 quadros; para 20, use o comando. O post sobre GIMP para pixel art mostra a configuração do GIMP para não borrar a arte.

Ferramentas online

ezgif.com, GIF to sprite sheet. Envie o GIF, escolha a disposição (horizontal, vertical ou um número de colunas), a margem entre quadros e o tamanho do quadro, e baixe o PNG. O limite de upload informado no site é de 200 MB, e os arquivos enviados são apagados depois de uma hora.

ezgif.com, Sprite cutter. O sentido inverso: envie a folha, informe o tamanho do quadro ou o número de colunas e linhas (com offset e espaçamento, se houver), e o site fatia e monta o GIF.

Piskel. Editor de pixel art no navegador que importa GIF e exporta folha em PNG. Bom se você quer editar algo antes de exportar.

Ferramenta online é prática para uma conversão pontual. Para algo que você faz toda semana, um comando salvo ou o Aseprite economiza tempo e não depende de upload.

Converter um GIF é trabalho de cinco minutos. A conversão vira problema quando a animação de outra pessoa não encaixa no tamanho, na paleta e no tempo do resto do jogo, e você passa horas remendando arte que não foi feita para ele. É nesse ponto que vale aprender a produzir a sua.

Saber animar o próprio personagem, no tamanho e no estilo do seu jogo, tira a dependência de GIFs soltos e de assets que nunca combinam entre si.

Sprite sheet to GIF: o caminho inverso

Aseprite.

1. File > Import Sprite Sheet.
2. Escolha a folha e informe a largura e a altura do quadro (e o padding, se a folha tem espaço entre quadros). A grade aparece por cima para conferir.
3. Import. Cada célula vira um frame.
4. Defina a duração: selecione todos os frames, Frame Properties, 100 ms (ou o tempo do jogo).
5. File > Export As e escolha o formato .gif. Para divulgação, aumente a escala no próprio diálogo de exportação (200%, 400%) para a pixel art não ficar minúscula.

ImageMagick. Para uma folha com quadros de 32 x 32:

magick folha.png -crop 32x32 +repage -set delay 10 -loop 0 -dispose background animacao.gif

• -crop 32x32 +repage corta a folha em quadros de 32 x 32 e zera a posição de cada um.
• -set delay 10 define 10 centésimos de segundo por quadro (100 ms).
• -loop 0 repete para sempre.
• -dispose background limpa cada quadro antes do próximo, para a transparência não acumular rastro.

Para ampliar a pixel art no GIF sem borrar, acrescente -scale 400% antes do nome de saída.

Duração variável e frames perdidos

Duração variável. Um GIF de ataque pode ter um quadro de impacto de 300 ms e os outros de 80 ms. Na folha em grade essa informação some. Três saídas:

1. Exportar o JSON junto (Aseprite) e ler a duração na engine. Na Godot, o painel SpriteFrames aceita duração relativa por quadro; na Unity, você ajusta o espaçamento dos keyframes no clip.
2. Duplicar o quadro longo até ele ocupar o tempo certo no fps fixo.
3. Anotar as durações e ajustar à mão na engine.

Frames perdidos. Se a folha tem menos quadros que o GIF, o conversor descartou quadros idênticos ou de duração zero. No Aseprite, a opção Merge Duplicates na aba Layout faz isso de propósito; desligue se quer todos.

Quadros com rastro ou pedaços. GIF otimizado montado sem coalesce. Volte e use -coalesce ou Desotimizar.

GIF muito rápido no navegador. Alguns navegadores tratam delays muito curtos (0 ou 1 centésimo) como um valor padrão mais lento. Use 2 centésimos ou mais.

Licença de GIF de terceiros

Achar um GIF de personagem correndo e transformar em sprite sheet é tecnicamente fácil. Usar no jogo pode ser ilegal. Todo desenho tem autor, e a falta de aviso de copyright não libera o uso.

• Use com tranquilidade: sua própria animação, material CC0 (domínio público), e pacotes de assets cuja licença permite uso comercial.
• Use com crédito: CC-BY, que exige citar o autor nos créditos do jogo.
• Não use em jogo publicado: GIFs de busca de imagem, sprites recortados de jogos comerciais, fan art sem autorização.

Sprites de jogos comerciais servem para estudo (contar quadros, entender o tempo de um golpe), não para entrar no seu jogo.

Erros comuns

• Montar a folha sem coalesce: quadros com buracos. Sempre desotimize antes.
• Converter arte pintada para GIF e de volta: a paleta de 256 cores e a transparência de 1 bit estragam degradês e bordas. Guarde o original em PNG.
• Linha fina entre quadros na engine: falta de espaçamento numa folha filtrada. Use filtro Point/Nearest em pixel art ou Spacing e Extrude no Aseprite.
• Tamanho de quadro errado na importação: a grade escorrega a cada coluna. Confira largura total dividida pelo número de colunas.

Próximo passo

Pegue uma animação sua (ou um GIF CC0), converta para folha com o comando do ImageMagick, importe na engine e depois faça o caminho inverso para gerar o GIF de divulgação. Salve os dois comandos num arquivo de texto do projeto: você vai usar de novo a cada animação nova.