Folha de sprites explicada: formatos, ferramentas e como converter qualquer animação

Uma folha de sprites é uma única imagem que contém todos os quadros de uma animação dispostos em uma grade ou tira fixa, para que um renderizador possa amostrar 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 de descobrir por que o personagem treme ou o fundo fica preto, a folha de sprites normalmente é onde está o problema.

Esta página cobre todo o caminho: o que uma folha realmente é, como ela difere de um atlas, quando usar uma grade em vez de uma tira horizontal, qual formato exportar e como converter fontes de GIF, imagem e vídeo em uma folha 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 construtor de jogos 3D — porque esse é o pipeline que entregamos e testamos.

O que é uma folha de sprites

Uma folha de sprites é uma imagem raster em que cada quadro da animação ocupa uma célula de tamanho igual em uma grade regular. A folha em si não carrega informação semântica sobre qual célula é qual quadro; esse mapeamento fica na convenção de nomes dos arquivos, em um índice JSON sidecar ou nas configurações de animação da engine. As quatro coisas que você precisa saber para fatiar uma folha 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 para a 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 pela folha, o que é lido como uma deriva horizontal lenta. 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 solavanco em vez de uma pose de contato. Esses não são bugs de renderização; são incompatibilidades de metadados.

Anatomia de uma folha

Pense em uma folha como uma tabela. Colunas e linhas estão implícitas nas dimensões em pixels: a largura total dividida pela largura da célula dá a contagem de colunas, e a altura total dividida pela altura da célula dá a contagem de linhas. Uma folha 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 conta muda: 512 pixels de largura com células de 64 pixels e padding de 1 pixel comporta 7 células, não 8, porque o padding consome 8 pixels. Padding e espaçamento devem ser considerados antes de você escrever o código de fatiamento.

Onde a origem importa

A maioria dos pipelines de 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 o seu sprite aparecer de cabeça para baixo, verifique a origem antes de redimensionar qualquer coisa. A correção geralmente é uma transformação de uma linha ou uma regeneração com a ordem de linhas oposta, não uma reexportação completa.

Folha de sprites vs spritesheet vs atlas de sprites

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 aparece em identificadores de código, nomes de arquivos e algumas APIs de engine porque espaços são incômodos nesses contextos. Mecanismos de busca os tratam como quase sinônimos, então você encontrará a mesma técnica com as duas grafias.

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

• FolhaUma grade ou tira de quadros de tamanho igual. Nenhum metadado necessário. O fatiamento é aritmética.
• SpritesheetO mesmo artefato, escrito como uma palavra. 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álculos de coordenadas.

Folha em grade vs tira horizontal de quadros

Uma folha em grade empacota quadros em linhas e colunas para manter a imagem próxima de um quadrado. 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 uma folha quadrada é mais fácil de pré-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 horizontal de quadros coloca todos os quadros em uma única linha. Esse é o layout que shaders e texturas de flipbook esperam, porque o deslocamento UV se torna uma única multiplicação: o índice do quadro dividido pela contagem de quadros dá o deslocamento X, e Y permanece constante. Se você entregar uma folha em grade a um shader que assume uma tira, a animação vai amostrar ao longo 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 linha muito larga ou não vai encontrar linhas.

O modo de falha costuma ser sutil no começo: a animação é reproduzida, 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 construtor de jogos 3D, 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 amostra diretamente.

Qual formato exportar

PNG é o padrão seguro. Ele suporta alfa 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 importar e você puder 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 a sua fonte tiver bordas suaves, o GIF vai criar franjas nelas.

Inclua um sidecar JSON quando os seus quadros não forem uma grade uniforme simples, quando você precisar de estados nomeados ou quando o consumidor esperar um atlas. O sidecar é pequeno e elimina a necessidade de codificar manualmente as coordenadas. Se os seus quadros forem uniformes e a animação for um único loop, você pode dispensá-lo e deixar a engine calcular os retângulos. Nunca exporte sprites como JPEG. JPEG tem perdas e não tem canal alfa, então a transparência se torna preta ou branca, e os artefatos de compressão caem exatamente nas 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 soltar um arquivo e obter uma folha de sprites 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 uma folha ou tira, preservando os atrasos dos quadros em um sidecar, se você solicitar. Para imagens estáticas, o conversor recorta e organiza uma sequência de imagens fornecida por você em uma grade. Para vídeo, o conversor amostra quadros em uma taxa escolhida e os grava em uma folha; você controla o intervalo de amostragem e o tamanho da célula. Se você está criando um personagem para The Cyclops' Island ou um objeto de cena para Mini World, comece pelo formato de origem que você tem e escolha o conversor correspondente.

• GIF para folha de spritesDesempacota um GIF animado quadro a quadro e empacota os quadros em uma grade ou tira horizontal.
• Imagem para folha de spritesPega uma sequência de imagens estáticas e as organiza em uma grade uniforme com tamanho de célula consistente.
• Vídeo para folha de spritesAmostra quadros de um vídeo em um intervalo escolhido e os grava em uma folha ou tira.
• Agent Sprite ForgeNossa ferramenta focada em sprites para gerar e empacotar quadros de personagens em folhas usadas pelo construtor de jogos 3D.

Glossário

Estes são os termos que aparecem quando você lê documentação de folhas de sprites, 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.
• CélulaO retângulo em uma folha que contém um quadro. Sua largura e altura são o tamanho da célula.
• Tira de quadrosUma folha disposta como uma única linha horizontal de quadros, usada por shaders e texturas de flipbook.
• FlipbookUma textura que é amostrada uma região por vez ao longo do tempo para produzir uma animação, normalmente a partir de uma tira de quadros.
• ÍndiceOs dados do sidecar que nomeiam ou numeram regiões em um atlas. Sem ele, o fatiamento é aritmética.
• OrigemO 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 uma folha, usados para evitar sangramento de textura. O padding muda quantas células cabem.
• EspaçamentoA distância entre células, muitas vezes usada de forma intercambiável com padding, mas às vezes contada separadamente.

Entre no mundo ao qual ela pertence

Um sprite é um personagem sem lugar para ficar de pé. O último passo é o que ninguém mais oferece: pegue a folha que você acabou de criar e coloque-a 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.