Como transformar um GIF em uma folha de sprites sem quadros fantasma
Você extraiu um GIF e vários quadros contêm partes da pose anterior. Isso normalmente significa que a exportação salvou os retângulos de atualização do GIF como se fossem imagens completas. Veja como obter quadros completos e escolher uma saída que seu jogo possa usar.
Por que salvar cada bloco de imagem do GIF não basta
Uma animação GIF nem sempre é uma pilha de imagens em tamanho completo. Um quadro posterior pode armazenar apenas o retângulo que mudou. Ele também traz uma instrução de descarte que diz ao reprodutor o que fazer com o desenho anterior antes de aplicar o próximo. Se um extrator ignorar essa instrução, braços, pés ou sombras anteriores continuam visíveis como rastros. Se salvar apenas o retângulo, os PNGs exportados terão tamanhos diferentes.
Em uma folha de sprites, cada célula precisa de uma imagem completa em uma tela consistente. A sequência correta é: aplicar a regra de descarte do quadro anterior, desenhar a atualização atual e depois copiar a tela completa como o PNG daquele momento. A ferramenta de GIF do ImageMint faz essa composição antes de exportar; você não precisa posicionar quadros parciais manualmente.
Um exemplo concreto de conversão de 12 quadros
- Abra o GIF de origem em GIF para folha de sprites. Confira a quantidade de quadros e o tamanho da tela informados. Doze quadros de 64 × 64 pixels devem gerar doze saídas completas de 64 × 64, mesmo que as atualizações internas do GIF sejam menores.
- Para um PNG em grade, defina Imagens por linha como 4. A folha resultante tem quatro colunas e três linhas, então as dimensões esperadas são 256 × 192 pixels. Essa simples verificação de dimensões detecta um número surpreendente de exportações incorretas.
- Salve o PNG em grade quando sua engine precisar de uma folha com espaçamento uniforme. Salve o ZIP quando quiser PNGs numerados separados. O ZIP também contém
frame-delays.json; preserve isso se o GIF original mantiver algumas poses por mais tempo que outras. - Abra o resultado no editor de destino e examine o primeiro quadro, um quadro do meio e o último. Verifique se nenhuma pose anterior permanece na imagem e se o personagem fica na mesma área de 64 × 64.
A armadilha dos tempos: uma folha não informa a velocidade de reprodução
Uma folha PNG armazena pixels, não a duração dos quadros. Imagine um GIF de 12 quadros em que onze duram 80 ms, mas o último permanece por 400 ms. Reproduzir a folha exportada a 12 fps fixos faz cada quadro durar cerca de 83 ms, então a pausa desaparece. Isso não é um erro de extração: os tempos simplesmente ficam fora do PNG. Leia os atrasos no ZIP e recrie a permanência do quadro na sua engine, ou repita esse último quadro como uma aproximação deliberada.
Escolha a saída para a próxima etapa
| Você precisa de | Salvar | Lembre-se |
|---|---|---|
| Uma textura uniforme para uma engine | PNG em grade | Guarde a quantidade de colunas e o tamanho da célula para a importação. |
| Quadros editáveis ou tempos não uniformes | ZIP de PNGs | Guarde frame-delays.json junto com as imagens. |
| Uma quantidade menor de poses selecionadas | ZIP e depois edição dos quadros | Remover quadros altera a duração do ciclo, a menos que os tempos sejam ajustados. |
O ImageMint limita entradas GIF a 20 MB, 100 quadros, 1024 pixels por lado e 20 milhões de pixels no total dos quadros para proteger a aba do navegador. Uma origem maior precisa de pré-processamento em um editor de computador. Reutilize apenas animações que sejam suas ou que você tenha permissão para usar.
Preserve uma pausa de duração diferente ao recriar a animação
No exemplo de doze quadros, a duração total é 11 × 80 + 400 = 1280 ms. Se o destino só aceitar uma duração fixa, você pode aproximar a pose mantida repetindo-a cinco vezes a 80 ms. Isso gera dezesseis entradas na linha do tempo a partir de doze imagens diferentes e preserva a duração total. Essa é uma edição deliberada da linha do tempo, não uma opção aplicada automaticamente pelo extrator.
Não confunda uma imagem repetida com uma duplicata indesejada. Dois quadros visualmente iguais podem representar uma pausa deliberada. Remover um deles sem transferir sua duração encurta a animação. Salve primeiro uma extração intacta e edite uma cópia ao otimizar uma sequência.
Importe uma folha sem reproduzir células vazias no final
Se dez quadros de 64 × 64 forem colocados em quatro colunas, a saída será 256 × 192: doze posições, mas apenas dez quadros reais. As duas últimas células ficam vazias. Registre o tamanho da célula, a quantidade de colunas e a quantidade real de quadros junto ao arquivo. Um importador de grade que deduz a quantidade de quadros apenas pela largura e altura precisa ter o intervalo da animação corrigido.
Quando a exportação de uma folha ultrapassa um limite de lado, mudar as colunas pode fazer o formato caber, mas não reduz a quantidade de quadros decodificados. Doze quadros de 64 × 64 ocupam 49.152 pixels de quadros antes de quaisquer células não utilizadas. Um GIF comprimido minúsculo ainda pode se transformar em uma sequência grande ao ser decodificado, então reduza a resolução ou os quadros em um editor quando o problema for o limite total de pixels.
Lista final de verificação da extração
- Os quadros de saída têm as dimensões completas da tela de imagem informadas.
- Os quadros do meio e o último não contêm uma pose anterior indesejada.
- O aplicativo de destino usa a quantidade real de quadros, não todas as células da folha.
- Intervalos diferentes são preservados ou aproximados de forma consciente.
- O GIF original e sua autorização para usá-lo estão guardados.
Experimente o fluxo de trabalho
Abra um GIF localmente e salve uma folha PNG uniforme ou um ZIP com quadros completos e dados de tempo.
Extraia quadros de GIF →