Conversor de GIF para Sprite Sheet — Grátis, no Navegador, Sem Upload

Converter um GIF para sprite sheet parece trivial até você fazer isso à mão. Um GIF já é uma sequência de quadros completos com uma paleta e atrasos por quadro, então o que você realmente precisa é de uma ferramenta que decodifique cada quadro, componha a transparência corretamente e organize esses quadros em um único PNG numa grade que você possa endereçar com coordenadas de textura. O conversor do Neta Studio faz essa etapa de decodificação localmente em um elemento canvas, então seu arquivo permanece no navegador e nunca toca um servidor. Você solta um GIF, escolhe colunas, linhas e FPS, e baixa um único atlas PNG.

As partes difíceis não são o desenho. São a paleta, o tempo e a matemática da grade. O GIF armazena a transparência como um índice numa tabela de cores, então um quadro que parecia limpo num visualizador de imagens pode chegar ao canvas com uma máscara preta ou branca depois de composto. Os atrasos de quadro em um GIF são em centésimos de segundo e costumam variar de quadro para quadro, e é por isso que uma exportação ingênua produz um sheet que engasga. Esta página cobre as configurações que importam e os modos de falha que encontramos ao construir a ferramenta.

Converter um GIF para um sprite sheet

O conversor é a primeira coisa na página: uma zona de soltar, uma faixa de pré-visualização dos quadros e quatro controles — colunas, linhas, FPS e um botão para preservar o canal alfa. Quando você solta um arquivo, o navegador cria um ImageBitmap por quadro através do decodificador de GIF, desenha cada um em um canvas fora da tela nas dimensões da origem e então os copia para o canvas do atlas em posições de célula calculadas. O arquivo de origem é lido com a File API e mantido em memória. Nenhuma requisição de rede carregando seu GIF é feita.

A saída é sempre PNG. O PNG oferece um canal alfa de 8 bits, que é o que você precisa para trabalho com personagens; o JPEG achataria cada borda suave numa máscara. Se o seu GIF não tem transparência, o atlas ainda será RGBA e os bytes de alfa não usados custam apenas tamanho de arquivo. Se o seu GIF usa transparência, o decodificador precisa solicitar o quadro completo com disposal em vez de uma atualização parcial, ou os elementos em movimento vão arrastar rastros pelo sheet.

Construa o sheet para casar com a forma como sua engine o amostra, não como ele aparece num navegador de arquivos. Uma grade 4x4 de quadros 64x64 é uma textura 256x256 e endereça o quadro n na coluna n mod 4, linha floor(n / 4). Mantenha o tamanho do sheet numa potência de dois quando a engine ou o shader de atlas de destino espera uma; um sheet 320x320 será preenchido ou reamostrado em alguns caminhos e as bordas do sprite vão amolecer.

GIF para sprite sheet para VRChat

O shader de flipbook do VRChat lê uma textura como uma única faixa horizontal, não como uma grade. Se você entregar um sheet 6x4, recebe uma faixa da primeira linha repetida, porque a matemática de UV assume que todo quadro fica na mesma linha e o índice de quadro só avança no eixo U. Defina colunas com o número de quadros e linhas com 1. Uma animação de 24 quadros vira um sheet 24x1.

Faça a largura total da faixa ser uma potência de dois. Uma faixa de 24 quadros de 64 pixels é 1536 pixels de largura, que não é uma potência de dois; o próximo tamanho acima que divide exatamente em 64 pixels é 2048, com espaço para 32 quadros. Você pode preencher as células não usadas com pixels transparentes ou com uma duplicata do último quadro. Potência de dois importa porque uma textura não-PoT que passa por geração de mipmap ou compressão no caminho de upload pode deslocar a amostragem em meio texel, e um sprite de um pixel de largura vai mostrar isso.

Faça o alfa aqui, no sheet, não no shader. Um caminho de cutout ou alpha-test num shader é uma ferramenta bruta; bordas suaves do contorno com antialiasing de um GIF vão sobreviver ou sumir dependendo do limiar, e o limiar não é algo que você queira ajustar por avatar. Exporte o PNG com alfa real e uma borda compatível com pré-multiplicação, e o shader apenas o amostra. Mantenha o ritmo do loop constante: o flipbook do VRChat avança em um passo de tempo fixo, então se o GIF de origem tinha atrasos irregulares por quadro, iguale-os antes de exportar, ou a animação vai rodar numa taxa uniforme que não corresponde ao tempo original.

Para a lista completa de parâmetros e a configuração da textura, veja o guia de textura de flipbook.

GIF para grade de quadros ("planilha")

Quando as pessoas buscam gif to spreadsheet, quase nunca querem dizer um .xlsx. Elas querem dizer a grade de quadros: os quadros dispostos em linhas e colunas para que cada um seja endereçável por um índice. A palavra é usada porque uma grade parece uma planilha à primeira vista. Esta ferramenta produz essa grade, e a grade é a mesma coisa que um sprite sheet — a diferença está apenas em como você a chama. O que importa é que o layout seja regular: tamanho de célula fixo, colunas fixas e uma ordem de quadros que vai da esquerda para a direita, de cima para baixo.

A alternativa que as pessoas às vezes tentam é desenhar os quadros um a um num editor de pixel art, empilhando onion skins até a animação parecer certa. Esse fluxo de trabalho é bom para personagens autorais e terrível para um GIF que você já tem. Um editor de pixels não vai ler os atrasos por quadro de um GIF, e importar 24 quadros à mão em 24 camadas perde o tempo por completo. Se sua origem já é uma animação, converter a grade é o caminho mais curto. As ferramentas de pixel art valem a pena quando você está criando, não fazendo transcodificação.

Para trabalho de quadros desenhados à mão, as páginas de pixel art cobrem o lado do desenho e da paleta.

Tamanho de quadro, grade e fundos transparentes

Quatro coisas quebram a maioria das conversões. Cada uma tem um sintoma específico.

A transparência do GIF morre na paleta. Um GIF pode usar no máximo 256 cores e marca a transparência como um índice de paleta. Quando um quadro é decodificado com o método de disposal 2, a área que era transparente em um quadro pode ser restaurada para a cor de fundo de um quadro anterior. A correção é compor cada quadro sobre um buffer transparente, não sobre branco. Se sua pré-visualização mostra uma forma preta ou cinza em volta do sprite, esse é o índice de fundo da paleta, e agora são pixels reais.

A última linha fica parcial. Se sua contagem de quadros é 23 e você escolhe 6 colunas, você tem três linhas completas e uma última linha com cinco células, não seis. A altura do atlas ainda arredonda para a altura da linha completa. Se a matemática do flipbook da sua engine assume uma grade completa e deriva o índice de quadro dividindo o total de quadros pelo número de colunas, ela vai ler uma célula em branco no fim do loop. Preencha o sheet até um retângulo completo com células transparentes, ou reduza as colunas para que a contagem divida por igual.

O tamanho do quadro precisa dividir o sheet. Se você extrai um sub-retângulo de largura 64 de um sheet de 320 de largura, você obtém exatamente cinco colunas. De um sheet de 330 de largura você obtém cinco colunas e um resto de 10 pixels que não é um quadro. Mantenha as dimensões do sheet em tamanho do quadro vezes colunas, nos dois eixos.

Erro de um no ponto de origem. As coordenadas UV de textura geralmente vão do canto inferior esquerdo, enquanto a grade de quadros é disposta a partir do canto superior esquerdo. Se o quadro 0 é renderizado como o último quadro, sua engine está invertendo o V. A célula do sprite para a coluna c, linha r fica em x = c * width, y = r * height no espaço da imagem, e converter isso para um UV invertido é uma subtração a partir de 1.

Para onde o sheet vai depois

A exportação é o mesmo PNG em todos os casos; a engine difere em como espera que a textura seja fatiada e no que faz com o alfa. Use isto como referência curta.

Para cada destino, exporte um sheet na grade que aquele destino consegue ler sem um shader personalizado. Se você está dando suporte a dois destinos, exporte dois sheets: uma faixa horizontal para o VRChat e uma grade para a engine. Reexportar a partir do mesmo GIF leva menos tempo do que escrever a matemática de UV para reconciliá-los.

Veja seu sheet animar em 3D

A maioria dos conversores para no PNG e deixa você verificar o resultado em outro lugar. O construtor de jogos 3D continua: você pode carregar um sheet numa plane billboard e vê-lo animar numa cena real, que é o único teste que responde se a grade e o tempo estão certos. O Agent Sprite Forge é onde um sprite se torna um personagem com um controlador; o sprite é o personagem, e o mundo 3D é onde ele vive.

The Cyclops' Island é a demonstração jogável dessa ideia — uma pequena cena 3D pela qual você pode se movimentar, construída no navegador, usando sprites como personagens. Solte seu próprio sheet e o mesmo rig que comanda os quadros da demonstração vai amostrar o seu atlas. Se a ordem dos quadros estiver errada, você vê na hora: o personagem anda para trás, ou salta para uma célula em branco no fim do loop. Se o alfa estiver errado, você vê um retângulo duro em volta do corpo. São as mesmas falhas que você encontraria numa engine, visíveis em cerca de cinco segundos.

Experimente a cena jogável The Cyclops' Island e troque pelo seu próprio atlas.

Mais ferramentas de sprite grátis

O conversor é uma peça. Estas três cobrem o resto do fluxo de trabalho com sprites no Neta Studio, e rodam na mesma sessão de navegador com o mesmo tratamento de arquivos locais.

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 o sheet que você acabou de montar e coloque-o num mundo pelo qual alguém possa caminhar — uma pequena ilha, um planeta, uma esquina chuvosa. Todo mundo neste site foi feito a partir de uma descrição escrita e publicado como uma página que você pode jogar.

Perguntas frequentes