Flipbook Texture: cómo animar sprites en Unity, Godot y VRChat

Una flipbook texture es una sprite sheet que un shader reproduce fotograma a fotograma sobre una sola superficie. No hay rig ni línea de tiempo: la hoja contiene todos los fotogramas en una cuadrícula fija y el material desplaza una ventana pequeña sobre esa cuadrícula a una velocidad constante. Una hoja de 8 x 8 contiene 64 fotogramas; a 12 fotogramas por segundo se repite en unos 5,3 segundos. La malla nunca cambia, no se vuelve a subir ninguna textura y toda la animación cuesta una sola consulta de textura.

Esta página cubre los cuatro números que necesita un shader de flipbook y cómo el índice de fotograma se asigna a las coordenadas UV, las dos formas de controlar una flipbook texture en Unity, cómo se configura un flipbook de Poiyomi en un avatar de VRChat, el equivalente en Godot y Phaser, y cómo crear tu propia hoja a partir de un GIF o de una descripción escrita.

Respuesta rápida

Una flipbook texture es una sprite sheet usada como animación de shader, indexada por fila y columna a lo largo del tiempo. La hoja ocupa una sola ranura de textura; cada evaluación del shader calcula un índice de fotograma a partir del tiempo transcurrido y una velocidad de fotogramas, reduce ese índice a una columna y una fila, y reasigna las UV de la superficie a esa única celda. Frame = floor(time * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). Una hoja de 6 x 6 a 10 FPS recorre 36 fotogramas en 3,6 segundos, enteramente en la GPU, sin subida por fotograma y sin cambios en las draw calls.

Cómo funciona una flipbook texture

Cuatro números definen la animación. Las columnas y las filas describen la disposición de la hoja. El recuento de fotogramas normalmente es columnas por filas, y es el valor en el que el índice se reinicia. La velocidad de fotogramas es la rapidez con la que avanza el índice. Todo lo demás —filtrado, modo de ajuste, márgenes UV— existe para evitar que el sampler lea fuera de la celda actual.

La matemática del índice es breve y vale la pena escribirla. Dado un tiempo transcurrido t: frame = floor(t * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). La ventana UV es entonces tiling = (1 / columns, 1 / rows) y offset = (column / columns, row / rows). La dirección vertical es la parte que suele confundir. La mayoría de las herramientas de creación de hojas escriben la fila 0 en la parte superior de la imagen, mientras que los orígenes UV de Unity y Godot están en la esquina inferior izquierda. En una hoja con la primera fila arriba en Unity, offset.y se convierte en 1 - (row + 1) / rows; de lo contrario, las filas se reproducen invertidas y el primer fotograma de la animación es la última fila de la hoja.

El filtrado decide si el resultado queda limpio. Configura el modo de ajuste de la hoja en Clamp. Con Repeat, una muestra en el borde derecho de la textura lee el borde izquierdo, así que una columna de píxeles del fotograma 0 aparece dentro del último fotograma de cada fila. Desactiva los mipmaps para pixel art de bordes duros, porque la cadena de mips promedia celdas vecinas y la animación se vuelve una papilla cuando la superficie está a unos metros de distancia. Si el motor o el shader de destino obliga a usar mipmaps, deja un margen transparente de uno o dos píxeles alrededor de cada celda, o reduce la ventana UV medio téxel por los cuatro lados.

Flipbook texture en Unity

Hay dos rutas, y fallan de maneras distintas. La ruta uno es un shader que controla el índice de fila y columna y se anima a sí mismo. La ruta dos es la ventana Animation que pone keyframes al tiling y al offset del material mientras un shader Lit o Unlit común hace el muestreo. La ruta uno es mejor para efectos que deben mantenerse sincronizados con el tiempo del juego; la ruta dos es mejor cuando necesitas que la animación la controle un estado de Animator y que sea visible en la línea de tiempo junto con todo lo demás de la escena.

En cualquier caso, configura primero la importación de la sprite sheet: Wrap Mode Clamp, Mip Maps off, Filter Mode Point y sin compresión en pixel art. Esos tres ajustes causan más errores de flipbook que la matemática del shader.

Ruta 1: un shader con índice de fila y columna

En Shader Graph, el nodo Flipbook toma Columns, Rows y un índice de fotograma controlado por el tiempo, y devuelve las UV reasignadas. En un shader escrito a mano, expón _Columns, _Rows y _Fps como propiedades y calcula la celda en la etapa de vértices o de fragmentos. Si la animación debe estar sincronizada entre objetos, controla el índice de fotograma desde un float de script en lugar de muestrear _Time.y de forma independiente en cada material, para que dos flipbooks sobre el mismo objeto no puedan desincronizarse.

Ruta 2: la ventana Animation controlando tiling y offset

Esta ruta anima el vector _ST de la textura. Standard y Unlit integrados usan _MainTex_ST; URP Lit y Unlit usan _BaseMap_ST. El tiling se mantiene fijo en (1, 1 / rows) y solo cambia offset.y. Los pasos siguientes corresponden a esta ruta.

Flipbook de Poiyomi para VRChat

La sección Flipbook del shader de Poiyomi desplaza una ventana UV sobre una hoja en el propio material, de modo que una sola ranura de material puede mostrar un sprite animado en una malla de avatar. Expone Rows, Columns y una velocidad de fotogramas, además de un modo en el que controlas tú mismo el índice de fotograma en lugar de dejarlo correr según el tiempo del shader.

Usa una tira de una sola fila en lugar de una cuadrícula. Una tira le da al shader un solo eje por el que avanzar, lo que elimina por completo la costura vertical. Con una cuadrícula, la ventana UV tiene que bajar una fila al final de cada fila, y cualquier filtrado, nivel de mip o error de redondeo de medio téxel en ese límite muestrea la fila vecina, lo que se ve como una banda delgada de un fotograma distinto durante la reproducción. Una tira también convierte el índice de fotograma en una simple multiplicación: el ancho del fotograma en UV es 1 / frameCount y el offset es simplemente frame / frameCount. Para una animación de 8 fotogramas de celdas de 256 x 256, la tira es de 2048 x 256 y sigue siendo potencia de dos.

El alfa importa más en un avatar que en una escena plana. Si el sprite tiene bordes duros, usa Cutout u Opaque. Los flipbooks en la cola Transparent no escriben profundidad y, en un avatar, se ordenan contra el cuerpo y entre sí de formas que cambian según el ángulo de cámara. Mantén la superficie animada en un material que ya esté en el avatar siempre que puedas: cada ranura de material adicional cuenta contra el rango de rendimiento de tu avatar. Si el índice de fotograma se controla desde un estado de Animator con un parámetro sincronizado, todos los clientes ven el mismo fotograma; un índice de fotograma calculado a partir del tiempo del shader se evalúa localmente y puede quedar en un punto distinto del bucle para cada espectador.

Flipbook en Godot y Phaser

En Godot 4 la ruta 2D es AnimatedSprite2D con un recurso SpriteFrames. Importa la hoja, abre SpriteFrames, configura Hframes y Vframes con el número de columnas y filas, agrega los fotogramas de la animación y luego configura la velocidad de la animación en fotogramas por segundo y deja Loop activado. SpriteFrames guarda la animación como una lista de índices de fotograma, así que tanto una hoja en cuadrícula como una sola tira funcionan sin que tengas que hacer ninguna matemática de UV.

Si solo necesitas una animación, un Sprite2D simple es más liviano: configura Hframes y Vframes una vez y luego avanza la propiedad entera frame desde un AnimationPlayer con interpolación step. No interpoles frame con una curva de suavizado predeterminada: el valor es un índice entero e interpolarlo o bien se reduce a un solo valor o bien parpadea entre dos celdas.

Para un flipbook sobre una superficie 3D en Godot, un ShaderMaterial con la misma matemática de fila y columna que la versión de Unity es el camino más corto: uv = UV * vec2(1.0 / cols, 1.0 / rows) + vec2(col / cols, row / rows), con la fila calculada a partir del índice de fotograma. El origen UV de Godot está abajo a la izquierda, igual que en Unity, así que una hoja con la primera fila arriba necesita el mismo volteo vertical.

En Phaser 3 la hoja se carga una vez y se corta en el momento de la carga. frameWidth y frameHeight definen la celda, los frames se numeran de izquierda a derecha y de arriba a abajo, y la animación se identifica por números de fotograma en lugar de coordenadas: no hay shader que escribir ni aritmética de filas y columnas que equivocar.

Reproduce una sprite sheet en vivo en 3D

La escena jugable de esta sección es The Cyclops' Island, que se ejecuta en el constructor de juegos 3D de Neta Studio. El flipbook en pantalla es la misma operación de índice a UV descrita arriba, evaluada en un shader de Three.js en la GPU: la diferencia es que se ejecuta sobre una malla real en una escena real, con una cámara que tú controlas y luces que se mueven.

Eso importa más de lo que parece. Un flipbook en una escena plana de Unity normalmente se ve de frente, donde las fugas en las costuras y la mezcla de mips son difíciles de ver. Mueve la cámara alrededor de una superficie animada en un ángulo rasante y los problemas aparecen de inmediato: una banda de la celda vecina en el borde del fotograma, el último nivel de mip promediando dos fotogramas hasta volverlos un borrón, o un borde alfa que se ve bien de frente y desaparece de lado. La versión en navegador acorta el bucle entre crear una hoja y verla sobre una superficie lo suficiente para iterar sin un paso de compilación.

Mini World es la escena más pequeña para probar una sola hoja: menos mallas y una carga más corta. Agent Sprite Forge genera los fotogramas si aún no tienes una hoja, y ambas escenas usan la misma ruta de flipbook, así que una hoja que se ve bien en Mini World se comporta igual en The Cyclops' Island.

Crea tu propia hoja

Hay tres rutas hacia una hoja utilizable: convertir un GIF existente, recortar una cuadrícula hasta dejarla en una sola tira, o generar fotogramas a partir de una descripción escrita. Las tres terminan en el mismo archivo: un PNG con todas las celdas del mismo tamaño, dispuestas de izquierda a derecha y de arriba a abajo, con el ancho de la hoja como múltiplo exacto del ancho de celda.

Convertir un GIF es la ruta con más trabajo oculto, porque un GIF no es una secuencia de fotogramas completos. Los fotogramas suelen ser diferencias parciales respecto al anterior, y los retardos se guardan por fotograma en centésimas de segundo. Un shader de flipbook acepta una sola velocidad de fotogramas, así que la temporización variable debe aplanarse en fotogramas duplicados antes de exportar.

Recortar una cuadrícula a una tira es mecánico: conserva la fila que necesitas, recorta la altura a una celda y deja el ancho como el recuento de fotogramas por el ancho de celda. Es la decisión correcta cuando una hoja en cuadrícula se usa como una sola animación, porque elimina el eje vertical y la costura que trae consigo. Generar a partir de una descripción es la tercera ruta: Agent Sprite Forge toma una acción y un recuento de fotogramas y devuelve una hoja con un tamaño de celda fijo, lo que elimina el trabajo de emparejar a mano fotogramas exportados uno por uno.

Entra al mundo al que pertenece

Un sprite es un personaje sin lugar donde pararse. El último paso es el que nadie más ofrece: toma la hoja que acabas de crear y ponla en un mundo por el que alguien pueda caminar: una isla pequeña, un planeta, una esquina lluviosa. Todos los mundos de este sitio se crearon a partir de una descripción escrita y se publicaron como una página que puedes jugar.

Preguntas frecuentes