Gerador de Sprite Sheet
Combine imagens em sprite sheet com arrastar para reordenar, layout em grade, preenchimento, modos de escala. Exporte PNG/WebP/JPG com dados JSON atlas para motores de jogos e CSS.
O que é um sprite sheet e por que usar um?
Um sprite sheet é uma imagem única contendo múltiplas imagens menores (sprites) organizadas em grade. Usar sprite sheets reduz requisições HTTP, melhora o desempenho de carregamento e torna a renderização de jogos mais eficiente.
Quais formatos de imagem são suportados?
Você pode carregar imagens PNG, JPG, GIF, SVG e WebP. A ferramenta suporta upload em lote e colar da área de transferência (Ctrl+V) para um fluxo de trabalho rápido.
Quais formatos de exportação estão disponíveis?
Exporte sprite sheets como PNG (com transparência), WebP (formato moderno com arquivos menores) ou JPG (melhor para fotos sem transparência). Escolha com base nos requisitos da sua plataforma.
Como reordenar imagens no sprite sheet?
Arraste e solte as miniaturas das imagens para reorganizar sua posição no sprite sheet. Você também pode colar imagens diretamente da área de transferência usando Ctrl+V.
O que são dados JSON atlas e quais engines os suportam?
Dados JSON atlas contêm posição, tamanho e informações de cada sprite. É compatível com engines de jogos populares como Phaser, PixiJS, Unity, Cocos2d e muitos outros para extração automática de sprites.
Quais são os diferentes modos de escala?
O modo Ajustar escala as imagens mantendo proporção. Preencher escala para cobrir toda a célula e corta excesso. Esticar deforma para preencher sem manter proporção.
A ferramenta suporta transparência?
Sim, as exportações PNG e WebP preservam transparência das imagens originais. Você também pode definir uma cor de fundo personalizada para o sprite sheet, útil para exportações JPG que não suportam transparência.
Como o preenchimento afeta o sprite sheet?
O preenchimento adiciona espaço entre sprites individuais na folha, prevenindo sangramentos visuais quando as texturas são amostradas. Isso é especialmente importante para engines de jogos que usam filtragem linear.
Posso usar sprite sheets para CSS?
Sim, sprite sheets funcionam muito bem para sprites CSS. Os dados JSON atlas podem ser usados para gerar regras CSS background-position, reduzindo requisições HTTP e melhorando o desempenho de carregamento.
Quais são as melhores práticas para dimensões de sprite sheets?
Mantenha as dimensões como potências de 2 (256x256, 512x512, 1024x1024) para manuseio ótimo de texturas GPU. A maioria dos engines de jogos preferem estas dimensões para melhor desempenho.
Como os sprite sheets melhoram o desempenho do jogo?
Sprite sheets reduzem chamadas de desenho ao agrupar múltiplos sprites em uma única textura. Isso minimiza mudanças de estado GPU, reduz sobrecarga de memória e permite renderização mais eficiente.
Qual é a diferença entre sprite sheets e atlas de texturas?
Sprite sheets tipicamente organizam frames em uma grade uniforme, enquanto atlas de texturas podem empacotar sprites de formas irregulares mais eficientemente usando algoritmos como bin packing.
Como usar Gerador de Sprite Sheet
Junte várias imagens em uma única sprite sheet direto no navegador. Arraste para reordenar os quadros, ajuste a grade e o espaçamento e exporte um atlas PNG/WebP/JPG com dados JSON para game engines e sprites CSS. Todo o processamento é local.
- Adicione suas imagens e use os botões + e − para definir as Columns e Rows da grade.
- Defina o Padding (px) para criar espaço entre os sprites e evitar bleeding de textura.
- Deixe o Sprite Size em Auto para acomodar o maior quadro, ou digite dimensões fixas para células uniformes.
- Escolha um Scale Mode — Fit, Fill ou Stretch — para controlar como cada imagem se encaixa na sua célula.
- Selecione um Background (Transparent, White, Black ou Custom), defina o Format como PNG, WebP ou JPG e nomeie o arquivo em Filename.
- Arraste as miniaturas para reordenar quadros — as coordenadas do atlas atualizam automaticamente — e exporte a folha com o JSON.
Use pelo menos 2 px de espaçamento para que sprites vizinhos não se misturem quando as texturas forem escaladas ou filtradas no seu engine.
Ferramentas relacionadas
- Calculadora Chmod Calculadora chmod online gratuita para visualizar e calcular permissões de arquivo Linux com caixas de seleção. Converta instantaneamente entre notação numérica (755, 644) e simbólica (rwxr-xr-x). Suporta permissões especiais como setuid, setgid, sticky bit.
- Tabela ASCII Referência completa de codificação de caracteres ASCII com códigos decimais, hexadecimais, octais, binários, entidades HTML e descrições. Pesquisa e filtro instantâneos.
- Testador de Requisições HTTP Teste APIs REST diretamente no seu navegador. Envie requisições GET, POST, PUT, DELETE com headers, body e parâmetros personalizados. Veja status, headers e corpo JSON instantaneamente.
- Gerador .htaccess Gere regras .htaccess do Apache para redirecionamentos, reescritas, cabeçalhos de segurança, cache e mais.
- Gerador de Robots.txt Gerador gratuito de robots.txt online. Crie e personalize arquivos robots.txt para controlar a rastreamento de motores de busca, gerenciar acesso de rastreadores e otimizar o SEO do seu site.
- Gerador de Sitemap Gerador gratuito de sitemap XML online. Adicione URLs, defina prioridades e frequências, crie sitemaps SEO instantaneamente.
- GIF Extrair Quadros Extrai e baixa quadros individuais de animações GIF como PNG ou sprite sheet. Ferramenta online gratuita com visualização e exportação ZIP.
- GIF Invertido Inverte a ordem de reprodução de animações GIF online gratuitamente. Carregue, visualize e baixe instantaneamente.