Gerador de Coordenadas para Folha de Sprites | JSON e background-position CSS na mesma tela
Calcule as coordenadas (x, y, w, h) de cada frame de uma folha de sprites em grade uniforme e gere ao mesmo tempo um array JSON e regras CSS sprite .frame-N { background-position }. Padding (borda externa) e margin (espaço entre frames) são independentes, o que permite reproduzir as coordenadas de exports do TexturePacker ou Aseprite com extrude ou spacing.
💡 Sobre esta ferramenta
Uma folha de sprites agrupa vários quadros em um único PNG para que a engine de jogo ou a página web carregue apenas um arquivo. Phaser, PixiJS e Godot AnimatedSprite2D esperam os dados de frame em JSON com (x, y, w, h); sprites CSS usam background-position com valores negativos para recortar a região visível dentro da caixa do elemento.
A ferramenta calcula esses números uma única vez a partir do tamanho da imagem, das dimensões da grade e das margens, e mostra os dois formatos sob demanda. O canvas de pré-visualização sobrepõe um retângulo ciano em cada frame para você confirmar o fatiamento antes de levar os valores ao código.
🧐 Perguntas frequentes
Q: Qual a diferença entre padding e margin aqui? A: Padding é a borda vazia ao redor da folha (o mesmo valor nos quatro lados). Margin é o espaço entre frames adjacentes. Equivalem ao "border padding" e ao "shape padding" do TexturePacker, e ao "border" e "spacing" no Aseprite.
Q: Por que minha saída ficou vazia?
A: A largura ou altura calculada como (tamanho - padding*2 - margin*(n-1)) / n deu zero ou valor negativo, ou seja, padding e margins consumiram toda a imagem. Reduza padding/margin ou o número de colunas/linhas.
Q: O que representa o campo frame do JSON?
A: Um índice em ordem row-major (esquerda para direita, cima para baixo). frame: 0 é a célula superior esquerda; com 4 colunas, frame: 4 é a primeira célula da segunda linha. É a mesma indexação que o loader de spritesheet do Phaser utiliza.
Q: Por que os background-position do CSS são negativos?
A: Sprites CSS funcionam empurrando a imagem fonte para cima e para a esquerda, para que a região desejada entre na caixa do elemento. Um frame com canto em (64, 0) exige deslocar a imagem 64 pixels à esquerda: background-position: -64px 0px. Quando x ou y vale exatamente 0, a saída mantém 0px em vez de -0px.
Q: Por que meu frameW veio com duas casas decimais?
A: A largura menos padding e margins não é divisível por inteiro pelo número de colunas. A ferramenta mantém duas casas para tornar o erro de arredondamento visível; para renderização pixel-perfect, ajuste as dimensões da imagem ou da grade para a divisão fechar em inteiro.
📚 Grade uniforme e atlas empacotado
Folhas de sprites costumam vir em duas variantes. A grade uniforme (que esta ferramenta trabalha) coloca cada frame em uma trama retangular de tamanho fixo: o formato clássico para animações de personagem, tilesets e conjuntos de ícones em que todos os frames compartilham a mesma caixa delimitadora. Atlas empacotados usam algoritmos de bin packing (TexturePacker, ShoeBox) para compactar frames de tamanhos variados sem espaço desperdiçado, mas você depende do JSON exportado pela ferramenta para localizar cada frame.
Quando os frames realmente têm tamanho uniforme (ciclos de animação, tilesets, ícones em escala fixa), um gerador como este substitui um packer mais pesado. A contrapartida: todas as células reservam a mesma caixa delimitadora, então um ícone pequeno em uma folha de frames grandes desperdiça memória de textura. Para tamanhos desiguais (ícones de UI, decalques, elementos de HUD), o atlas empacotado continua sendo a melhor escolha.