Empacotador e Extrator de Sprite Sheet

Otimize o desempenho de jogos 2D alinhando frames de animação em atlas de textura ou extraindo sprites de folhas existentes.

Arraste e Solte os Frames
Envie imagens PNG ou WebP para gerar seu atlas de textura otimizado
0%
Eficiência da Textura
0
Redução de Draw Calls
0
Frames Empacotados
0x0
Dimensão do Atlas
Reprodutor Flipbook de Animação
Código de Integração do Motor 
 
 
 
  
Copiado para a Área de Transferência
 
 
 
    
 
 
 Zoom  100%  
  
 
 
 
 
 
 
 
       Estúdio de Utilitários 
 
 
Quer este utilitário no seu site?
 
Personalize cores e o modo escuro para WordPress, Notion ou o seu próprio site.
 
 
 
  Avançar        
 
 
 
 
 
 
 
Perguntas frequentes
 
 
  O que é um sprite sheet e por que é essencial em jogos 2D?        
 
Um sprite sheet é um arquivo de imagem composto contendo múltiplos frames de animação. Isso permite desenhar vários elementos em uma única instrução da GPU.
 
 
  Como funciona o processamento local nesta ferramenta?        
 
Suas imagens são processadas localmente no seu navegador através da API Canvas HTML5 sem enviar dados a servidores externos.
 
 
  Posso extrair frames de uma folha de sprites existente?        
 
Sim. Mude para o modo Extrator, envie sua folha e ajuste o tamanho da grade para recortar cada imagem.
 
 
 
 
 
 
 
 
 # Otimização de Renderização e Draw Calls em Motores de Jogos 2D
Agrupar múltiplos frames individuais em um único atlas de textura reduz drasticamente o número de instruções draw calls enviadas do processador para a placa gráfica GPU.
 
 
   
 
 95% Redução de Draw Calls 
 
 
   
 
 4x Processamento GPU Mais Rápido 
 
 
   
 
 60 FPS Meta Estável em Dispositivos Móveis 
 
 
   
 
 100% Processamento Local no Navegador 
 
 
 # Comparativo entre Imagens Avulsas e Atlas de Textura
 
 
  
Arquivos de Frames Avulsos
 
 
Arquivos PNG ou WebP armazenados separadamente
 
     
  •        Gera uma instrução draw call separada para cada frame exibido na tela 
  •        Provoca trocas frequentes de contexto na placa de vídeo GPU 
  •        Aumenta o número de requisições HTTP em jogos para web 
  •        Queda de taxa de quadros em dispositivos móveis 
    •  
 
 
  
Atlas de Textura Empacotado
 
 
Imagem PNG única combinada com dados de coordenadas JSON
 
     
  •        Agrupa centenas de sprites em uma única instrução draw call da GPU 
  •        Maximiza a largura de banda da memória VRAM e a velocidade de renderização 
  •        Reduz requisições agrupando textura e dados em um único download 
  •        Garante 60 FPS fluídos em todas as plataformas 
    •  
 
 
 # Matemática da Extrusão de Bordas e Movimento Subpixel
Aplicar 1 a 2 pixels de extrusão de borda duplica os pixels externos da imagem, evitando linhas visíveis quando a câmera se move em subpixels.
 
Estratégia de Extrusão de Bordas
 Utilize extrusão de bordas para impedir que pixels vizinhos vazem ao movimentar a câmera 2D. 
 # Dimensões Recomendadas de Textura por Plataforma
 
  
  Plataforma Alvo  Tamanho Máximo Recomendado  Requisito Potência de 2  Perfil de Memória  
   
 Navegadores Móveis2048 x 2048 pxObrigatório em WebGL 1.0Baixa Largura de Banda 
 PC / Consoles4096 x 4096 pxRecomendadoAlta Capacidade de GPU 
 Consoles Portáteis Retro1024 x 1024 pxRequisito EstritoLimites de VRAM Rigorosos 
  
 
  
 
        Vantagens  
     
  •        Garante 100% de compatibilidade com drivers antigos e WebGL 1.0 
  •        Suporta geração automática de mipmaps por hardware 
  •        Otimiza a alocação de memória VRAM na placa gráfica 
    •  
 
 
        Desvantagens  
     
  •        Pode deixar espaço transparente não utilizado com poucos sprites 
  •        Exige ajuste fino de margem em formatos irregulares 
  •        Aumenta ligeiramente a área de textura inicial 
    •  
 
 
 
 # Termos Chave no Empacotamento de Sprites
 
 
 
 Draw Call 
 
 
Instrução enviada pelo processador para a placa gráfica desenhar geometrias e texturas.
 
 
 Bin Packing 
 
 
Técnica algorítmica para organizar elementos retangulares de forma otimizada em espaço mínimo.
 
 
 Border Extrusion 
 
 
Duplicação dos pixels da borda para fora evitando imperfeições ao mover a câmera.
 
 
 Flipbook Animation 
 
 
Reprodução sequencial rápida de quadros estáticos para simular movimento contínuo.
 
 
 
 # Lista de Controle de Desempenho
 
 
  
Regras de Produção
 
 A ter em conta 
 
  Agrupe animações em atlas compartilhados e utilize potências de dois para builds em WebGL.  
 
Esta secção reúne as verificações essenciais para uma exportação correta e uma pré-visualização fiável. 1.Esta secção reúne as verificações essenciais para uma exportação correta e uma pré-visualização fiável. 2.
 # Ajustar padding, extrusão e dados exportados
O padding separa frames vizinhos, enquanto a extrusão repete os pixels das bordas. Avalie os dois valores junto com filtragem, mipmaps e movimento de câmera: pouco espaço cria emendas e espaço demais desperdiça área de textura.Depois do empacotamento, confira as coordenadas JSON na engine de destino. Um atlas só é confiável quando tamanho, origem, rotação e transparência são interpretados como no arquivo exportado.Confira também se o formato da textura e os metadados atendem à engine de destino. O tamanho máximo, o corte da transparência e a exigência de potência de dois afetam a memória e a compatibilidade com dispositivos antigos. 
 
 
 
 
 
       
Referências Bibliográficas
 
  
 
 
 
 
Mais utilitários de Ferramentas para desenvolvimento de jogos
 
 
       
 
 Gerador e Visualizador de Cápsulas Steam 
 
 Corte, visualize e formate cápsulas oficiais da loja e biblioteca Steam com verificação de zonas de segurança. 
  
 Usar ferramenta       
 
  
 
       
 
 Inspetor de Jogos Web Itch.io e Otimizador de Resolução ao Vivo 
 
 Carregue ficheiros de exportação HTML5 ou arquivos ZIP para testar viewports ao vivo, corrigir barras de rolagem, inspecionar builds Godot e Unity WebGL e gerar configurações de incorporação para Itch.io. 
  
 Usar ferramenta       
 
  
 
       
 
 Localizador de Ponto de Loop de Áudio e Injetor de Metadados 
 
 Localize pontos exatos de loop de áudio, ajuste aos cruzamentos por zero para eliminar cliques e exporte arquivos WAV com metadados LOOPSTART e LOOPEND. 
  
 Usar ferramenta       
 
  
 
       
 
 Editor e Ofuscador de Save de Jogo 
 
 Descriptografe, inspecione, edite payloads JSON e criptografe arquivos de save de jogos usando Base64, máscara XOR ou texto simples 100% localmente no navegador. 
  
 Usar ferramenta       
 
  
 
       
 
 Depurador de Arquivos CSV e JSON de Localização para Godot e Unity 
 
 Inspecione arquivos CSV ou JSON de tradução em busca de células vazias, chaves duplicadas e linhas corrompidas, e exporte uma cópia limpa pronta para importação. 
  
 Usar ferramenta       
 
  
 
       
 
 Conversor de BBCode da Steam, Markdown e HTML 
 
 Converta entre BBCode da Steam, Markdown e HTML em ambas as direções com deteção automática de sintaxe e pré-visualização. 
  
 Usar ferramenta       
 
  
 
       
 
 Gerador de Efeitos Sonoros Retrô para Jogos 
 
 Crie efeitos sonoros retrô para jogos no navegador com predefinições rápidas, controles de onda, osciloscópio ao vivo e exportação WAV. 
  
 Usar ferramenta       
 
  
 
       
 
 Troca de Paleta para Pixel Art 
 
 Reduza sprites e folhas de sprites para paletas clássicas de consoles ou uma lista personalizada de cores hexadecimais no navegador. 
  
 Usar ferramenta       
 
  
 
       
 
 Testador de Estresse de Acessibilidade para UI de Jogos 
 
 Inspecione capturas de tela de jogos localmente com simulações de daltonismo, sondas de contraste HUD, desfoque, redução de escala e mapas de calor de bordas. 
  
 Usar ferramenta       
 
  
 
       
 
 Animador de Hitbox e Hurtbox para Sprites 
 
 Desenhe camadas de colisão em cada quadro do seu sprite, pré-visualize sequências com papel vegetal, ajuste coordenadas exatas em pixels e exporte JSON neutro. 
  
 Usar ferramenta       
 
  
 
       
 
 Laboratório de Fórmulas de Dano e Gráficos TTK 
 
 Compare fórmulas de dano para jogos em tempo real com curvas dinâmicas, mapas de calor de ataque e defesa, arredondamentos e tempo para derrotar (TTK). 
  
 Usar ferramenta       
 
  
 
       
 
 Laboratório de Delta Time e Timestep Fixo para Jogos 
 
 Compare loops de jogo com delta variável e timestep fixo usando picos de frame repetíveis, movimento simulado, passos de recuperação e desvio temporal visível. 
  
 Usar ferramenta