Duración de fotogramas de sprites: comprueba el GIF guardado

Separa el orden de los fotogramas de su duración

Anota juntos el orden y las duraciones. Una tira PNG puede mostrar visualmente el orden, pero no demuestra cuánto tiempo aparecerá cada fotograma. Conserva una lista de tiempos junto al dibujo al pasar de una herramienta a otra.

Nuestra secuencia repite intencionadamente el estado a medio cerrar. Ambos estados tienen el mismo aspecto, pero ocupan posiciones diferentes. Conserva ese orden al inspeccionar el archivo codificado.

Crea un bucle nativo y una copia para verlo

En un proyecto nuevo de Ciyo, pide un GIF de 32×32, una tira de cuatro fotogramas de 128×32 y una vista ampliada de 256×256 con vecino más cercano. Mantén coherentes la paleta y el anclaje geométrico. La ampliación permite inspeccionar píxeles; no debería sustituir silenciosamente al recurso nativo del juego.

Pide al agente que vuelva a abrir el GIF después de guardarlo e informe del número de fotogramas codificados, sus duraciones y el ajuste de repetición. Esto detecta efectos de la exportación que una tira visualmente correcta no puede revelar.

Usa solo código para crear una animación ficticia de una linterna pixel art transparente de 32x32 y 4 fotogramas. Mantén el anclaje geométrico y la misma paleta; los estados son abierto, medio, cerrado, medio. Las duraciones son [600,100,200,100] milisegundos y el bucle se repite indefinidamente, con un ciclo total de 1000ms. Entrega el GIF nativo, una tira PNG de 4 fotogramas y un GIF de vista previa ampliado 8x mediante vecino más cercano. Añade la tira y la vista previa al lienzo, proporciona enlaces de descarga y repite el manifiesto de tiempos en la respuesta. Comprueba las duraciones codificadas por fotograma después de guardar el GIF, sus dimensiones, loop=0 y la suma del ciclo; no deduzcas los tiempos de una tira estática. No uses generación de imágenes o vídeo de pago. Es un ejemplo ilustrativo generado por código en Ciyo real, no una evaluación de calidad de modelos.

Comprueba la exportación, no solo el número de dibujos

El resultado real de Ciyo incluye la tira, el GIF nativo y el GIF ampliado. Descargamos los GIF originales y los volvimos a abrir de forma independiente. Cada uno contiene cuatro fotogramas con duraciones codificadas [600,100,200,100], un total de 1,000 ms y loop=0.

El archivo nativo mide 32×32; la copia de inspección, 256×256. Son mediciones de estos dos archivos. No demuestran precisión de reproducción en un navegador, temporización de un motor ni calidad de animación en cualquier destino.

Conserva los tiempos al cambiar de formato

La documentación de GIF de Pillow ofrece opciones de duración por fotograma y repetición, que usamos para inspeccionar este ejemplo. Otros formatos o importadores pueden representar los tiempos de otra manera. Entrega la lista de duraciones en lugar de suponer que una hoja de sprites las contiene automáticamente.

Aplica las pausas en el sistema de animación de destino

Si tu motor importa solo imágenes, aplica allí las cuatro duraciones. Si un importador combina fotogramas idénticos o remuestrea a una frecuencia fija, compara el ciclo resultante con el ritmo previsto de un segundo. No modifiques el dibujo para compensar una pérdida de tiempos sin explicar.

• Documentación del formato GIF de Pillow
• Preparar una hoja de sprites a partir de un GIF
• GIF con tiempos nativos
• Tira PNG de cuatro fotogramas
• GIF ampliado para inspeccionar los tiempos

Revisa un ciclo al tamaño de visualización previsto

Mira la animación donde vayas a usarla. Confirma que sigan siendo legibles la pausa abierta larga y las transiciones cortas. Usa la ampliación para revisar el anclaje y la coherencia de los píxeles, y vuelve al tamaño nativo para juzgar el ritmo.

En acciones de juego, los tiempos también deciden cuándo ocurren sonidos, efectos o cambios de colisión. Este parpadeo no tiene lógica de ataque ni de daño. Mantén esos eventos en una línea temporal explícita e independiente y pruébalos en el motor.

• Corregir el deslizamiento de pies en un ciclo de caminata
• Crear un hitbox de sprite independiente