Gerador de sprite sheet

Como o layout funciona

O gerador usa um layout único e previsível: uma grade uniforme. Você define o número de colunas, e o de linhas é arredondar_para_cima(imagens / colunas). Cada célula tem o mesmo tamanho quadrado (o tamanho de célula escolhido), então cada imagem é escalada para caber em sua célula mantendo a proporção e é centralizada. Imagens de tamanhos diferentes acabam todas em células iguais, exatamente o que os sprites CSS com background-position esperam.

Forma do CSS gerado

Cada imagem vira uma classe com o nome do arquivo (.spr-<nome>), dimensionada ao tamanho de célula e deslocada para sua célula. Com quatro colunas, tamanho de célula de 128 px e sem espaçamento, a folha fica assim:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

O offset se move em duas dimensões: os sprites preenchem cada linha da esquerda para a direita e depois pulam para a próxima linha. Salve o PNG como spritesheet.png ao lado do seu CSS (ou edite url(...) para bater com o seu caminho).

Espaçamento e vazamento

Sprites empacotados borda a borda podem vazar uns nos outros quando o navegador escala a folha (proporções de pixel não inteiras, transformações CSS). Adicione de 2 a 4 pixels de espaçamento entre células para impedir que pixels vizinhos vazem.

Telas de alta densidade (retina)

Não há exportação 2x automática, mas você pode obter uma folha mais nítida de forma simples: escolha um tamanho de célula maior (por exemplo 256 px em vez de 128 px) para que cada sprite carregue mais pixels, e então exiba-o na metade do tamanho CSS. Assim você tem sprites nítidos em telas de alta densidade sem uma passagem separada.

Sprite sheets ou alternativas

• Sprite sheets: conjuntos de ícones clássicos em CSS, quadros de jogos HTML5 e páginas que ganham ao agrupar muitas imagens pequenas em um só arquivo.
• Sprites SVG (symbol): melhores para ícones de interface modernos, escalam sem perda, aceitam fill do CSS, sem malabarismos com background-position.
• Fontes de ícones: limitadas, mas ainda usadas para ícones minúsculos de uma só cor.
• Arquivos separados com HTTP/2 ou HTTP/3: a multiplexação faz o número de requisições importar menos do que antes.