GIF a textura de flipbook — Empaqueta cualquier GIF en una tira de fotogramas para Unity y VRChat

Un GIF es una línea de tiempo. Una textura de flipbook es esa misma línea de tiempo empaquetada en una sola imagen para que un shader la recorra por índice en lugar de que un reproductor busque fotogramas. Sueltas un GIF en la herramienta, esta detecta la cantidad de fotogramas, las dimensiones y la demora, y luego escribe una tira de una sola fila o con cuadrícula junto con los metadatos de filas y columnas que pegas en tu material.

Esta página cubre lo que produce realmente una conversión de gif a flipbook para Unity, Godot y VRChat: los cuatro números que necesita un shader de flipbook, qué configurar en un material de Poiyomi y cuándo conviene una tira de fotogramas en lugar de una cuadrícula. El resultado es un PNG con fondo transparente y los conteos de filas y columnas en texto plano junto a él.

Suelta un GIF

El cuerpo de la herramienta es la primera pantalla. La zona para soltar archivos está arriba; todo lo que hay debajo es salida. Arrastra un GIF sobre ella y la herramienta lee la cantidad de fotogramas, la demora por fotograma, el tamaño del lienzo y el método de disposición. Informa lo que encontró antes de escribir nada, porque los GIF que circulan no coinciden en ninguno de esos cuatro puntos.

Dos cosas suelen requerir una decisión. Primero, las demoras desiguales entre fotogramas: la mayoría de los shaders de flipbook avanzan a una tasa de FPS constante, así que un GIF con demoras mixtas debe remuestrearse a una tasa fija o exportarse con el tiempo de fotograma común más lento. Segundo, la disposición: un GIF que solo redibuja las regiones modificadas entre fotogramas mostrará imágenes fantasma si apilas los fotogramas sin más. La herramienta compone cada fotograma sobre un lienzo completo antes de empaquetar, de modo que los redibujados parciales se convierten en fotogramas completos.

Cuando termina la composición, el empaquetador escribe una sola imagen. Un GIF de 24 fotogramas de 128x128 se convierte en una tira de 3072x128. Esos mismos fotogramas como una cuadrícula de 6x4 se convierten en 768x512. Ambos son los mismos píxeles; la diferencia está en lo que el shader hace con las UV.

Qué es una textura de flipbook

Un shader de flipbook lee cuatro números: filas, columnas, el índice actual y los FPS. Toma una coordenada UV en el rango de 0 a 1, la divide en una celda de fila/columna y desplaza esa celda según el índice actual. La textura en sí es estática. Nada se anima hasta que el índice se mueve.

El índice suele derivarse del tiempo. Con una tira de una fila, el índice es igual a floor(tiempo multiplicado por FPS), y la coordenada U se desplaza según el índice dividido por las columnas. Con una cuadrícula, el índice también da una fila: fila es igual a floor(índice dividido por columnas), columna es igual a índice módulo columnas. Por eso la tira de una fila es el caso más sencillo: solo hay una dimensión que recorrer.

Las filas y las columnas deben coincidir exactamente con la imagen. Una tira de 3072x128 con 24 columnas y 1 fila declaradas se muestrea correctamente. Declara 23 columnas y cada fotograma quedará una fracción de celda desfasado, lo que se ve como un barrido diagonal. Declara 1 columna y obtendrás una imagen estática. Estos dos errores explican la mayoría de los flipbooks rotos.

Los FPS son independientes de la cantidad de fotogramas. Una tira de 24 fotogramas a 12 FPS se repite dos veces por segundo. Una tira de 24 fotogramas a 24 FPS se repite una vez por segundo. Los datos de la textura son idénticos; solo cambia el reloj. Mantén los FPS en el mismo lugar que los conteos de filas y columnas para que nunca se desincronicen.

Filas, columnas, índice, FPS. Las filas y las columnas describen la textura. El índice y los FPS describen el tiempo. Las filas y las columnas quedan fijas al exportar. El índice es dinámico y pertenece al shader o al script. Los FPS son fijos en la mayoría de los shaders, pero pueden controlarse con un parámetro cuando quieres regular la velocidad.

Si tu shader tiene un parámetro de velocidad o tasa de reproducción, este multiplica el término de tiempo, no la constante de FPS. Mantén los FPS exportados como la tasa base para que los metadatos sigan siendo significativos cuando la velocidad sea 1.

Textura de flipbook para Unity

En Unity, el flipbook suele ser un material sobre un quad o una partícula. Importa el PNG con sRGB habilitado, sin mipmaps si los fotogramas son pequeños, y el alfa como transparencia. El modo de ajuste debe ser Clamp, no Repeat: un flipbook con repetición enlaza el último fotograma con el primero en el borde de las UV y muestra una costura de un píxel.

Hay dos maneras de controlar el índice. En un shader Unlit o Particles con un nodo de flipbook incorporado, configuras el tiling con las filas y las columnas y le envías un valor de mezcla de 0 a 1. En un shader personalizado, escribes tú mismo las operaciones de UV y expones las filas, las columnas y los FPS como propiedades del material para poder editarlas sin recompilar.

Los metadatos que pegas: filas, columnas, cantidad de fotogramas, FPS exportados. Si tu shader usa una mezcla normalizada en lugar de un índice entero, el rango de mezcla va de 0 a la cantidad de fotogramas dividida por el total de celdas de la cuadrícula: para una sola fila de 24 fotogramas es de 0 a 1, y para una cuadrícula de 6x4 con 24 fotogramas de 24 celdas también es de 0 a 1. Las cuadrículas parciales son el caso que suele causar confusión: una cuadrícula de 6x4 con 20 fotogramas termina en 20 dividido por 24, o aproximadamente 0.833. Si avanzas más allá de eso, muestreas celdas vacías.

Flipbook de Poiyomi para VRChat

Poiyomi incluye un nodo de flipbook, y es la ruta habitual para una boca que habla, una pantalla que se desplaza o un interruptor de dos fotogramas en un avatar. El nodo recibe una textura, un par de filas y columnas, y un valor de mezcla. VRChat no ejecuta código de shader personalizado desde un script en tiempo de ejecución, así que el índice debe provenir de una propiedad de material animada o de un parámetro controlado por un animator.

La malla importa tanto como el material. Un flipbook sobre un quad plano se ve correctamente; la misma textura sobre una superficie curva mostrará celdas estiradas donde las UV están distribuidas de forma desigual. Mantén los materiales de flipbook sobre mallas planas o casi planas.

Trabaja con el diseño de tira para Poiyomi cuando la animación sea un bucle, porque las operaciones de UV son una multiplicación y una suma. Usa el diseño de cuadrícula cuando la animación sea un conjunto de estados discretos entre los que quieras saltar: una boca con cuatro formas es más fácil de razonar como una cuadrícula de 4x1 con un índice entero que como un desplazamiento.

Tira de fotogramas vs cuadrícula: cuál exportar

Los datos de píxeles son idénticos. La elección depende de qué los va a consumir. Los shaders prefieren una tira. Los motores y los sistemas de sprites prefieren una cuadrícula. Elige según el consumidor, no según el tamaño del archivo: una tira es más ancha y una cuadrícula más cuadrada, y ambas se comprimen de forma similar con la misma cantidad total de píxeles.

Una tira tiene una sola fila, así que la coordenada V no se usa y el shader solo desplaza U. Eso son menos instrucciones y menos formas de equivocarse con las operaciones. Una cuadrícula usa ambos ejes, que es lo que esperan los sistemas basados en atlas. Si tienes dudas, exporta la tira y vuelve a exportar como cuadrícula solo cuando un importador de motor la pida.

Hay un caso más: el animador de sprites que espera fotogramas individuales. Algunos motores quieren una carpeta de PNG, no un atlas. La herramienta puede escribir los fotogramas por separado, pero entonces la imagen en disco es la suma de todos los fotogramas en lugar de un solo archivo, y la configuración de importación es por fotograma.

Reprodúcelo en 3D

Una textura de flipbook sobre un plano estático no demuestra nada. Las afirmaciones que hay que comprobar son las que solo aparecen en movimiento: si la costura se enlaza bien, si el alfa se mantiene a distancia, si los FPS se sienten correctos cuando la cámara se mueve. The Cyclops' Island es una escena jugable creada en el constructor de juegos 3D donde las superficies se animan en tiempo real, así que puedes ver un bucle de flipbook junto a la geometría en lugar de en un inspector.

Ábrelo, recorre la superficie y observa el punto de bucle. Si a un flipbook le falta un fotograma o le sobra una columna, lo verás ahí —un salto visible o un barrido diagonal— antes de subir un recurso. Ese es todo el argumento a favor de la escena jugable: el fallo es visual, y los fallos visuales necesitan una ventana de visualización.

La misma escena sirve de referencia para saber cómo se ven los fotogramas al cambiar a distintas distancias y ángulos de cámara. Los fotogramas que se ven bien a 128 píxeles de cerca presentarán aliasing a distancia sin control de mipmaps; los fotogramas que se ven bien de lejos pueden quedar demasiado suaves de cerca. Ambos son más fáciles de juzgar en movimiento.

Entra al mundo al que pertenece

Un sprite es un personaje sin un 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 lluviosa. Cada mundo de este sitio se creó a partir de una descripción escrita y se publicó como una página que puedes jugar.

Preguntas frecuentes