Una sprite sheet es solo la mitad del trabajo. El motor también necesita saber dónde está cada fotograma y cuánto dura. Este creador empaqueta tus fotogramas en una cuadrícula, una tira o un atlas compacto, y escribe esos datos en los formatos que los motores realmente importan: JSON de TexturePacker/Phaser, JSON de Aseprite, un recurso SpriteFrames de Godot 4, CSS y ajustes de corte para Unity. Los fotogramas se ordenan como tú los numerarías, así walk_10 va después de walk_9.
Cómo usar la herramienta Creador de sprite sheets
- Suelta todos los PNG de tus fotogramas a la vez. Se ordenan por nombre en orden natural. Puedes agregar más en cualquier momento.
- Reordena con las flechas, quita fotogramas sobrantes o invierte el orden.
- Elige una distribución: Cuadrícula (columnas automáticas o fijas), una sola Fila, una sola Columna o Empaquetado compacto con los bordes transparentes recortados.
- Define el padding entre fotogramas, un margen exterior y la extrusión de bordes. Activa potencia de dos si tu plataforma necesita texturas de 64, 128 o 256 px.
- Revisa la animación en la vista previa y define sus FPS.
- Descarga el PNG y un archivo de datos, o un ZIP con el PNG y todos los formatos.
Qué obtienes
- Hoja PNG con transparencia, exactamente como en la vista previa.
- JSON de Phaser / TexturePacker (hash y array), con los desplazamientos de recorte para que los fotogramas empaquetados compactos sigan alineados.
- JSON de Aseprite con una etiqueta de fotogramas y duraciones.
- SpriteFrames .tres de Godot 4 con AtlasTextures, listo para AnimatedSprite2D.
- Sprites CSS con una clase por fotograma y una animación por pasos, más los ajustes de importación y corte para Unity.
Con qué motores funciona
- Phaser 3:
this.load.atlas(key, 'sheet.png', 'sheet.json')y luego crea la animación a partir de los nombres de los fotogramas. - Godot 4: pon el .tres junto al PNG y asígnalo a los Sprite Frames de un AnimatedSprite2D.
- Unity: las distribuciones en cuadrícula se cortan con Grid By Cell Size usando los valores del archivo de ajustes. Usa filtrado Point y sin compresión.
- PixiJS, Defold, Cocos, Construct: leen el JSON de TexturePacker (hash) directamente o a través de sus importadores.
Consejos de quienes la usan para hacer juegos
- Usa Cuadrícula con fotogramas uniformes para animar personajes. Los cortadores por cuadrícula y las herramientas de papel cebolla de los motores esperan eso.
- Usa Empaquetado compacto con recorte para atlas de objetos y de UI con muchas imágenes de distintos tamaños.
- Agrega 1–2 px de extrusión cuando la hoja se escala por un factor no entero o usa mipmaps. Evita que los fotogramas vecinos se filtren por los bordes.
- Usa nombres de fotograma con sentido (hero_walk_00…). Se convierten en las claves de los fotogramas en el JSON.
Casos de uso
- Empaquetar en una sola textura fotogramas exportados desde Aseprite, Blender o Spine.
- Armar un atlas de UI u objetos para un juego web.
- Convertir fotogramas generados con IA en una hoja que tu motor pueda animar.
- Crear una animación de sprites CSS para una landing page.
Preguntas frecuentes
¿Qué formatos de datos exporta?
JSON de TexturePacker en formato hash y array (lo leen Phaser, PixiJS y muchos motores), JSON de Aseprite, un SpriteFrames .tres de Godot 4, clases de sprites CSS con keyframes y un archivo de texto con los ajustes de importación y corte para Unity.
¿Qué hace el empaquetado compacto?
Recorta el borde transparente de cada fotograma y acomoda los fotogramas recortados en filas ordenadas por altura, probando varios anchos y quedándose con la hoja más pequeña. El JSON guarda el tamaño y el desplazamiento originales de cada fotograma para que se dibuje en el lugar correcto.
¿Qué es la extrusión de bordes?
La extrusión copia la fila exterior de píxeles de cada fotograma hacia afuera, de 1 a 4 px. Cuando una GPU toma muestras un poco fuera de un fotograma (filtrado, mipmaps, zoom no entero), lee el borde del propio fotograma en lugar del de un vecino.
Mis fotogramas tienen tamaños distintos. ¿Qué pasa?
En las distribuciones Cuadrícula, Fila y Columna cada celda mide lo mismo que el fotograma más grande, y los más pequeños se alinean abajo al centro, al centro o arriba a la izquierda. El empaquetado compacto mantiene cada fotograma en su propio tamaño.
¿Hay un límite de fotogramas?
No hay un límite fijo. Todo corre en tu navegador, así que el límite práctico es la memoria de tu dispositivo. Cientos de fotogramas de 64 px no son problema.
¿Se suben mis imágenes?
No. Los fotogramas se leen y empaquetan localmente. No se envía nada a ningún servidor.