Um sprite sheet é só metade do trabalho. A engine também precisa saber onde cada frame está e quanto tempo ele dura. Este criador empacota seus frames em uma grade, uma tira ou um atlas justo, e grava esses dados nos formatos que as engines realmente importam: JSON do TexturePacker/Phaser, Aseprite JSON, um recurso SpriteFrames do Godot 4, CSS e configurações de fatiamento para Unity. Os frames são ordenados do jeito que você os numeraria, então walk_10 vem depois de walk_9.
Como usar: Criador de Sprite Sheet
- Solte todos os PNGs dos frames de uma vez. Eles são ordenados pelo nome em ordem natural. Adicione mais quando quiser.
- Reordene com as setas, remova frames sobrando ou inverta a ordem.
- Escolha um layout: Grade (colunas automáticas ou fixas), uma única Linha, uma única Coluna ou Empacotamento justo com as bordas transparentes cortadas.
- Defina o espaçamento entre frames, uma margem externa e a extrusão das bordas. Ative potência de dois se o seu alvo precisar de texturas de 64, 128, 256 px.
- Confira a animação na prévia e defina o FPS.
- Baixe o PNG e um arquivo de dados, ou um ZIP com o PNG e todos os formatos.
O que você recebe
- Sprite sheet PNG com transparência, exatamente como na prévia.
- JSON Phaser / TexturePacker (hash e array), incluindo os deslocamentos do corte para que frames com empacotamento justo continuem alinhados.
- Aseprite JSON com uma tag de frames e as durações.
- SpriteFrames .tres do Godot 4 usando AtlasTextures, pronto para AnimatedSprite2D.
- Sprites CSS com uma classe por frame e uma animação por passos, mais configurações de importação e fatiamento para Unity.
Com quais engines funciona
- Phaser 3:
this.load.atlas(key, 'sheet.png', 'sheet.json')e depois crie a animação a partir dos nomes dos frames. - Godot 4: coloque o .tres ao lado do PNG e atribua-o ao Sprite Frames de um AnimatedSprite2D.
- Unity: layouts em grade são fatiados com Grid By Cell Size usando os valores do arquivo de configurações. Use filtragem Point e sem compressão.
- PixiJS, Defold, Cocos, Construct: leem o JSON do TexturePacker (hash) diretamente ou pelos seus importadores.
Dicas de quem faz jogos com ela
- Use Grade com frames uniformes para animação de personagens. Os fatiadores por grade e as ferramentas de onion skin das engines esperam isso.
- Use Empacotamento justo com corte para atlas de itens e UI com muitas imagens de tamanhos diferentes.
- Adicione 1–2 px de extrusão quando o sprite sheet for escalado por um fator não inteiro ou usar mipmaps. Isso impede que frames vizinhos vazem pelas bordas.
- Mantenha nomes de frame significativos (hero_walk_00…). Eles viram as chaves dos frames no JSON.
Casos de uso
- Empacotar frames exportados do Aseprite, Blender ou Spine em uma única textura.
- Montar um atlas de UI ou de itens para um jogo web.
- Transformar frames gerados por IA em um sprite sheet que a sua engine consiga animar.
- Criar uma animação de sprite em CSS para uma landing page.
Perguntas frequentes
Quais formatos de dados ele exporta?
JSON do TexturePacker nas formas hash e array (lido por Phaser, PixiJS e muitas engines), Aseprite JSON, um SpriteFrames .tres do Godot 4, classes CSS de sprite com keyframes e um arquivo de texto com as configurações de importação e fatiamento para Unity.
O que o empacotamento justo faz?
Ele corta a borda transparente de cada frame e empacota os frames cortados em linhas ordenadas por altura, testando várias larguras e ficando com o menor sprite sheet. O JSON registra o tamanho e o deslocamento originais de cada frame para que ele seja desenhado no lugar certo.
O que é extrusão de bordas?
A extrusão copia a fileira externa de pixels de cada frame para fora, de 1 a 4 px. Quando a GPU lê um pouco além de um frame (filtragem, mipmaps, zoom não inteiro), ela pega a própria borda do frame em vez de um vizinho.
Meus frames têm tamanhos diferentes. O que acontece?
Nos layouts Grade, Linha e Coluna, cada célula tem o tamanho do maior frame, e os frames menores são alinhados pelo centro da base, pelo centro ou pelo canto superior esquerdo. O Empacotamento justo mantém cada frame no seu próprio tamanho.
Existe limite de frames?
Não há limite fixo. Tudo roda no seu navegador, então o limite prático é a memória do seu dispositivo. Centenas de frames de 64 px não são problema.
Minhas imagens são enviadas?
Não. Os frames são lidos e empacotados localmente. Nada é enviado a um servidor.