Gerador de folhas de sprites

Reúna várias imagens em uma folha de sprites com coordenadas em CSS, SCSS ou JSON

👇 Role para baixo para ver um guia rápido passo a passo

Solte seus sprites aqui

ou clique em qualquer lugar para escolher arquivos

PNGJPGWEBPGIF

Gerado CSS

Carregue imagens para gerar código

As classes CSS e as coordenadas JSON aparecerão aqui

Antes de começar com Gerador de folhas de sprites

Agrupe várias imagens em uma folha de sprites com controles de espaçamento e saída de coordenadas CSS, SCSS ou JSON no navegador.

Ideal para

Reunião de quadros individuais de jogos ou ícones de interface em um atlas PNG
Geração de coordenadas CSS, SCSS ou JSON junto com a folha
Criação de uma folha simples empacotada em fileiras diretamente no navegador

Saiba antes de começar

O empacotador coloca imagens em linhas; não é um otimizador de empacotamento de uso geral
As escolhas de espaçamento e escala afetam as dimensões finais da folha
Lotes grandes usam a memória do navegador enquanto cada imagem é decodificada

Continue o fluxo de trabalho

Recortador de folhas de spritesDivida um atlas existente em quadros separados.Ampliador de pixel artAmplie os quadros de pixel art antes de empacotá-los.Compressor de imagensReduza o tamanho da folha exportada para entrega.Guia de empacotamento de atlas de spritesSaiba mais sobre espaçamento, tamanhos em potências de dois e vazamento de cor.Guia de sprites CSSDecida quando um sprite CSS ainda faz sentido.Importação de folhas de sprites no UnityImporte o atlas gerado para o Unity.

Como usar o Gerador de folhas de sprites

1Adicionar imagens

• Clique em "Adicionar imagens" ou arraste e solte imagens de sprites
• Aceita os formatos PNG, JPG, JPEG e WebP
• Use Otimizar automaticamente para otimização automática

2Configurar tela

• Tela: Defina as dimensões (modo Personalizado/Máximo)
• Redimensionar: Redimensione sprites com o controle deslizante de porcentagem
• Espaçamento: Ajustar o espaçamento entre sprites

3Gerar código

• Formato: Escolha saída em CSS, SCSS ou JSON
• Nomes: Defina o padrão de nomes dos sprites
• Ordenar: Ordene por tamanho ou nome

4Baixar recursos

• Clique em "Baixar PNG" para obter a imagem da folha de sprites
• Clique em "Baixar código" para obter coordenadas CSS/JSON
• Use "Limpar" para recomeçar com novos sprites

Principais recursos:

Agrupamento em linhas com controle de espaçamento

Redimensione sprites antes de agrupá-los

Saída em CSS, SCSS e JSON

Funciona no seu navegador, sem envio de arquivos

Perguntas sobre o Gerador de folhas de sprites

O que faz um gerador de folhas de sprites?

Ela empacota arquivos de imagem separados em uma imagem de atlas. Manter sprites relacionados juntos pode facilitar a distribuição de um recurso, enquanto as coordenadas geradas informam ao CSS ou ao código do jogo onde cada sprite fica na folha.

Quais formatos de código posso exportar?

A ferramenta pode gerar dados de coordenadas CSS, SCSS ou JSON junto com a folha de sprites PNG. O JSON contém as posições e dimensões dos quadros, então você pode adaptá-lo ao formato de asset esperado pela sua engine de jogos ou aplicativo.

Minhas imagens são enviadas para um servidor?

Não. As imagens são decodificadas e empacotadas no navegador. Os arquivos originais e a folha gerada não são enviados a um servidor de upload do ImageMint.

Por que o espaçamento importa em um atlas de sprites?

O espaçamento deixa espaço entre sprites vizinhos. Sem separação suficiente, a filtragem de textura ou a renderização em escala pode amostrar um sprite próximo e criar vazamento de cor na borda.

Fluxos de trabalho com sprites relacionados

Para recortar um atlas existente novamente em quadros separados, use o Recortador de folhas de sprites . O guia de empacotamento de atlas de sprites explica espaçamento e vazamento nas bordas. Para continuar com informações específicas da engine, veja os Guia de importação no Unity e Guia de importação no Godot.