O que é Gerador de sprite sheet?

O Gerador de Sprite Sheet combina várias imagens individuais em uma única folha de sprites otimizada. Envie seus quadros ou ícones — ou solte um GIF animado e cada quadro é extraído automaticamente —, escolha um layout (grade, tira horizontal, tira vertical ou compacto), selecione um fundo transparente ou sólido e exporte a imagem combinada com dados de posição em JSON, JSON Array, XML TextureAtlas ou CSS.

O modo grade organiza tudo em um layout uniforme de N por M, ideal para ciclos de animação em que cada quadro tem o mesmo tamanho. As tiras horizontal e vertical alinham os quadros em uma única linha ou coluna — o layout padrão para animações simples de motores 2D. O modo compacto executa um empacotamento para que ícones de tamanhos diferentes encaixem com o mínimo de desperdício. Solte um GIF animado e cada quadro é decodificado dentro da folha, sem precisar exportar os quadros antes. A saída mantém um fundo transparente por padrão, ou você pode escolher uma cor sólida como preenchimento de chroma key. Os metadados vêm em quatro formatos — JSON hash, JSON Array, XML TextureAtlas e CSS — para colocar direto no Phaser, PixiJS, Unity, Godot ou em um background-position de CSS. Uma prévia de animação permite revisar os quadros de 1 a 60 FPS para acertar o tempo antes de baixar. Avance quadro a quadro para flagrar qualquer sprite desalinhado, apare a borda transparente de cada um para a folha ficar compacta e baixe a sequência como um GIF animado para compartilhar o resultado sem um motor de jogo.

Como usar

1. Faça upload das imagens individuais que deseja combinar em uma sprite sheet.
2. Escolha o layout (grade, horizontal, vertical ou compactado), ajuste o espaçamento e defina o fundo como transparente ou em cor sólida.
3. Baixe a imagem da sprite sheet junto com os dados de posição em CSS ou JSON.

Quando usar

• Empacotar um ciclo de caminhada ou animação de explosão em uma única imagem para a engine.
• Juntar um conjunto de ícones de UI em um único arquivo para a página fazer uma requisição HTTP no lugar de quarenta.
• Preparar sprites de tilemap com padding consistente para que ladrilhos vizinhos não vazem cor.

Resultado

Um desenvolvedor de jogos faz upload de 16 frames de animação de personagem (64×64 cada). A ferramenta os organiza em uma grade 4×4, produzindo uma sprite sheet de 256×256 com coordenadas JSON dos frames para o motor de jogo.

Perguntas frequentes

Quando usar o layout compactado em vez de grade?

Use grade quando todos os quadros têm o mesmo tamanho, como uma animação de personagem 32x32. Use tira horizontal ou vertical para uma sequência de uma linha ou coluna, o formato mais simples para a maioria das engines carregar. Use compactado quando os ícones variam, por exemplo um conjunto de UI com 16x16 e 48x48 misturados; produz a menor folha, mas os metadados ficam mais difíceis de ler à mão.

Para que serve o ajuste de padding?

Padding adiciona pixels transparentes ao redor de cada frame. Sem ele, um renderizador com filtragem linear pode sangrar cores dos frames vizinhos nas bordas do frame que está sendo desenhado. Um ou dois pixels de padding já evitam esse artefato.

Qual formato de metadados devo exportar?

JSON (hash) é o formato TexturePacker que a maioria dos motores carrega, com cada quadro indexado por nome. JSON Array guarda os quadros como uma lista ordenada, que o Phaser 3 e alguns fluxos preferem. XML é o TextureAtlas do Starling/Sparrow que Unity, Godot e Friday Night Funkin usam. CSS dá classes com background-position para conjuntos de ícones web. Escolha o que o seu renderizador espera.

A saída preserva transparência?

Sim por padrão. A folha é exportada como PNG com o canal alfa intacto, então fundos transparentes dos seus PNGs originais são mantidos. Se precisar de uma folha opaca, escolha uma cor de fundo sólida ao lado dos controles de layout; é útil para chroma keying ou engines que ignoram o alfa. Evite JPGs como fonte se a transparência importa, já que o JPG achata o alfa para branco antes mesmo do upload.

Quantos frames cabem numa única folha?

Na prática, GPUs móveis limitam texturas individuais a cerca de 2048 ou 4096 pixels por lado, então uma folha 4096x4096 com frames 64x64 comporta 4096 frames. Para animação, dividir em duas folhas 2048x2048 é mais seguro em aparelhos antigos.

Ferramentas relacionadas