Textura de flipbook: cómo animar sprites en Unity, Godot y VRChat

Una textura de flipbook es una hoja de sprites 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 mueve una pequeña ventana a través de esa cuadrícula a una velocidad constante. Una hoja de 8 x 8 contiene 64 fotogramas; a 12 fotogramas por segundo entra en bucle 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 textura de flipbook 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 textura de flipbook es una hoja de sprites usada como animación de shader, indexada por fila y columna a lo largo del tiempo. La hoja ocupa una 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, totalmente en la GPU, sin subida por fotograma y sin cambios en la llamada de dibujo.

Cómo funciona una textura de flipbook

Cuatro números definen la animación. Las columnas y las filas describen la disposición de la hoja. La cantidad 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 muestreador lea fuera de la celda actual.

La matemática del índice es breve y vale la pena escribirla. Dado el 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 confunde a la gente. 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 parte inferior izquierda. En una hoja con la primera fila arriba en Unity, offset.y pasa a ser 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 es 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 mip promedia celdas vecinas y la animación se vuelve papilla cuando la superficie está a unos metros de distancia. Si el motor o el shader de destino fuerza los mipmaps, deja un margen transparente de uno o dos píxeles alrededor de cada celda, o ajusta la ventana UV medio texel hacia adentro en los cuatro lados.

Textura de flipbook 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 solo. La ruta dos es la ventana Animation con keyframes sobre el tiling y el offset del material mientras un shader Lit o Unlit simple 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 sea controlada por un estado de Animator y visible en la línea de tiempo junto con todo lo demás en la escena.

En cualquier caso, configura primero la importación de la hoja de sprites: Modo de ajuste Clamp, Mip Maps desactivados, Modo de filtro 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 tiempo y genera 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 tiene que 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 en 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 permanece fijo en (1, 1 / rows) y solo cambia offset.y. Los pasos a continuación corresponden a esta ruta.

Flipbook de Poiyomi para VRChat

La sección Flipbook del shader Poiyomi desplaza una ventana UV a través de una hoja en el propio material, de modo que una 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 tú controlas el índice de fotograma en lugar de dejarlo avanzar 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 error de filtrado, nivel de mip o redondeo de medio texel en ese límite muestrea la fila vecina — visible como una banda delgada de un fotograma diferente durante la reproducción. Una tira también hace que el índice de fotograma sea una multiplicación directa: el ancho de 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 una 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 cola Transparent no escriben profundidad, y en un avatar se ordenan contra el cuerpo y entre sí de formas que cambian con el ángulo de la cámara. Mantén la superficie animada en un material que ya esté en el avatar cuando puedas: cada ranura de material adicional cuenta en contra del 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 distintos espectadores.

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 la cantidad de columnas y filas, agrega los fotogramas de la animación, luego configura la velocidad de la animación en fotogramas por segundo y deja Loop activado. SpriteFrames almacena la animación como una lista de índices de fotogramas, así que tanto una hoja en cuadrícula como una sola tira funcionan sin que tengas que hacer cálculos de UV.

Si solo necesitas una animación, un Sprite2D simple es más liviano: configura Hframes y Vframes una vez, luego avanza la propiedad entera frame desde un AnimationPlayer con interpolación step. No hagas tween de frame con una curva de easing predeterminada: el valor es un índice entero e interpolarlo o se reduce a un solo valor o 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 fotogramas 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 hoja de sprites 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 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 el sangrado de costuras y la mezcla de mip 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 desde el frente y desaparece desde el costado. La versión para navegador hace que el ciclo entre crear una hoja y verla sobre una superficie sea lo bastante corto 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 a 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 la celda.

Convertir un GIF es la ruta con más trabajo oculto, porque un GIF no es una secuencia de fotogramas completos. Los fotogramas con frecuencia son diferencias parciales contra el fotograma anterior, y los retardos se almacenan por fotograma en centésimas de segundo. Un shader de flipbook acepta una sola velocidad de fotogramas, así que la temporización variable tiene que 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 la cantidad de fotogramas por el ancho de la celda. Es la opció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 una cantidad de fotogramas y devuelve una hoja con un tamaño de celda fijo, lo que elimina el trabajo de alinear a mano los fotogramas exportados uno por uno.

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 ponla 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