Conversor de Sprite Sheet para GIF — Transforme um Spritesheet em GIF Animado

Um GIF é quadros no tempo. Um sprite sheet é quadros no espaço. Converter um spritesheet em GIF significa cortar a folha em células na ordem correta e depois atribuir um atraso a cada célula, para que o navegador as reproduza como movimento. Este conversor roda inteiramente no navegador e lida com as partes que costumam quebrar: linhas finais parciais, grades irregulares e fundos transparentes.

Solte um sprite sheet, defina o tamanho do quadro, colunas, linhas e FPS, depois baixe o GIF. Você pode pré-visualizar o loop antes de exportar, o que importa quando a última linha é curta ou quando o atraso não é um número par de quadros.

Solte um sprite sheet

A ferramenta é a primeira tela. Não há etapa de cadastro nem fila. Você solta um PNG ou GIF na página, e o decodificador lê as dimensões da folha imediatamente.

Você define quatro coisas: largura e altura do quadro, colunas, linhas e FPS. O tamanho do quadro é o tamanho da célula em pixels. Colunas vezes linhas é a capacidade da grade. Se a folha tem 512 por 256 com células de 64 por 64, são 8 colunas e 4 linhas, capacidade 32. O FPS define o atraso por quadro. Depois você baixa o GIF.

A prévia reproduz o loop ali mesmo. Se um quadro parece cortado — metade de um personagem invadindo a célula seguinte — o tamanho do quadro está errado por alguns pixels. Se a animação desliza, a contagem de colunas está errada. Corrija os números e a prévia é atualizada.

Como funciona

O arquivo nunca sai do navegador. A imagem é decodificada localmente com o próprio decodificador de imagens do navegador, desenhada em um canvas fora da tela e lida de volta como dados de pixel. Não existe etapa de upload porque nenhuma é necessária.

O conversor mede a folha: verifica se a largura é divisível de forma exata pela largura de quadro declarada e se a altura é divisível de forma exata pela altura de quadro declarada. Se ambas dividem de forma exata, a grade é uniforme. Se não, o resto indica que ou o tamanho do quadro está errado, ou há preenchimento e espaçamento a considerar.

Em seguida, percorre a grade da esquerda para a direita, de cima para baixo. Cada célula é copiada para um buffer de quadro. Pixels transparentes são mantidos como transparentes. O codificador grava o GIF com um atraso por quadro, de modo que a temporização fica no arquivo e não no reprodutor.

Para uma folha de 32 quadros exportada a 12 FPS, isso é um atraso de cerca de 8 centésimos de segundo por quadro, ou 8 centissegundos em termos de GIF. O loop total é 32 dividido por 12, cerca de 2,67 segundos.

Folhas com uma última linha parcial

Muitas folhas são exportadas como uma grade fixa com células não utilizadas no final. Uma folha 4 por 4 pode conter apenas 13 quadros. A última linha tem três células vazias. Se você deixar a contagem de quadros na capacidade da grade, essas células vazias viram três quadros em branco no GIF, e o loop pisca ou pausa.

Defina a contagem real de quadros. Se a animação tem 13 quadros, defina 13. O conversor para no quadro 13 e ignora as células vazias. O mesmo vale quando a última linha é uma linha mais curta com uma largura de célula diferente.

Se você não consegue dizer se a folha tem quadros em branco no final, defina a contagem um quadro acima do último quadro que você consegue ver. Exporte, observe a prévia e reduza em um se vir um quadro em branco. É mais rápido verificar na prévia do que inspecionar a folha manualmente.

Fundos transparentes permanecem transparentes

O GIF tem uma cor transparente, não um canal alfa. Isso é alfa de 1 bit: um pixel é totalmente transparente ou totalmente opaco. Não há transparência parcial no formato. Folhas com bordas suaves mostrarão uma borda dura após a exportação, a menos que você trate isso.

O conversor mantém a transparência da origem. Ele grava a cor transparente na paleta do GIF e marca esses pixels como transparentes. Um pixel com qualquer alfa abaixo do limite se torna transparente; qualquer valor acima se torna opaco.

O modo de falha a evitar é o achatamento. Se a folha for desenhada em um canvas opaco antes da codificação, os pixels transparentes assumem a cor que o canvas tinha. Isso geralmente é branco ou preto e, contra um novo fundo, aparece como um bloco sólido. Mantenha o PNG de origem com seu alfa e não faça composição antes de exportar.

Para bordas suaves, aplique matte na borda contra uma cor conhecida sobre a qual o quadro será exibido. Se o GIF ficar em uma página branca, aplique matte contra branco para que o halo suavizado combine. Se ficar em um fundo escuro, aplique matte contra essa cor. Uma única cor de matte não pode estar correta para ambos.

Folhas que não são uma grade uniforme

Folhas empacotadas geralmente têm um intervalo entre células e preenchimento ao redor da folha. Uma célula de 64 por 64 com um intervalo de 2 pixels tem um passo de 66 pixels. Se você inserir 64 como largura do quadro, cada célula após a primeira fica deslocada por 2 pixels acumulados, e a animação desliza.

Insira o tamanho da célula mais o intervalo como o passo, e o preenchimento como um deslocamento. Alguns exportadores gravam a folha completa como células mais intervalos sem preenchimento; outros adicionam uma margem. Leia os metadados do arquivo ou meça a primeira célula para encontrar ambos os números.

Quando a última célula tem um tamanho diferente — uma folha em que o quadro final é mais largo para um rastro ou um quadro de efeito — a grade uniforme não consegue descrevê-la em uma única passagem. Divida a folha: processe os quadros uniformes pelo conversor como um intervalo, depois adicione o quadro ímpar separadamente, ou corte-o para o tamanho de célula comum antes da conversão.

Se a folha for empacotada em vez de gradeada, não há passo simples. Exporte-a como uma grade a partir da ferramenta de origem, ou corte as células com um retângulo por quadro e alimente esses quadros individualmente.

Escolhendo um FPS

O GIF armazena o atraso do quadro em centissegundos. A 10 FPS, isso é 10 centissegundos por quadro. A 30 FPS, é 3,33, que arredonda para 3, resultando em cerca de 33 FPS. O formato não consegue expressar atrasos arbitrários abaixo de um centissegundo, então escolha um FPS que divida 100 de forma exata: 10, 20, 25 ou 50 FPS.

Atrasos irregulares causam tremor. Se você definir 24 FPS, o atraso é 4,17 centissegundos e arredonda de forma inconsistente, então alguns quadros duram mais que outros. Em um loop curto, isso é visível como um solavanco uma vez por ciclo. Use 20 ou 25.

Combine a duração do loop com a duração pretendida da animação. Um ciclo de caminhada criado como 0,8 segundos deve produzir um GIF que faz loop em 0,8 segundos. Com 16 quadros, isso é exatamente 20 FPS. Mude a contagem de quadros e o FPS pretendido muda junto.

A maioria dos navegadores também impõe um atraso mínimo. Atrasos abaixo de 2 centissegundos são frequentemente limitados a cerca de 10 centissegundos pelo visualizador, então uma exportação a 50 FPS pode ser reproduzida a 10 FPS em alguns contextos, independentemente do conteúdo do arquivo. Teste o GIF exportado no navegador que você pretende atingir.

Fazendo o caminho inverso

A direção inversa é comum. Você tem um GIF animado e quer um sprite sheet: uma imagem com todos os quadros dispostos em uma grade, para que um motor de jogo possa fatiá-la em uma animação. Um conversor de GIF para sprite sheet faz isso: decodifica os quadros do GIF, empacota-os em uma grade uniforme e exporta um PNG com o tamanho e a contagem dos quadros.

A parte difícil do caminho inverso é o mesmo problema de transparência. Um GIF tem uma cor transparente. Quando você o desempacota em uma folha, essa cor se torna os pixels transparentes da folha, e qualquer borda suavizada que foi achatada no GIF permanece achatada. A folha herda o que o GIF perdeu.

O atraso dos quadros também é descartado na saída. Um sprite sheet não tem temporização; o motor ou o animador a atribui. Se você precisa da temporização, anote o FPS do GIF antes de converter e defina-o na animação de destino.

Veja o GIF rodar em 3D

Um loop de GIF é uma animação plana. The Cyclops' Island é um mundo 3D jogável criado no Neta Studio, onde o sprite é o personagem e o mundo é onde ele vive. Você pode carregar uma animação convertida em um personagem e movê-lo pela cena.

Isso muda o que você verifica. Um GIF que lê bem em uma página pode ler errado em um mundo: a taxa de quadros que parecia suave contra um fundo branco pode parecer lenta contra geometria em movimento, e a cor de matte que você escolheu para a transparência pode não combinar com o ambiente.

Mini World e o construtor de jogos 3D são os outros dois lugares para colocar o resultado. Mini World é um mundo pequeno com a mesma superfície de construção. Agent Sprite Forge gera personagens sprite que você pode exportar e animar. Todos eles rodam no navegador.

Mais ferramentas gratuitas

Se você trabalha com sprites, o conversor é uma etapa de uma cadeia. Estas são as outras.

Animador de sprites: reproduz uma folha a um FPS definido com onion skinning e avanço quadro a quadro, para você verificar um loop antes de exportá-lo. Útil para encontrar um quadro ruim sem exportar um GIF primeiro.

Criador de sprite sheet: empacota imagens de quadros individuais em uma grade com tamanho de célula, colunas e preenchimento escolhidos. É o que você usa quando os quadros chegam como arquivos separados em vez de uma única folha.

Biblioteca de recursos de sprite: um conjunto de sprites e folhas prontos para testar o conversor, incluindo folhas com últimas linhas parciais e fundos transparentes.

Nenhum deles exige upload. Eles rodam no navegador como o conversor.

Entre no mundo ao qual ele pertence

Um sprite é um personagem sem lugar para ficar. A última etapa é a que ninguém mais oferece: pegue a folha que você acabou de criar e coloque-a em um mundo onde alguém possa caminhar — uma ilha pequena, um planeta, uma esquina chuvosa. Todos os mundos deste site foram feitos a partir de uma descrição escrita e publicados como uma página que você pode jogar.

Perguntas frequentes