Empacotador de sprite sheets
Empacote várias imagens de ícones ou sprites em uma única folha, gerando mapas de coordenadas (JSON/CSS) no lado do cliente. Rápido, seguro offline e grátis. Simplifique os recursos dos seus jogos e otimize as conexões de folhas de estilo do seu site instantaneamente.
Por que usar nosso Empacotador de sprite sheets?
- 100 % privado e local: seus ativos de imagem são processados totalmente no espaço de memória do seu navegador local. Nenhum gráfico ou metadado viaja para servidores externos, garantindo privacidade de design absoluta e conformidade para projetos pessoais e comerciais.
- Layouts de empacotamento otimizados: organiza os ícones usando um avançado algoritmo de empacotamento por árvore binária 2D crescente que minimiza a área da folha. Você também pode alternar entre as opções padrão de empilhamento linear vertical e horizontal.
- Geradores de CSS e JSON: compila instantaneamente classes CSS responsivas com posições de fundo negativas ou exporta mapas JSON padrão compatíveis com motores web e jogos (como PixiJS, Phaser e Cocos2d).
- Inspetor interativo de sobreposições: audite e visualize dinamicamente as coordenadas empacotadas. Passar o cursor sobre qualquer sprite dentro do mapa de coordenadas gerado destaca sua caixa delimitadora exata sobre a folha do canvas.
A vantagem das sprite sheets: reduzir sobrecarga de rede
Os navegadores limitam o número de conexões HTTP simultâneas a um único host (muitas vezes limitado a 6 conexões). Quando um site depende de dezenas de pequenas imagens de ícones, carregá-las individualmente causa latência de rede, atrasos na fila e deslocamentos cumulativos de layout. As sprite sheets resolvem isso por consolidação. Carregar uma única imagem maior combina todos os payloads HTTP em um único fluxo de conexão TCP. Além disso, elimina os incômodos piscares brancos que ocorrem quando um navegador tenta carregar uma imagem separada de estado de hover na interação do usuário.
Como os algoritmos de empacotamento 2D otimizam a área da folha
Empacotar vários retângulos arbitrários em uma única área delimitadora com desperdício mínimo é um problema NP-completo. Esta ferramenta utiliza um algoritmo de empacotamento por árvore binária 2D crescente. O empacotador começa com o tamanho do primeiro item e cresce dinamicamente para a direita ou para baixo para acomodar novos blocos, escolhendo o caminho que mantém a proporção geral da folha próxima de um quadrado. Ordenar previamente os itens por área decrescente garante que os blocos maiores sejam colocados primeiro, permitindo que os menores se ajustem firmemente nos espaços restantes.
Background-position do CSS vs mapas de textura JSON
Depois de empacotados, os sprites exigem mapas de coordenadas para indicar aos aplicativos onde cada ícone reside. Os layouts web dependem de classes de sprites CSS. Ao atribuir uma classe compartilhada com a URL da imagem de fundo e aplicar deslocamentos de fundo negativos individuais (por ex., `background-position: -32px -64px`), os navegadores renderizam o bloco de subimagem específico. Para sistemas de aplicativos baseados em canvas e jogos 2D, hashes JSON padrão mapeiam cada arquivo nomeado para suas coordenadas delimitadoras exatas, permitindo que os motores recortem e fatie texturas dinamicamente em viewports WebGL.
Perguntas frequentes
Um empacotador de sprite sheets é uma ferramenta de design offline que combina várias imagens ou ícones separados em um único arquivo de imagem. Ele mapeia as coordenadas exatas em pixels de cada gráfico original, gerando arquivos de folha de estilo ou de dados para que os aplicativos exibam cada elemento corretamente.
Quando você carrega arquivos, seu navegador os lê na memória como objetos de imagem. O algoritmo de empacotamento calcula a disposição de coordenadas mais compacta em uma grade virtual e pinta os sprites em um canvas fora da tela. Os resultados são exportados como imagens e código diretamente no seu navegador.
Sim, nosso empacotador de sprite sheets roda totalmente no lado do cliente dentro do seu navegador local. Nenhum dos seus arquivos de imagem, dimensões, nomes ou designs é enviado aos nossos servidores. Todas as operações de desenho e empacotamento de pixels são executadas localmente no seu computador, garantindo privacidade absoluta para ativos de propriedade intelectual.
A ferramenta suporta três layouts de empacotamento. O modo Árvore Binária executa um algoritmo de partição crescente para empacotar itens em uma pegada próxima a um quadrado. O layout Vertical empilha itens em uma única coluna, e o Horizontal os organiza lado a lado em uma linha larga.
A ferramenta gera duas folhas de mapeamento comuns. A aba CSS fornece regras de classe com dimensões-alvo e coordenadas negativas de background-position. A aba JSON gera configurações hash padrão do TexturePacker, definindo coordenadas, recortes e tamanhos de folha perfeitos para frameworks modernos de jogos web.
Sim, você pode configurar espaçamento ou preenchimento personalizado entre seus sprites. A ferramenta suporta valores de 0px a 32px. Adicionar espaçamento é altamente recomendado para evitar artefatos de sangramento, em que pixels de sprites adjacentes são renderizados acidentalmente ao longo das bordas do seu layout.
Você pode configurar limites máximos de até 4096px de largura e altura. Como todo o processamento roda na memória do navegador, o desempenho depende da RAM do seu dispositivo. A ferramenta de empacotamento lançará um erro se as configurações de layout excederem os limites de tamanho do canvas de destino.