Generador de hojas de sprites
Combina varias imágenes en una hoja de sprites con coordenadas CSS, SCSS o JSON
👇 Desplázate para ver una guía rápida paso a paso
Suelta tus sprites aquí
o haz clic en cualquier lugar para explorar archivos
Generado CSS
Carga imágenes para generar código
Las clases CSS y las coordenadas JSON aparecerán aquí
Antes de empezar con Generador de hojas de sprites
Empaqueta imágenes en una hoja de sprites con controles de márgenes y coordenadas CSS, SCSS o JSON en el navegador.
Ideal para
- Combinación de fotogramas individuales de juego o iconos de interfaz en un atlas PNG
- Generar coordenadas CSS, SCSS o JSON junto con la hoja
- Crear una hoja sencilla empaquetada por filas directamente en el navegador
Lo que debes saber antes de empezar
- El empaquetador coloca imágenes en filas; no es un optimizador general de empaquetado
- Los márgenes y la escala afectan a las dimensiones finales de la hoja
- Los lotes grandes utilizan memoria del navegador mientras se decodifica cada imagen
Continúa el flujo de trabajo
Cómo usar Generador de hojas de sprites
1Añadir imágenes
- • Pulsa «Añadir imágenes» o arrastra sprites
- • Admite formatos PNG, JPG, JPEG y WebP
- • Usa Optimizar automáticamente para optimización automática
2Configurar lienzo
- • Lienzo: Establecer dimensiones (modo personalizado/máximo)
- • Redimensionar: Escala sprites con un control porcentual
- • Separación: Ajusta los márgenes entre sprites
3Generar código
- • Formato: Elige salida CSS, SCSS o JSON
- • Nombres: Definir patrón de nombres de sprites
- • Ordenar: Ordenar por tamaño o nombre
4Descargar recursos
- • Pulsa «Descargar PNG» para la hoja de sprites
- • Pulsa «Descargar código» para coordenadas CSS/JSON
- • Usa «Limpiar» para empezar con otros sprites
Funciones principales:
Preguntas sobre Generador de hojas de sprites
¿Qué hace un generador de hojas de sprites?
Empaqueta archivos de imagen separados en una imagen de atlas. Mantener juntos los sprites relacionados puede facilitar la distribución del recurso, mientras las coordenadas generadas indican a CSS o al código del juego dónde está cada sprite dentro de la hoja.
¿Qué formatos de código puedo exportar?
La herramienta puede generar coordenadas CSS, SCSS o JSON junto al PNG de la hoja. El JSON contiene posiciones y dimensiones de fotogramas para adaptarlo al formato de recursos que espera tu motor o aplicación.
¿Se suben mis imágenes a un servidor?
No. Las imágenes se decodifican y empaquetan en tu navegador. Ni los archivos originales ni la hoja generada se envían a un servidor de subida de ImageMint.
¿Por qué importan los márgenes en un atlas de sprites?
El relleno deja espacio entre sprites contiguos. Sin suficiente separación, el filtrado de texturas o el renderizado escalado puede muestrear un sprite cercano y producir contaminación de color en el borde.
Flujos de sprites relacionados
Para dividir un atlas existente en fotogramas separados, utiliza el Divisor de hojas de sprites . El guía de empaquetado de atlas de sprites explica los márgenes y la filtración de bordes. Para motores concretos, consulta la Guía de importación en Unity y Guía de importación en Godot.