Generador de Sprites
Combina imágenes en sprites con arrastrar para reordenar, diseño de cuadrícula, relleno, modos de escala. Exporta PNG/WebP/JPG con datos JSON atlas para motores de juegos y CSS.
¿Qué es un sprite sheet y por qué usar uno?
Un sprite sheet es una imagen única que contiene múltiples imágenes más pequeñas (sprites) organizadas en cuadrícula. Usar sprite sheets reduce las peticiones HTTP, mejora el rendimiento de carga y hace el renderizado de juegos más eficiente.
¿Qué formatos de imagen son compatibles?
Puedes subir imágenes PNG, JPG, GIF, SVG y WebP. La herramienta soporta carga por lotes y pegar desde el portapapeles (Ctrl+V) para un flujo de trabajo rápido.
¿Qué formatos de exportación están disponibles?
Exporta sprite sheets como PNG (con transparencia), WebP (formato moderno con archivos más pequeños) o JPG (mejor para fotos sin transparencia). Elige según los requisitos de tu plataforma.
¿Cómo reordeno las imágenes en el sprite sheet?
Arrastra y suelta las miniaturas de las imágenes para reorganizar su posición en el sprite sheet. También puedes pegar imágenes directamente desde el portapapeles usando Ctrl+V.
¿Qué son los datos JSON atlas y qué motores los soportan?
Los datos JSON atlas contienen posición, tamaño e información de cada sprite. Son compatibles con motores de juegos populares como Phaser, PixiJS, Unity, Cocos2d y muchos otros para extracción automática de sprites.
¿Cuáles son los diferentes modos de escala?
El modo Ajustar escala las imágenes manteniendo la proporción. Rellenar escala para cubrir toda la celda y recorta el exceso. Estirar deforma las imágenes para llenar la celda sin mantener la proporción.
¿La herramienta soporta transparencia?
Sí, las exportaciones PNG y WebP conservan la transparencia de las imágenes originales. También puedes establecer un color de fondo personalizado para el sprite sheet, útil para exportaciones JPG que no soportan transparencia.
¿Cómo afecta el relleno al sprite sheet?
El relleno añade espacio entre sprites individuales en la hoja, previniendo sangrados visuales cuando se muestrean las texturas. Esto es especialmente importante para motores de juegos que usan filtrado lineal.
¿Puedo usar sprite sheets para CSS?
Sí, los sprite sheets funcionan genial para sprites CSS. Los datos JSON atlas pueden usarse para generar reglas CSS background-position, reduciendo peticiones HTTP y mejorando el rendimiento de carga.
¿Cuáles son las mejores prácticas para dimensiones de sprite sheets?
Mantén las dimensiones como potencias de 2 (256x256, 512x512, 1024x1024) para un manejo óptimo de texturas GPU. La mayoría de motores de juegos prefieren estas dimensiones para mejor rendimiento.
¿Cómo mejoran el rendimiento del juego los sprite sheets?
Los sprite sheets reducen las llamadas de dibujo al agrupar múltiples sprites en una sola textura. Esto minimiza los cambios de estado GPU, reduce la sobrecarga de memoria y permite un renderizado más eficiente.
¿Cuál es la diferencia entre sprite sheets y atlas de texturas?
Los sprite sheets típicamente organizan frames en una cuadrícula uniforme, mientras que los atlas de texturas pueden empacar sprites de formas irregulares más eficientemente usando algoritmos como bin packing.