Convertidor de hoja de sprites a GIF — Convierte una hoja de sprites en un GIF animado

Un GIF son fotogramas en el tiempo. Una hoja de sprites son fotogramas en el espacio. Convertir una hoja de sprites a GIF significa cortar la hoja en celdas en el orden correcto y luego asignar a cada celda un retardo para que el navegador los reproduzca como movimiento. Este convertidor se ejecuta por completo en el navegador y maneja las partes que suelen fallar: filas finales parciales, cuadrículas irregulares y fondos transparentes.

Suelta una hoja de sprites, define el tamaño de fotograma, las columnas, las filas y los FPS, y descarga el GIF. Puedes previsualizar el bucle antes de exportar, lo cual importa cuando la última fila es corta o el retardo no es un número par de fotogramas.

Suelta una hoja de sprites

La herramienta es la primera pantalla. No hay paso de registro ni cola. Sueltas un PNG o un GIF en la página y el decodificador lee las dimensiones de la hoja de inmediato.

Defines cuatro cosas: ancho y alto del fotograma, columnas, filas y FPS. El tamaño de fotograma es el tamaño de la celda en píxeles. Columnas por filas es la capacidad de la cuadrícula. Si la hoja mide 512 por 256 con celdas de 64 por 64, son 8 columnas y 4 filas, capacidad 32. Los FPS definen el retardo por fotograma. Luego descargas el GIF.

La vista previa reproduce el bucle en el momento. Si un fotograma se ve cortado —medio personaje desplazado hacia la siguiente celda— el tamaño de fotograma está mal por unos pocos píxeles. Si la animación se desvía, el número de columnas está mal. Corrige los números y la vista previa se actualiza.

Cómo funciona

El archivo nunca sale del navegador. La imagen se decodifica localmente con el propio decodificador de imágenes del navegador, se dibuja en un canvas fuera de pantalla y se vuelve a leer como datos de píxeles. No existe un paso de subida porque no es necesario.

El convertidor mide la hoja: comprueba si el ancho se divide de forma exacta entre el ancho de fotograma declarado, y si el alto se divide de forma exacta entre el alto de fotograma declarado. Si ambos se dividen sin resto, la cuadrícula es uniforme. Si no, el resto te indica que el tamaño de fotograma está mal o que hay relleno y separación que considerar.

Luego recorre la cuadrícula de izquierda a derecha, de arriba a abajo. Cada celda se copia a un búfer de fotograma. Los píxeles transparentes se mantienen transparentes. El codificador escribe el GIF con un retardo por fotograma, de modo que la temporización vive en el archivo y no en el reproductor.

Para una hoja de 32 fotogramas exportada a 12 FPS, eso es un retardo de aproximadamente 8 centésimas de segundo por fotograma, u 8 centisegundos en términos de GIF. El bucle total es 32 dividido entre 12, alrededor de 2,67 segundos.

Hojas con una última fila parcial

Muchas hojas se exportan como una cuadrícula fija con celdas sin usar al final. Una hoja de 4 por 4 puede contener solo 13 fotogramas. La última fila tiene tres celdas vacías. Si dejas el número de fotogramas en la capacidad de la cuadrícula, esas celdas vacías se convierten en tres fotogramas en blanco en el GIF, y el bucle parpadea o se detiene.

Define el número real de fotogramas. Si la animación tiene 13 fotogramas, define 13. El convertidor se detiene en el fotograma 13 e ignora las celdas vacías. Lo mismo se aplica cuando la última fila es una fila más corta con un ancho de celda diferente.

Si no puedes distinguir si la hoja tiene fotogramas en blanco al final, define el número un fotograma por encima del último fotograma que puedas ver. Exporta, observa la vista previa y luego reduce en uno si ves un espacio en blanco. Es más rápido comprobarlo en la vista previa que inspeccionar la hoja a mano.

Los fondos transparentes se mantienen transparentes

El GIF tiene un solo color transparente, no un canal alfa. Eso es alfa de 1 bit: un píxel es totalmente transparente o totalmente opaco. No hay transparencia parcial en el formato. Las hojas con bordes suaves mostrarán un borde duro después de la exportación a menos que lo manejes.

El convertidor conserva la transparencia de origen. Escribe el color transparente en la paleta del GIF y marca esos píxeles como transparentes. Un píxel con cualquier alfa por debajo del umbral se vuelve transparente; cualquier valor por encima se vuelve opaco.

El modo de fallo que hay que evitar es la aplanación. Si la hoja se dibuja sobre un canvas opaco antes de codificar, los píxeles transparentes toman el color que tuviera el canvas. Por lo general es blanco o negro, y contra un fondo nuevo se ve como un bloque sólido. Conserva el PNG de origen con su alfa y no lo compongas antes de exportar.

Para bordes suaves, aplica un matte al borde contra un color conocido sobre el que se muestre el fotograma. Si el GIF se colocará en una página blanca, aplica matte contra blanco para que el halo con anti-aliasing coincida. Si se colocará sobre un fondo oscuro, aplica matte contra ese color en su lugar. Un solo color de matte no puede ser correcto para ambos.

Hojas que no son una cuadrícula uniforme

Las hojas empaquetadas suelen tener una separación entre celdas y relleno alrededor de la hoja. Una celda de 64 por 64 con una separación de 2 píxeles tiene un paso de 66 píxeles. Si introduces 64 como ancho de fotograma, cada celda después de la primera queda desplazada por 2 píxeles acumulativos, y la animación se desvía.

Introduce el tamaño de celda más la separación como paso, y el relleno como desplazamiento. Algunos exportadores escriben la hoja completa como celdas más separaciones sin relleno; otros añaden un margen. Lee los metadatos del archivo o mide la primera celda para encontrar ambos números.

Cuando la última celda tiene un tamaño diferente —una hoja donde el fotograma final es más ancho por un barrido o un fotograma de efecto— la cuadrícula uniforme no puede describirla en una sola pasada. Divide la hoja: pasa los fotogramas uniformes por el convertidor como un solo rango y luego añade el fotograma impar por separado, o recórtalo al tamaño de celda común antes de la conversión.

Si la hoja está empaquetada en lugar de cuadriculada, no hay un paso simple. Expórtala como cuadrícula desde la herramienta de origen, o corta las celdas con un rectángulo por fotograma e introduce esos fotogramas individualmente.

Elegir una tasa de FPS

El GIF almacena el retardo de fotograma en centisegundos. A 10 FPS eso es 10 centisegundos por fotograma. A 30 FPS es 3,33, que se redondea a 3, dando aproximadamente 33 FPS. El formato no puede expresar retardos arbitrarios por debajo del centisegundo, así que elige una tasa de FPS que se divida de forma exacta entre 100: 10, 20, 25 o 50 FPS.

Los retardos desiguales causan saltos. Si defines 24 FPS, el retardo es 4,17 centisegundos y se redondea de forma inconsistente, así que algunos fotogramas duran más que otros. En un bucle corto esto se ve como un tropiezo una vez por ciclo. Usa 20 o 25 en su lugar.

Haz coincidir la duración del bucle con la duración prevista de la animación. Un ciclo de caminata creado como 0,8 segundos debería producir un GIF que se repita en 0,8 segundos. A 16 fotogramas, eso es 20 FPS exactos. Cambia el número de fotogramas y la tasa de FPS prevista cambia con él.

La mayoría de los navegadores también imponen un retardo mínimo. Los retardos por debajo de 2 centisegundos suelen limitarse a aproximadamente 10 centisegundos por el visor, así que una exportación a 50 FPS puede reproducirse a 10 FPS en algunos contextos independientemente del contenido del archivo. Prueba el GIF exportado en el navegador al que te diriges.

Ir en la dirección opuesta

La dirección inversa es común. Tienes un GIF animado y quieres una hoja de sprites: una sola imagen con todos los fotogramas dispuestos en una cuadrícula, para que un motor de juego pueda cortarla en una animación. Un convertidor de GIF a hoja de sprites hace eso: decodifica los fotogramas del GIF, los empaqueta en una cuadrícula uniforme y exporta un PNG con el tamaño y el número de fotogramas.

La parte complicada del camino inverso es el mismo problema de transparencia. Un GIF tiene un solo color transparente. Cuando lo descomprimes a una hoja, ese color se convierte en los píxeles transparentes de la hoja, y cualquier borde con anti-aliasing que se haya aplanado en el GIF permanece aplanado. La hoja hereda lo que el GIF perdió.

El retardo de fotograma también se descarta en la salida. Una hoja de sprites no tiene temporización; el motor o el animador la asigna. Si necesitas la temporización, anota los FPS del GIF antes de convertir y defínelos en la animación de destino.

Ve el GIF reproducirse en 3D

Un bucle de GIF es una animación plana. The Cyclops' Island es un mundo 3D jugable creado en Neta Studio donde el sprite es el personaje y el mundo es donde vive. Puedes cargar una animación convertida en un personaje y moverlo por la escena.

Eso cambia lo que compruebas. Un GIF que se lee bien en una página puede leerse mal en un mundo: la tasa de fotogramas que se veía fluida contra un fondo blanco puede verse lenta contra geometría en movimiento, y el color de matte que elegiste para la transparencia puede no coincidir con el entorno.

Mini World y el 3D game builder son los otros dos lugares donde poner el resultado. Mini World es un mundo pequeño con la misma superficie de construcción. Agent Sprite Forge genera personajes sprite que puedes exportar y animar. Todos se ejecutan en el navegador.

Más herramientas gratuitas

Si trabajas con sprites, el convertidor es un paso en una cadena. Estos son los otros.

Animador de sprites: reproduce una hoja a una tasa de FPS definida con onion skinning y avance fotograma a fotograma, para que puedas comprobar un bucle antes de exportarlo. Útil para encontrar un fotograma defectuoso sin exportar primero un GIF.

Creador de hojas de sprites: empaqueta imágenes de fotogramas individuales en una cuadrícula con un tamaño de celda, columnas y relleno elegidos. Esto es lo que usas cuando los fotogramas llegan como archivos separados en lugar de una sola hoja.

Biblioteca de recursos de sprites: un conjunto de sprites y hojas listos para usar con los que probar el convertidor, incluidas hojas con últimas filas parciales y fondos transparentes.

Ninguno de estos requiere subir archivos. Se ejecutan en el navegador como lo hace el convertidor.

Entra al mundo al que pertenece

Un sprite es un personaje sin ningún lugar donde pararse. El último paso es el que nadie más ofrece: toma la hoja que acabas de crear y colócala en un mundo por el que alguien pueda caminar —una isla pequeña, un planeta, una esquina de calle lluviosa. Cada mundo de este sitio se creó a partir de una sola descripción escrita y se publicó como una página que puedes jugar.

Preguntas frecuentes