Gerador de Sprite Sheet

About Gerador de Sprite Sheet

Last updated: May 2026

OptiPix Sprite Sheet Generator combina múltiplas imagens em uma única sprite sheet otimizada, com CSS para colar, coordenadas JSON e variáveis SCSS prontas. Escolha um layout: tira horizontal, tira vertical, grade (contagem de colunas personalizável) ou empacotado (bin-packed para desperdício mínimo de espaço). Defina o espaçamento entre os sprites para evitar vazamento nas bordas. A saída é uma única sprite sheet PNG mais CSS gerado para cada sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), um mapa de coordenadas JSON e variáveis SCSS. Escalonamento Retina @1x e @2x suportado. Cada sprite é nomeado com base no nome do arquivo de origem. Tudo roda localmente - suas imagens nunca saem do seu dispositivo. Construído para desenvolvedores de jogos, desenvolvedores web que usam CSS sprites e qualquer pessoa que queira agrupar ícones pequenos em uma única requisição de rede.

How It Works

Cada imagem de entrada é carregada na memória; o algoritmo de layout escolhido (tira, grade ou shelf bin-pack) calcula as coordenadas por sprite (x, y, w, h); a sprite sheet é renderizada em um canvas; CSS / JSON / SCSS são gerados a partir do mesmo mapa de coordenadas.

Use Cases

• •Agrupar ícones de UI em uma única sprite sheet PNG + CSS
• •Criar um atlas de sprites para um jogo 2D em Phaser ou Pixi
• •Combinar ícones de mídia social em uma única CSS sprite para um site mais rápido
• •Empacotar quadros de animação de personagens em uma tira horizontal
• •Construir uma sprite sheet @2x pronta para retina a partir de imagens de origem

You Might Also Like

If you find Gerador de Sprite Sheet useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.