¿Qué es Generador de sprite sheets?

El Generador de Sprite Sheets combina varias imágenes individuales en una sola hoja de sprites optimizada. Sube tus fotogramas o iconos —o suelta un GIF animado y cada fotograma se extrae automáticamente—, elige un diseño (cuadrícula, tira horizontal, tira vertical o compacto), selecciona un fondo transparente o sólido y exporta la imagen combinada con datos de posición en JSON, JSON Array, XML TextureAtlas o CSS.

El modo cuadrícula coloca todo en un diseño uniforme de N por M, ideal para ciclos de animación donde cada fotograma tiene el mismo tamaño. Las tiras horizontal y vertical alinean los fotogramas en una sola fila o columna, el diseño estándar para animaciones sencillas de motores 2D. El modo compacto ejecuta un empaquetado para que iconos de tamaños distintos encajen con el mínimo desperdicio. Suelta un GIF animado y cada fotograma se decodifica dentro de la hoja, así no hace falta exportar los fotogramas antes. La salida mantiene un fondo transparente por defecto, o puedes elegir un color sólido como relleno de croma. Los metadatos vienen en cuatro formatos —JSON hash, JSON Array, XML TextureAtlas y CSS— para colocarlos directamente en Phaser, PixiJS, Unity, Godot o un background-position de CSS. Una vista previa de animación te deja revisar los fotogramas de 1 a 60 FPS para ajustar el tiempo antes de descargar. Avanza fotograma a fotograma para detectar cualquier sprite mal alineado, recorta el borde transparente de cada uno para que la hoja quede compacta y descarga la secuencia como un GIF animado para compartir el resultado sin un motor de juego.

Cómo usar

1. Sube las imágenes individuales que quieras combinar en un sprite sheet.
2. Elige un diseño (cuadrícula, horizontal, vertical o empaquetado), ajusta el espaciado y define el fondo como transparente o de color sólido.
3. Descarga la imagen del sprite sheet junto con los datos de posición en CSS o JSON.

Cuándo usar

• Empaquetar un ciclo de caminata o una animación de explosión en una sola imagen para un motor de juego.
• Unir un set de iconos de UI en un único archivo para que la página haga una petición HTTP en vez de cuarenta.
• Preparar sprites de tilemap con padding consistente para que los azulejos vecinos no se contaminen.

Resultado

Un desarrollador de videojuegos sube 16 fotogramas de animación de un personaje (64×64 cada uno). La herramienta los organiza en una cuadrícula de 4×4, generando un sprite sheet de 256×256 con coordenadas JSON para el motor del juego.

Preguntas frecuentes

¿Cuándo conviene empaquetado en lugar de cuadrícula?

Usa cuadrícula cuando todos los fotogramas son del mismo tamaño, como una animación de personaje de 32×32. Usa la tira horizontal o vertical para una secuencia de una sola fila o columna, el formato más sencillo de cargar en la mayoría de motores. Usa empaquetado cuando los iconos varían, por ejemplo un set de UI con piezas de 16×16 y otras de 48×48; produce la hoja más pequeña pero los metadatos son más difíciles de leer a mano.

¿Para qué sirve el ajuste de padding?

El padding añade píxeles transparentes alrededor de cada fotograma. Sin él, un renderizador con filtrado lineal puede colar colores de los fotogramas vecinos en los bordes del que dibuja. Con 1 o 2 píxeles de padding ya se evita ese artefacto.

¿Qué formato de metadatos debo exportar?

JSON (hash) es el formato TexturePacker que cargan la mayoría de los motores, con cada fotograma indexado por nombre. JSON Array guarda los fotogramas como una lista ordenada, que Phaser 3 y algunos flujos prefieren. XML es el TextureAtlas de Starling/Sparrow que usan Unity, Godot y Friday Night Funkin. CSS te da clases con background-position para conjuntos de iconos web. Elige el que espere tu motor de renderizado.

¿La salida conserva la transparencia?

Sí por defecto. La hoja se exporta como PNG con el canal alfa intacto, así que los fondos transparentes de tus PNGs originales se mantienen. Si necesitas una hoja opaca, elige un color de fondo sólido junto a los controles de diseño; resulta útil para chroma keying o motores que ignoran el alfa. Evita usar JPG como origen si la transparencia importa, ya que el formato aplana el alfa a blanco antes de la subida.

¿Cuántos fotogramas caben en una sola hoja?

En la práctica, las GPU móviles limitan una textura a unos 2048 o 4096 píxeles por lado, así que una hoja de 4096x4096 con cuadros de 64x64 alberga 4096 fotogramas. Para animación, dividir en dos hojas de 2048x2048 es más seguro en dispositivos antiguos.

Herramientas relacionadas