Generador de sprite sheets
Combina fotogramas de animación o imágenes sueltas en una sola sprite sheet. Elige una cuadrícula, una tira o un empaquetado compacto, ajusta el relleno y el recorte, previsualiza la animación y exporta el PNG con coordenadas en JSON o CSS para tu juego o sitio web.
Última actualización:
Fotogramas
Cuadrícula usa celdas iguales (el fotograma más grande). Compacto coloca los fotogramas muy juntos para ahorrar espacio.
Cómo usar Generador de sprite sheets
- Añade tus fotogramas: suelta varias imágenes o un GIF animado en el recuadro, o elígelos desde tu dispositivo. Los archivos se ordenan por nombre; los GIF se dividen en fotogramas automáticamente.
- Revisa el orden en la tira de fotogramas. Arrastra los fotogramas o usa los botones de flecha para reordenarlos, y elimina los que no necesites.
- Elige un diseño: Cuadrícula para celdas iguales, Compacto para la hoja más pequeña, o una tira para animaciones CSS sencillas. Ajusta el relleno, el margen, la escala y el recorte.
- Previsualiza la animación y ajusta la velocidad. Se dibuja desde la hoja con las coordenadas exportadas, así que lo que ves es lo que obtiene tu código.
- Descarga el PNG y el archivo JSON o CSS, o todo a la vez en un ZIP.
Qué significan las coordenadas exportadas
Cada fotograma del archivo JSON tiene los mismos campos que usan TexturePacker, Phaser y PixiJS:
| Campo | Significado |
|---|---|
frame | x, y, ancho y alto de los píxeles del fotograma dentro de la hoja |
trimmed | true cuando se eliminaron bordes transparentes |
spriteSourceSize | dónde quedan los píxeles recortados dentro del fotograma original (desplazamiento x, y) |
sourceSize | el ancho y alto originales del fotograma (sin recortar) |
duration | duración del fotograma en milisegundos a la velocidad de la vista previa (1000 ÷ fps) |
meta.size | ancho y alto de la imagen completa de la hoja |
Ejemplo para Phaser 3: this.load.atlas('hop', 'hop.png', 'hop.json') y luego crea una animación a partir de los nombres de los fotogramas. En PixiJS, carga el JSON con Assets.load('hop.json') y usa sheet.animations.hop con un AnimatedSprite.
Cálculos de la cuadrícula
En una hoja en cuadrícula con ancho de celda w, alto de celda h, relleno p y margen m, el fotograma número i (empezando en 0) de una hoja con c columnas se sitúa en:
x = m + (i mod c) × (w + p) e y = m + floor(i ÷ c) × (h + p).
La hoja mide 2m + c × w + (c − 1) × p de ancho y 2m + filas × h + (filas − 1) × p de alto. Por ejemplo, 8 fotogramas de 64 × 64 en 4 columnas con 2 px de relleno forman una hoja de 262 × 130 px.
Consejos para hojas listas para juegos
- Mantén los fotogramas del mismo tamaño para motores sencillos y animaciones CSS; usa Compacto + Recortar cuando tengas muchos sprites distintos.
- Usa el escalado para pixel art al ampliar sprites pequeños, para que los bordes sigan nítidos.
- Los tamaños en potencias de dos (256, 512, 1024…) siguen siendo necesarios en algunos motores antiguos y GPU móviles para el mipmapping.
- No superes 4096 × 4096 px para una amplia compatibilidad; esta herramienta permite hasta 16384 px por lado.
¿Primero necesitas los fotogramas? Divide una animación con el Extractor de fotogramas de GIF o dibuja tus propios sprites con el Creador de pixel art.
Preguntas frecuentes
¿Qué es una sprite sheet?
Una sprite sheet (hoja de sprites) es una sola imagen que contiene muchas imágenes más pequeñas, normalmente los fotogramas de una animación o un conjunto de iconos. Los juegos y sitios web cargan un archivo en lugar de decenas y muestran cada fotograma dibujando solo su rectángulo, lo que es más rápido y evita parpadeos.
¿Qué formato JSON debo usar?
JSON (hash) es el formato estilo TexturePacker que Phaser (load.atlas) y PixiJS (Spritesheet) leen directamente; los fotogramas se identifican por nombre y se incluye una lista de animaciones. JSON (array) contiene los mismos datos como una lista en el orden de la hoja, algo que prefieren algunos motores y cargadores personalizados.
¿Cuál es la diferencia entre Cuadrícula y Compacto?
Cuadrícula coloca cada fotograma en una celda igual del tamaño del fotograma más grande, así que las posiciones son fáciles de calcular (columna × ancho de celda). Compacto usa un algoritmo MaxRects para colocar fotogramas de distintos tamaños lo más juntos posible, lo que da una imagen más pequeña pero requiere los datos JSON para localizar cada fotograma.
¿Por qué añadir relleno entre fotogramas?
Cuando un juego escala o filtra la hoja, los píxeles de fotogramas vecinos pueden mezclarse y verse como líneas finas. Uno o dos píxeles de relleno lo evitan. Para sprites CSS perfectos al píxel puedes poner el relleno a 0.
¿Qué hace Recortar bordes transparentes?
Elimina los bordes totalmente transparentes alrededor de cada fotograma antes de empaquetar, lo que puede reducir mucho la hoja. El tamaño original del fotograma y el desplazamiento del área recortada se guardan como sourceSize y spriteSourceSize en el JSON, para que los motores puedan seguir posicionando el fotograma correctamente.
¿Cómo animo la sprite sheet con CSS?
Elige el formato CSS, deja el recorte desactivado para que todos los fotogramas tengan el mismo tamaño y asigna a un elemento la clase de la hoja y la clase que termina en -anim (por ejemplo class="hop hop-anim"). Los keyframes generados saltan a la posición de fondo de cada fotograma en orden usando la temporización step-end a la velocidad definida en la vista previa.
¿Se suben mis imágenes?
No. Las imágenes se decodifican, empaquetan y exportan por completo en tu navegador. Solo la descarga opcional en ZIP carga una pequeña biblioteca de código abierto (JSZip) desde una CDN pública.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.