Gerador de sprite sheet — PNG + JSON + CSS

O que é um sprite sheet e por que ele ajuda

Um sprite sheet reúne muitas imagens pequenas — quadros de animação, tiles de jogos, ícones de UI, emojis ou bandeiras — em uma única imagem maior. Carregar um arquivo em vez de dezenas reduz as requisições HTTP e as trocas de textura, o que faz páginas web e jogos carregarem e renderizarem mais rápido. Cada sprite individual é então exibido referenciando seu retângulo dentro da folha. Este gerador de sprite sheet cria a imagem e as coordenadas para você: solte seus arquivos, escolha um layout e baixe um PNG junto com um arquivo de dados JSON e uma folha de estilos CSS pronta para usar.

Todo o trabalho acontece no seu navegador. As imagens são desenhadas localmente em um canvas e os arquivos de coordenadas são gerados em JavaScript, então suas artes nunca são enviadas e não há limite de quantas vezes você pode regenerar a folha enquanto experimenta as configurações.

Grade ou layout compacto

A grade uniforme dá a cada sprite uma célula do tamanho da maior imagem e centraliza cada sprite em sua célula. Essa estrutura previsível é o que a maioria dos sistemas de animação espera: o quadro n está sempre na coluna n módulo o número de colunas. As linhas compactas ordenam os sprites por altura e preenchem as linhas até uma largura-alvo, o que desperdiça muito menos espaço quando suas imagens têm tamanhos diferentes. Em ambos os modos, o valor de espaçamento adiciona espaço transparente ao redor de cada sprite para evitar vazamento de cor quando a folha é redimensionada.

Usando a saída JSON e CSS

O arquivo JSON lista cada sprite por um nome limpo derivado do nome do arquivo, com sua posição x e y, largura e altura, além do tamanho total da folha. Frameworks de jogos como Phaser e PixiJS podem carregar esse formato hash diretamente, e ele é fácil de interpretar em qualquer linguagem. O arquivo CSS define uma classe base que aplica a folha como imagem de fundo e uma classe por sprite com seu tamanho e posição de fundo, de modo que um ícone é apenas um span com duas classes. Altere o prefixo das classes para combinar com a nomenclatura do seu projeto e mantenha o PNG ao lado do arquivo CSS ou ajuste a URL.