Sprite Sheet Explicado: Formatos, Ferramentas e Como Converter Qualquer Animação

Um sprite sheet é uma única imagem que contém todos os quadros de uma animação dispostos em uma grade ou tira fixa, permitindo que o renderizador sample uma região por quadro em vez de carregar dezenas de arquivos. Se você já exportou quadros de uma animação 3D e depois teve que descobrir por que o personagem treme ou o fundo fica preto, o sprite sheet geralmente é onde o problema está.

Esta página cobre todo o caminho: o que um sheet realmente é, como ele difere de um atlas, quando usar uma grade em vez de uma tira horizontal, qual formato exportar e como converter fontes em GIF, imagem e vídeo em um sheet utilizável no navegador. Os exemplos fazem referência às nossas próprias ferramentas e mundos — Agent Sprite Forge, The Cyclops' Island, Mini World e o 3D game builder — porque esse é o pipeline que publicamos e testamos.

O que é um sprite sheet

Um sprite sheet é uma imagem raster em que cada quadro da animação ocupa uma célula de tamanho igual em uma grade regular. O sheet em si não carrega nenhuma informação semântica sobre qual célula é qual quadro; esse mapeamento vive na convenção de nomenclatura dos arquivos, em um índice JSON auxiliar ou nas configurações de animação da engine. As quatro coisas que você precisa saber para fatiar um sheet são: a largura e a altura da célula em pixels, o número de colunas, o número de linhas e a origem (canto superior esquerdo na maioria das engines, mas alguns frameworks assumem o canto inferior esquerdo).

Se qualquer um desses quatro valores estiver errado, a falha é imediata e visível. Uma largura de célula de 32 em vez de 33 desloca cada quadro um pixel para a direita conforme você avança pelo sheet, o que se lê como uma lenta deriva horizontal. Uma origem errada inverte a animação verticalmente. Uma contagem de quadros errada descarta o último quadro, então um ciclo de caminhada termina com um corte brusco em vez de uma pose de contato. Esses não são bugs de renderização; são incompatibilidades de metadados.

Anatomia de um sheet

Pense em um sheet como uma tabela. Colunas e linhas são implícitas nas dimensões em pixels: a largura total dividida pela largura da célula dá o número de colunas, e a altura total dividida pela altura da célula dá o número de linhas. Um sheet de 512 por 128 com células de 64 por 64 tem 8 colunas e 2 linhas, ou seja, 16 quadros. Se você adicionar um pixel de padding entre as células, a matemática muda: 512 pixels de largura com células de 64 pixels e padding de 1 pixel cabem 7 células, não 8, porque o padding consome 8 pixels. Padding e espaçamento precisam ser levados em conta antes de você escrever o código de fatiamento.

Onde a origem importa

A maioria dos pipelines WebGL e canvas coloca a origem no canto superior esquerdo da imagem, o que corresponde ao sistema de coordenadas usado por ferramentas de edição de imagem. Algumas engines de jogos e frameworks mais antigos invertem o eixo Y e esperam a origem no canto inferior esquerdo. Se seu sprite aparecer de cabeça para baixo, verifique a origem antes de redimensionar qualquer coisa. A correção geralmente é um transform de uma linha ou uma regeneração com a ordem de linhas oposta, não uma reexportação completa.

Sprite sheet vs spritesheet vs sprite atlas

A grafia não é padronizada. 'Sprite sheet' com espaço é a forma comum em inglês e o que a maioria da documentação e dos tutoriais usa. 'Spritesheet' como uma palavra só aparece em identificadores de código, nomes de arquivos e algumas APIs de engine, porque espaços são inconvenientes nesses contextos. Os mecanismos de busca tratam os dois como quase sinônimos, então você encontrará a mesma técnica nas duas grafias.

A distinção real é entre um sheet e um atlas. Um sprite sheet é uma imagem empacotada sem índice obrigatório. Um sprite atlas é a mesma imagem empacotada mais uma descrição legível por máquina do que está onde — geralmente um arquivo JSON, XML ou binário que nomeia cada região. Esse índice é o que permite que uma ferramenta encontre o quadro de idle, o quadro de corrida e o quadro de ataque sem que você codifique manualmente as coordenadas em pixels. Se seus quadros são uniformes e seu loop é simples, um sheet simples basta. Se você tem regiões irregulares ou estados nomeados, você quer um atlas.

• SheetUma grade ou tira de quadros de tamanho igual. Nenhum metadado necessário. O fatiamento é aritmética.
• SpritesheetO mesmo artefato, escrito como uma palavra só. Comum em código e nomes de arquivos de assets.
• AtlasQuadros empacotados mais um índice que mapeia nomes ou IDs para retângulos. Permite busca por nome em vez de cálculo de coordenadas.

Grid sheet vs tira de quadros horizontal

Um grid sheet empacota os quadros em linhas e colunas para manter a imagem próxima de quadrada. Isso importa porque a memória de textura e a amostragem da GPU são mais amigáveis a dimensões quadradas ou potências de dois em alguns hardwares, e porque um sheet quadrado é mais fácil de visualizar em um editor de imagens. Grades são o padrão para fatiamento no lado da engine: você define o tamanho da célula e a contagem de quadros, e a engine percorre a grade linha por linha.

Uma tira de quadros horizontal coloca todos os quadros em uma única linha. Esse é o layout que shaders e texturas flipbook esperam, porque o deslocamento de UV se torna uma única multiplicação: o índice do quadro dividido pela contagem de quadros dá o deslocamento em X, e o Y permanece constante. Se você entregar um grid sheet a um shader que assume uma tira, a animação vai samplear através das linhas e repetir de formas que você não pretendia. Se você entregar uma tira a um fatiador de engine que assume uma grade, ele vai tratar a tira como uma única linha muito larga ou não vai encontrar linhas.

O modo de falha geralmente é sutil no início: a animação toca, mas o timing parece errado ou os quadros se repetem fora de ordem. Antes de depurar a lógica da animação, confirme que o layout corresponde ao consumidor. No nosso 3D game builder, personagens baseados em sprites usam uma grade porque a engine cuida do fatiamento; efeitos controlados por shader, como fogo ou água, usam uma tira porque o material a sampleia diretamente.

Qual formato exportar

PNG é o padrão seguro. Ele suporta alpha completo, é sem perdas e toda engine e navegador o decodifica. Para sprites com bordas duras e cores planas, o PNG comprime bem. Para sprites fotográficos ou com muito sombreamento, o WebP geralmente produz um arquivo menor com a mesma qualidade visual, e todos os navegadores atuais o suportam. Use WebP quando o tamanho do arquivo importa e você pode verificar que o runtime de destino o decodifica. GIF é um formato de entrega, não de autoria: ele suporta apenas transparência de um bit, então cada pixel semitransparente se torna totalmente opaco ou totalmente transparente. Se sua fonte tem bordas suaves, o GIF vai criar franjas nelas.

Inclua um JSON auxiliar quando seus quadros não formarem uma grade uniforme simples, quando você precisar de estados nomeados ou quando o consumidor esperar um atlas. O arquivo auxiliar é pequeno e elimina a necessidade de codificar coordenadas manualmente. Se seus quadros são uniformes e a animação é um único loop, você pode dispensá-lo e deixar a engine calcular os retângulos. Nunca exporte sprites como JPEG. JPEG é com perdas e não tem canal alpha, então a transparência se torna preta ou branca, e os artefatos de compressão caem exatamente sobre as bordas duras que definem a silhueta de um sprite. Não há configuração que corrija isso.

Todos os nossos conversores

Estes são os caminhos de conversão que oferecemos. Cada um roda no navegador, então você pode arrastar um arquivo e obter um sprite sheet sem instalar nada. Eles cobrem as fontes comuns: GIFs animados, imagens estáticas e clipes de vídeo.

Para GIFs animados, o conversor desempacota cada quadro e o empacota em um sheet ou tira, preservando os atrasos dos quadros em um arquivo auxiliar se você solicitar. Para imagens estáticas, o conversor recorta e organiza uma sequência de imagens que você fornece em uma grade. Para vídeo, o conversor sampleia quadros a uma taxa escolhida e os escreve em um sheet; você controla o intervalo de amostragem e o tamanho da célula. Se você está criando um personagem para The Cyclops' Island ou um prop para Mini World, comece com o formato de fonte que você tem e escolha o conversor correspondente.

• GIF para sprite sheetDesempacota um GIF animado quadro a quadro e empacota os quadros em uma grade ou tira horizontal.
• Imagem para sprite sheetRecebe uma sequência de imagens estáticas e as organiza em uma grade uniforme com um tamanho de célula consistente.
• Vídeo para sprite sheetSampleia quadros de um vídeo em um intervalo escolhido e os escreve em um sheet ou tira.
• Agent Sprite ForgeNossa ferramenta focada em sprites para gerar e empacotar quadros de personagens em sheets usados pelo 3D game builder.

Glossário

Estes são os termos que aparecem quando você lê documentação de sprite sheet, configurações de engine ou código de shader. As definições são curtas de propósito.

• AtlasUma imagem empacotada de regiões mais um índice legível por máquina que mapeia nomes ou IDs para retângulos.
• CellO retângulo em um sheet que contém um quadro. Sua largura e altura são o tamanho da célula.
• Frame stripUm sheet disposto como uma única linha horizontal de quadros, usado por shaders e texturas flipbook.
• FlipbookUma textura que é sampleada uma região por vez ao longo do tempo para produzir uma animação, tipicamente a partir de uma tira de quadros.
• IndexOs dados auxiliares que nomeiam ou numeram regiões em um atlas. Sem ele, o fatiamento é aritmética.
• OriginO canto da imagem ou da célula a partir do qual as coordenadas são medidas, geralmente superior esquerdo ou inferior esquerdo.
• PaddingPixels extras entre células em um sheet, usados para evitar vazamento de textura. O padding muda quantas células cabem.
• SpacingA distância entre células, muitas vezes usada como sinônimo de padding, mas às vezes contada separadamente.

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 criar e coloque-o em um 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.