GIF para sprite sheet

Como converter um GIF num sprite sheet

1. 1

   Escolha o sentido

   «GIF para sheet» coloca todos os frames numa grelha. «Sheet para GIF» faz o contrário: diz-lhe a grelha e a animação é remontada.

2. 2

   Abra o seu ficheiro

   Um GIF, WebP animado, APNG ou AVIF animado num sentido; um sheet em PNG, WebP ou JPG no outro.

3. 3

   Monte a grelha

   Deixe as colunas em zero para uma grelha quase quadrada, ou defina-as. Acrescente separação entre células se o seu motor precisar, e reduza o tamanho dos frames se o sheet ficasse demasiado grande.

4. 4

   Descarregue

   Com os metadados activados, leva o PNG e o JSON num ZIP, porque o JSON refere a imagem pelo nome e separá-los quebra a ligação.

O que a distingue

• As durações sobrevivem

  Um sprite sheet nu perde precisamente o que o fazia uma animação: quanto dura cada frame. O JSON leva todas as durações, por isso a animação pode ser remontada exacta, num motor ou aqui de volta.

• O formato do Aseprite, não um nosso

  Os metadados usam o formato que o Aseprite exporta, já lido pelo Phaser, pelo PixiJS e pelos importadores do Godot e do Unity. Inventar um nosso significaria você escrever um adaptador.

• Diz-lhe o tamanho antes de montar

  A área do sheet é o número de frames vezes o tamanho do frame, com qualquer grelha, por isso uma animação longa simplesmente não cabe numa só imagem. As medidas resultantes aparecem enquanto muda as opções, calculadas pelo mesmo código que o monta.

• Ao cortar, a última linha incompleta não estorva

  Cinco frames numa grelha de 3×2 deixam uma célula vazia. Diga quantos frames há de facto e essa célula é saltada, em vez de aparecer um frame em branco no fim da sua animação.

• A separação que os motores realmente pedem

  O padding entre células evita que a filtragem bilinear arraste píxeis do frame vizinho, que é a causa habitual das costuras finas em volta dos sprites. A margem em volta do sheet também está lá.

Formatos aceites

Para sheet: GIF animado, WebP animado, APNG e AVIF animado. Sai um sheet em PNG, transparente a não ser que escolha um fundo, mais o JSON opcional. No outro sentido entra qualquer sheet em PNG, WebP ou JPG e sai um GIF animado.

Perguntas frequentes

Para que serve um sprite sheet?

Os motores de jogo desenham as animações a partir de uma única textura em vez de um ficheiro por frame: um só envio para a GPU e uma só imagem a gerir. É a forma padrão de entregar animação 2D no Godot, no Unity, no Phaser e nos restantes.

Preciso do JSON?

Se o seu motor lê o JSON do Aseprite, sim: poupa-lhe escrever à mão os rectângulos e os tempos. Se vai colocar o sheet numa grelha uniforme e definir a velocidade no código, o PNG basta.

Porque não posso fazer o sheet numa só linha longa?

Pode, fixando as colunas ao número de frames, mas raramente ajuda: a área é a mesma e as texturas muito largas batem nos limites das GPU antigas. Uma grelha quase quadrada é a opção segura.

Porque diz que o sheet ficaria demasiado grande?

Porque a área é frames × largura × altura, e nenhuma grelha muda isso. Uma animação de 200 frames a 400×400 são 32 megapíxeis numa só imagem. Reduza o tamanho dos frames, ou encurte a animação primeiro.

Os frames cortados saem desviados um píxel. O que aconteceu?

A grelha não divide o sheet de forma exacta. A ferramenta recusa uma grelha que precisasse de píxeis fraccionários em vez de a arredondar, porque o erro cresce a cada coluna; reveja os números, ou descreva a grelha por tamanho de frame.

Posso obter os frames como ficheiros separados?

Sim, mas a partir do divisor de GIF: abra lá a animação e exporte os frames como PNG dentro de um ZIP.