Generador de Coordenadas de Hoja de Sprites | JSON y background-position CSS en una pantalla

Calcula las coordenadas (x, y, w, h) de cada frame de una hoja de sprites de cuadrícula uniforme y produce simultáneamente un array JSON y reglas CSS sprite .frame-N { background-position }. Padding (borde exterior) y margin (separación entre frames) son independientes, lo que permite reproducir las coordenadas de exportaciones de TexturePacker o Aseprite con extrude o spacing.

💡 Sobre esta herramienta

Una hoja de sprites agrupa varios fotogramas en un único PNG para que el motor o la web descargue una sola imagen. Phaser, PixiJS o Godot AnimatedSprite2D consumen la información de frames como JSON con (x, y, w, h); los sprites CSS usan background-position con valores negativos para mostrar la región adecuada dentro del cuadro del elemento.

Esta herramienta calcula esos números una sola vez a partir del tamaño de la imagen, la cuadrícula y los márgenes, y muestra ambos formatos a la carta. El canvas de previsualización superpone un rectángulo cian sobre cada frame para verificar el recorte antes de pasar los valores al código.

🧐 Preguntas Frecuentes

Q: ¿Qué diferencia hay entre padding y margin en este contexto? A: Padding es el borde vacío alrededor del exterior de la hoja (el mismo valor en los cuatro lados). Margin es el hueco entre frames adyacentes. Equivalen a "border padding" y "shape padding" de TexturePacker, y a "border" y "spacing" en Aseprite.

Q: ¿Por qué la salida está vacía? A: El ancho o alto calculado como (tamaño - padding*2 - margin*(n-1)) / n resultó cero o negativo, es decir, padding y margins consumen toda la imagen. Reduce padding/margin o el número de columnas/filas.

Q: ¿Qué significa el campo frame del JSON? A: Es un índice en orden row-major (izquierda a derecha, arriba a abajo). frame: 0 es la celda superior izquierda; con 4 columnas, frame: 4 es la primera celda de la segunda fila. Coincide con la indexación que utiliza Phaser al cargar una spritesheet.

Q: ¿Por qué los background-position del CSS son negativos? A: Los sprites CSS funcionan desplazando la imagen origen hacia arriba y a la izquierda para que la región deseada quede dentro del cuadro del elemento. Un frame cuya esquina sea (64, 0) requiere empujar la imagen 64 píxeles a la izquierda: background-position: -64px 0px. Cuando x o y vale exactamente 0, la salida conserva 0px y no -0px.

Q: ¿Por qué mi frameW tiene dos decimales? A: El ancho menos padding y margins no es múltiplo exacto del número de columnas. La herramienta conserva dos decimales para que el error de redondeo sea visible; para pixel-perfect ajusta las dimensiones de la imagen o las celdas para que la división dé un entero.

📚 Cuadrícula uniforme y atlas empacado

Las hojas de sprites suelen presentarse en dos variantes. La cuadrícula uniforme (la que maneja esta herramienta) coloca cada frame en una retícula rectangular de tamaño fijo: el formato clásico para animaciones de personajes, tilesets y sets de iconos donde todos los frames comparten la misma caja delimitadora. Los atlas empacados utilizan algoritmos de packing (TexturePacker, ShoeBox) que comprimen frames de distintos tamaños sin huecos, pero el JSON exportado por la herramienta es imprescindible para localizar cada frame.

Cuando los frames son realmente uniformes (ciclos de animación, tilesets, iconos a escala fija), un generador como este sustituye a un packer pesado. La contrapartida: todas las celdas reservan el mismo cuadro, así que un icono pequeño en una hoja con frames grandes desperdicia memoria de textura. Para tamaños desiguales (iconos de UI, calcomanías, elementos del HUD) conviene el atlas empacado.