Hojas de sprites · Probado
De GIF a hoja de sprites: deja que la IA revise cada fotograma antes de importar
Un GIF es una forma cómoda de compartir una animación y una mala forma de entregarla. Los motores de juego como Godot, Unity y Phaser quieren una hoja de sprites: todos los fotogramas en una cuadrícula de celdas iguales, al tamaño de píxel real del arte, más el tiempo que cada fotograma se queda en pantalla. Además, un GIF oculta problemas hasta que la animación se repite en tu juego: un fotograma duplicado, un fotograma desplazado un píxel, una pausa en el lugar equivocado.
El 30 de septiembre de 2026 dimos al Ciyo Agent un GIF de 7 fotogramas de un slime saltando y le pedimos una hoja lista para importar. Leyó cada fotograma, encontró tres problemas en el bucle y después los corrigió cuando se lo pedimos. Revisamos cada archivo nosotros mismos.
Lo que un motor de juego necesita de tu GIF
Tres cosas: los fotogramas a su tamaño nativo, colocados en celdas iguales; el tamaño y el número de fotogramas; y la duración de cada fotograma. El tamaño nativo es el tamaño al que dibujó el artista. Muchos GIF de pixel art se exportan a 4×, 6× u 8× para que se vean bien en redes sociales, e importarlos a ese tamaño desperdicia memoria y los desenfoca al escalarlos.
El agente de Ciyo puede leer cada fotograma de un GIF adjunto. Eso importa, porque una persona que repasa un GIF a toda velocidad no notará un fotograma desplazado un píxel.
| Pide | Por qué |
|---|---|
| Tamaño de píxel nativo | Un píxel de archivo por píxel de arte; nítido con cualquier zoom entero |
| Una fila de celdas iguales | El motor corta la hoja por el tamaño de celda |
| Fondo transparente | Sin color clave y sin halos |
| Duración de cada fotograma | Los fotogramas de un GIF suelen tener retardos distintos |
| Una revisión de cada fotograma | Los fotogramas duplicados y el temblor solo se ven cuando el bucle se reproduce |
Nuestro GIF de prueba: el salto de un slime de un juego de plataformas ficticio
Hicimos un pequeño GIF de prueba para Tumblebrook, un juego de plataformas ficticio: un slime verde que se aplasta, salta y aterriza. Mide 192 × 192 píxeles, tiene 7 fotogramas y 4 colores, y en realidad es arte de 32 × 32 exportado exactamente a 6×. Los retardos van de 80 a 200 milisegundos, como suele pasar.
Movimos a propósito un fotograma un píxel de arte a la derecha, para ver si el agente lo detectaba. El GIF también terminaba con una copia de su primer fotograma, algo que no habíamos planeado.
Este GIF es la animación de salto de Tumblebrook, un pequeño juego de plataformas que estoy haciendo en Godot. Conviértelo en una hoja de sprites que pueda importar: una fila, celdas iguales, fondo transparente, al tamaño de píxel nativo del arte (no a la exportación a 6x). Antes de montarla, mira cada fotograma y dime el número de fotogramas, el retardo de cada uno y cualquier cosa que se vaya a ver mal cuando se repita el bucle. Guarda en el tablero la hoja y un archivo JSON con el tamaño de fotograma y las duraciones.Lo que el agente encontró en 7 fotogramas
El agente comprobó que 192 se divide exactamente entre 6, confirmó el tamaño nativo de 32 × 32 y montó una hoja de 224 × 32: siete celdas en una fila, con fondo transparente y sin píxeles de borde mezclados. Enumeró los retardos: 120, 80, 80, 80, 200, 80 y 140 milisegundos.
Después informó de tres problemas, y los tres eran reales. El último fotograma era “pixel-for-pixel the same as frame 0” (idéntico píxel a píxel al fotograma 0), así que la pose de reposo se queda en pantalla 260 ms y “the hop will seem to stall at the landing” (el salto parecerá atascarse al aterrizar). El fotograma 5 era una copia del fotograma 3 “moved 1 px right and 2 px down” (movida 1 px a la derecha y 2 px hacia abajo), centrada en x = 17 en lugar de 16, así que el slime da un tirón hacia un lado. Y el fotograma 5 reutilizaba la pose de subida en la bajada, así que el borde inferior salta 4 píxeles al llegar al aterrizaje.
También dijo lo que no podía hacer: el tablero solo acepta imágenes y vídeo, así que no podía guardar ahí un archivo .json. Se ofreció a pegar el JSON en el chat.
Arregla el bucle y después exporta
Pedimos una hoja corregida. Antes de dibujar nada, el agente estudió los fotogramas existentes para aprender sus reglas de contorno, esquinas, sombreado y brillo. Incluso se corrigió a sí mismo (“Highlight sits one pixel further in than I assumed”, es decir, el brillo está un píxel más hacia dentro de lo que suponía) y demostró las reglas reconstruyendo tres fotogramas originales píxel a píxel.
La hoja corregida tiene seis fotogramas. El fotograma duplicado ha desaparecido, todos los fotogramas están centrados en x = 16, y una nueva pose de caída estirada, de 13 × 19 píxeles, baja 3 píxeles hasta el fotograma de aterrizaje en lugar de saltar 4. Un bucle completo dura ahora 640 ms, y el agente señaló que la pose de reposo es más corta ahora (120 ms en lugar de 260 ms), por si el salto parece apresurado. No se gastó ningún crédito.
Sí, por favor: haz la hoja corregida. Quita el fotograma duplicado, vuelve a centrar el fotograma 5 y dale al aterrizaje una pose de caída estirada de verdad en lugar de la de subida reutilizada. Mantén los mismos 4 colores y las celdas de 32x32. Después pega aquí el JSON listo para Godot (tamaño de fotograma, número de fotogramas, duración de cada fotograma) y guarda un GIF de vista previa a 6x del bucle corregido para que pueda verlo.El JSON y los ajustes de Godot
El agente pegó un bloque JSON con el nombre de la imagen, el tamaño de la hoja (192 × 32), el tamaño de fotograma (32 × 32), seis fotogramas en una fila, la región y la duración en milisegundos de cada fotograma, y una duración relativa para Godot. Como todos los retardos son múltiplos de 40 ms, sugirió una animación SpriteFrames a 25 fotogramas por segundo con duraciones relativas de 3, 2, 2, 2, 5 y 2, y filtrado nearest (vecino más próximo) para que los píxeles sigan nítidos.
Guarda el JSON junto al PNG en tu proyecto. Si tu motor usa otro formato, pide ese formato por su nombre; lo que importa es la lista de fotogramas.
Cinco comprobaciones antes de importar cualquier hoja
Tanto si la hoja viene de una IA, de un conversor o de tu propia exportación, estas comprobaciones detectan los problemas habituales. Nuestra última columna muestra la hoja corregida de Tumblebrook.
| Comprobación | Cómo | Hoja corregida |
|---|---|---|
| Tamaño nativo | Tamaño del GIF ÷ escala de exportación da un número entero | 192 ÷ 6 = 32 |
| Sin fotogramas duplicados | Compara el último fotograma con el primero | Fotograma duplicado eliminado |
| Sin temblor | Mismo centro (o línea de los pies) en cada celda | Centro x = 16 en los seis |
| Paleta | Cuenta los colores; el fondo es transparente | 4 colores más transparencia |
| Tiempos | Anota cada retardo; revisa la duración de la pose de reposo | Bucle de 640 ms, reposo de 120 ms |
Publicado el 2026-09-26. En chino, el autor enumera los problemas habituales de las hojas de sprites generadas con IA: el personaje cambia de un fotograma a otro, los fondos verdes o magenta dejan halos y los fotogramas no se alinean en una cuadrícula. Recomienda para ello una herramienta de código abierto, sprite-gen. Es otro producto y otro flujo de trabajo; nuestra prueba muestra los mismos tres riesgos y comprueba cada uno.
Próximos pasos para el arte de tu juego
Con una hoja limpia en el motor, dibuja la siguiente animación a partir de los mismos fotogramas para que el estilo no cambie, y revisa el sprite al tamaño que verán los jugadores.
De GIF a hoja de sprites
¿Cómo averiguo el tamaño de píxel nativo de un GIF?
Divide el tamaño del GIF entre la escala de exportación y comprueba que el resultado sea un número entero. Nuestro GIF de 192 × 192 era arte de 32 × 32 a 6×. El agente confirmó que cada fotograma se reducía de forma exacta.
¿Por qué mi bucle se atasca o da tirones?
Normalmente por un fotograma duplicado al final (la pose de reposo se queda en pantalla el doble de tiempo) o por un fotograma descentrado un píxel. En nuestra prueba, el agente encontró los dos comparando cada fotograma.
¿Puede el tablero de Ciyo guardar el archivo JSON?
No. El 30 de septiembre de 2026 el tablero solo aceptaba png, jpg, webp, gif, mp4 y mov, así que el agente pegó el JSON en el chat para que lo guardaras tú.
¿Cuánto costó?
Nada en nuestra prueba. Leer los fotogramas, montar las dos hojas, dibujar el fotograma nuevo y el GIF de vista previa se hizo todo en el espacio de trabajo del agente, sin un modelo de imagen.
Revisa tu GIF en Ciyo
Adjunta tu animación, dile al Ciyo Agent tu motor y la escala de exportación, y pídele que revise cada fotograma antes de montar la hoja.