Empaquetador de hojas de sprites
Empaqueta varias imágenes de iconos o sprites en una sola hoja, generando mapas de coordenadas (JSON/CSS) en el lado del cliente. Rápido, seguro sin conexión y gratis. Simplifica los recursos de tus juegos y optimiza las conexiones de hojas de estilo de tu web al instante.
¿Por qué usar nuestro Empaquetador de hojas de sprites?
- 100 % privado y local: tus recursos de imagen se procesan totalmente dentro del espacio de memoria de tu navegador local. Ningún gráfico ni metadato viaja a servidores externos, garantizando absoluta privacidad de diseño y cumplimiento para proyectos personales y comerciales.
- Diseños de empaquetado óptimos: coloca los iconos utilizando un avanzado algoritmo de empaquetado de árbol binario 2D creciente que minimiza el área de la hoja. También puedes alternar entre opciones estándar de apilamiento lineal vertical y horizontal.
- Generadores de CSS y JSON: compila al instante clases CSS responsivas con posiciones de fondo negativas o exporta mapas JSON estándar compatibles con motores web y juegos (como PixiJS, Phaser y Cocos2d).
- Inspector interactivo de superposiciones: audita y previsualiza dinámicamente las coordenadas empaquetadas. Al pasar el cursor sobre cualquier sprite dentro del mapa de coordenadas generado se resalta su cuadro delimitador exacto sobre la hoja del canvas.
La ventaja de las hojas de sprites: reducir la sobrecarga de red
Los navegadores limitan el número de conexiones HTTP simultáneas a un solo host (a menudo con un tope de 6 conexiones). Cuando un sitio web depende de docenas de pequeñas imágenes de iconos, cargarlas individualmente provoca latencia de red, retrasos en la cola y desplazamientos acumulativos del diseño. Las hojas de sprites resuelven esto mediante la consolidación. Cargar una sola imagen más grande combina todas las cargas HTTP en un único flujo de conexión TCP. Además, elimina los molestos parpadeos blancos que se producen cuando un navegador intenta cargar una imagen separada de estado hover tras la interacción del usuario.
Cómo los algoritmos de empaquetado 2D optimizan el área de la hoja
Empaquetar varios rectángulos arbitrarios en una sola área delimitadora con el mínimo desperdicio es un problema NP-completo. Esta herramienta utiliza un algoritmo de empaquetado de árbol binario 2D creciente. El empaquetador comienza con el tamaño del primer elemento y crece dinámicamente hacia la derecha o hacia abajo para acomodar nuevos bloques, eligiendo la ruta que mantiene la relación de aspecto general de la hoja cerca de un cuadrado. Ordenar previamente los elementos por área descendente garantiza que los bloques más grandes se coloquen primero, permitiendo que los más pequeños se ajusten firmemente en los huecos restantes.
Background-position de CSS vs mapas de texturas JSON
Una vez empaquetados, los sprites requieren mapas de coordenadas para indicar a las aplicaciones dónde reside cada icono. Los diseños web se basan en clases de sprites CSS. Asignando una clase compartida con la URL de la imagen de fondo y aplicando desplazamientos de fondo negativos individuales (p. ej., `background-position: -32px -64px`), los navegadores renderizan el bloque de subimagen específico. Para sistemas de aplicaciones basados en canvas y juegos 2D, los hashes JSON estándar mapean cada archivo nombrado a sus coordenadas delimitadoras exactas, permitiendo a los motores recortar y dividir texturas dinámicamente en viewports WebGL.
Preguntas frecuentes
Un empaquetador de hojas de sprites es una herramienta de diseño sin conexión que combina varias imágenes o iconos separados en un único archivo de imagen. Traza las coordenadas exactas en píxeles de cada gráfico original y genera archivos de hoja de estilo o de datos para que las aplicaciones puedan mostrar cada elemento correctamente.
Cuando cargas archivos, tu navegador los lee en memoria como objetos de imagen. El algoritmo de empaquetado calcula la disposición de coordenadas más compacta en una cuadrícula virtual y pinta los sprites en un canvas fuera de pantalla. Los resultados se exportan como imágenes y código directamente en tu navegador.
Sí, nuestro empaquetador de sprites funciona totalmente en el lado del cliente dentro de tu navegador local. Ninguno de tus archivos de imagen, dimensiones, nombres o diseños se envía a nuestros servidores. Todas las operaciones de dibujo y empaquetado de píxeles se ejecutan localmente en tu ordenador, garantizando absoluta privacidad para los activos de propiedad intelectual.
La utilidad admite tres diseños de empaquetado. El modo de Árbol Binario ejecuta un algoritmo de partición creciente para empaquetar elementos en una huella similar a un cuadrado. El diseño Vertical apila elementos en una sola columna, y el Horizontal los dispone uno al lado del otro en una fila ancha.
La herramienta genera dos hojas de mapeo comunes. La pestaña CSS proporciona reglas de clase con dimensiones objetivo y coordenadas de background-position negativas. La pestaña JSON muestra configuraciones hash estándar de TexturePacker, definiendo coordenadas, recortes y tamaños de hoja perfectos para frameworks modernos de juegos web.
Sí, puedes configurar un espaciado o relleno personalizado entre tus sprites. La herramienta admite valores de 0px a 32px. Se recomienda mucho añadir espaciado para evitar artefactos de sangrado, en los que píxeles de sprites adyacentes se renderizan por error a lo largo de los bordes de tu diseño.
Puedes configurar límites máximos de hasta 4096px de ancho y alto. Como todo el procesamiento se ejecuta en la memoria del navegador, el rendimiento depende de la RAM de tu dispositivo. La utilidad de empaquetado lanzará un error si las configuraciones de diseño superan los límites de tamaño de tu canvas objetivo.