Generador de sprite sheets — PNG + JSON + CSS

Qué es un sprite sheet y por qué ayuda

Un sprite sheet agrupa muchas imágenes pequeñas — fotogramas de animación, tiles de juego, iconos de UI, emojis o banderas — en una sola imagen más grande. Cargar un archivo en lugar de decenas reduce las peticiones HTTP y los cambios de textura, lo que hace que las páginas web y los juegos carguen y se rendericen más rápido. Cada sprite individual se muestra luego haciendo referencia a su rectángulo dentro de la hoja. Este generador de sprite sheets crea la imagen y las coordenadas por ti: suelta tus archivos, elige un diseño y descarga un PNG junto con un archivo de datos JSON y una hoja de estilos CSS lista para usar.

Todo el trabajo se realiza en tu navegador. Las imágenes se dibujan localmente en un canvas y los archivos de coordenadas se generan en JavaScript, así que tus gráficos nunca se suben y no hay límite de veces que puedas regenerar la hoja mientras experimentas con los ajustes.

Cuadrícula o diseño compacto

La cuadrícula uniforme asigna a cada sprite una celda tan grande como la imagen más grande y centra cada sprite dentro de su celda. Esa estructura predecible es lo que esperan la mayoría de los sistemas de animación: el fotograma n siempre está en la columna n módulo el número de columnas. Las filas compactas ordenan los sprites por altura y llenan filas hasta un ancho objetivo, lo que desperdicia mucho menos espacio cuando tus imágenes tienen tamaños distintos. En ambos modos, el valor de espaciado añade espacio transparente alrededor de cada sprite para evitar que los colores se mezclen al escalar la hoja.

Cómo usar la salida JSON y CSS

El archivo JSON enumera cada sprite con un nombre limpio derivado de su nombre de archivo, con su posición x e y, ancho y alto, además del tamaño total de la hoja. Frameworks de juegos como Phaser y PixiJS pueden cargar directamente este formato hash, y es fácil de analizar en cualquier lenguaje. El archivo CSS define una clase base que establece la hoja como imagen de fondo y una clase por sprite con su tamaño y posición de fondo, de modo que un icono es simplemente un span con dos clases. Cambia el prefijo de clase para que coincida con la nomenclatura de tu proyecto y mantén el PNG junto al archivo CSS o ajusta la URL.