Flipbook Texture: как анимировать спрайты в Unity, Godot и VRChat

Текстура-флипбук — это спрайт-лист, который шейдер проигрывает кадр за кадром на одной поверхности. Здесь нет скелета и нет таймлайна: лист хранит все кадры в фиксированной сетке, а материал перемещает небольшое окно по этой сетке с постоянной скоростью. Лист 8 x 8 содержит 64 кадра; при 12 кадрах в секунду цикл длится около 5,3 секунды. Меш не меняется, текстура не перезагружается, и вся анимация обходится одним обращением к текстуре.

На этой странице разбираются четыре числа, которые нужны шейдеру флипбука, и то, как индекс кадра отображается на UV-координаты; два способа управлять текстурой-флипбуком в Unity; настройка флипбука Poiyomi на аватаре VRChat; аналоги в Godot и Phaser; а также сборка собственного листа из GIF или из текстового описания.

Краткий ответ

Текстура-флипбук — это спрайт-лист, используемый как шейдерная анимация и индексируемый по строке и столбцу во времени. Лист лежит в одном слоте текстуры; при каждом вычислении шейдер получает индекс кадра из прошедшего времени и частоты кадров, сводит этот индекс к столбцу и строке и переназначает UV поверхности в эту единственную ячейку. Frame = floor(time * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). Лист 6 x 6 при 10 FPS проигрывает 36 кадров за 3,6 секунды — полностью на GPU, без покадровой загрузки и без изменения draw call.

Как работает текстура-флипбук

Анимацию определяют четыре числа. Столбцы и строки описывают раскладку листа. Число кадров обычно равно столбцам, умноженным на строки, и именно по этому значению зацикливается индекс. Частота кадров задаёт, как быстро продвигается индекс. Всё остальное — фильтрация, режим обёртки, отступы UV — существует для того, чтобы сэмплер не читал за пределами текущей ячейки.

Математика индекса коротка и стоит того, чтобы выписать её явно. Для прошедшего времени t: frame = floor(t * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). Тогда окно UV задаётся как tiling = (1 / columns, 1 / rows) и offset = (column / columns, row / rows). Именно вертикальное направление чаще всего вызывает путаницу. Большинство инструментов создания листов записывают строку 0 в верхней части изображения, тогда как начало UV в Unity и Godot находится в левом нижнем углу. Для листа с первым верхним рядом в Unity offset.y становится 1 - (row + 1) / rows, иначе ряды проигрываются в перевёрнутом порядке и первый кадр анимации оказывается последней строкой листа.

Фильтрация определяет, будет ли результат чистым. Установите режим обёртки листа в Clamp. При Repeat выборка у правого края текстуры читает левый край, поэтому столбец пикселей из кадра 0 появляется внутри последнего кадра каждого ряда. Отключите мипмапы для пиксель-арта с жёсткими краями, потому что мип-цепочка усредняет соседние ячейки и анимация превращается в кашу, стоит поверхности оказаться в нескольких метрах. Если целевой движок или шейдер принудительно включает мипмапы, оставьте прозрачный отступ в один-два пикселя вокруг каждой ячейки или сдвиньте окно UV внутрь на половину текселя со всех четырёх сторон.

Текстура-флипбук в Unity

Есть два пути, и отказывают они по-разному. Путь первый — шейдер, который сам владеет индексом строки и столбца и анимируется самостоятельно. Путь второй — окно Animation, которое ключует tiling и offset материала, пока обычный шейдер Lit или Unlit выполняет выборку. Первый путь лучше для эффектов, которые должны оставаться синхронными с игровым временем; второй лучше, когда анимацию нужно вести из состояния Animator и видеть в таймлайне вместе со всем остальным в сцене.

В любом случае сначала настройте импорт спрайт-листа: Wrap Mode Clamp, Mip Maps off, Filter Mode Point и без сжатия для пиксель-арта. Эти три настройки вызывают больше багов флипбука, чем сама математика шейдера.

Путь 1: шейдер с индексом строки и столбца

В Shader Graph узел Flipbook принимает Columns, Rows и индекс кадра, управляемый временем, и выдаёт переназначенные UV. В шейдере, написанном вручную, объявите _Columns, _Rows и _Fps как свойства и вычисляйте ячейку на стадии вершин или фрагментов. Если анимация должна быть синхронной между объектами, ведите индекс кадра из float в скрипте, а не выбирайте _Time.y независимо в каждом материале, чтобы два флипбука на одном объекте не могли разойтись.

Путь 2: окно Animation управляет tiling и offset

Этот путь анимирует вектор _ST текстуры. Встроенные Standard и Unlit используют _MainTex_ST; URP Lit и Unlit используют _BaseMap_ST. Tiling остаётся фиксированным на (1, 1 / rows), меняется только offset.y. Приведённые ниже шаги относятся к этому пути.

Флипбук Poiyomi для VRChat

Раздел Flipbook в шейдере Poiyomi прокручивает окно UV по листу на самом материале, поэтому один слот материала может показывать анимированный спрайт на меше аватара. Он предоставляет Rows, Columns и частоту кадров, а также режим, в котором вы сами управляете индексом кадра вместо того, чтобы он шёл от времени шейдера.

Используйте однорядную полосу, а не сетку. Полоса даёт шейдеру одну ось для шага, что полностью устраняет вертикальный шов. С сеткой окно UV должно в конце каждого ряда смещаться вниз на строку, и любая фильтрация, уровень мипа или ошибка округления на половину текселя на этой границе даст выборку из соседней строки — это видно как тонкая полоса другого кадра во время проигрывания. Полоса также превращает индекс кадра в простое умножение: ширина кадра в UV равна 1 / frameCount, а смещение — просто frame / frameCount. Для анимации из 8 кадров по 256 x 256 ячеек полоса будет 2048 x 256 и останется степенью двойки.

Альфа на аватаре значит больше, чем в плоской сцене. Если у спрайта жёсткие края, используйте Cutout или Opaque. Флипбуки в очереди Transparent не пишут глубину, и на аватаре они сортируются относительно тела и друг друга способами, которые меняются с углом камеры. Где можете, держите анимированную поверхность на материале, который уже есть на аватаре — каждый дополнительный слот материала бьёт по рангу производительности аватара. Если индекс кадра ведётся из состояния Animator с синхронизированным параметром, все клиенты видят один и тот же кадр; индекс, вычисленный из времени шейдера, рассчитывается локально и у разных зрителей может стоять в разных точках цикла.

Флипбук в Godot и Phaser

В Godot 4 путь для 2D — это AnimatedSprite2D с ресурсом SpriteFrames. Импортируйте лист, откройте SpriteFrames, задайте Hframes и Vframes по числу столбцов и строк, добавьте кадры анимации, затем установите скорость анимации в кадрах в секунду и оставьте Loop включённым. SpriteFrames хранит анимацию как список индексов кадров, поэтому и сетка, и одна полоса работают без какой-либо математики UV с вашей стороны.

Если нужна всего одна анимация, обычный Sprite2D легче: задайте Hframes и Vframes один раз, затем продвигайте целочисленное свойство frame из AnimationPlayer со ступенчатой интерполяцией. Не твиньте frame кривой с обычным сглаживанием — значение является целочисленным индексом, и его интерполяция либо округляется к одному значению, либо мерцает между двумя ячейками.

Для флипбука на 3D-поверхности в Godot самый короткий путь — ShaderMaterial с той же математикой строк и столбцов, что и в версии для Unity: uv = UV * vec2(1.0 / cols, 1.0 / rows) + vec2(col / cols, row / rows), где строка вычисляется из индекса кадра. Начало UV в Godot — левый нижний угол, как и в Unity, поэтому лист с первым верхним рядом требует такого же вертикального переворота.

В Phaser 3 лист загружается один раз и нарезается при загрузке. frameWidth и frameHeight задают ячейку, кадры нумеруются слева направо и сверху вниз, а анимация определяется номерами кадров, а не координатами — не нужно писать шейдер и негде ошибиться в арифметике строк и столбцов.

Прокрутите спрайт-лист прямо в 3D

Игровая сцена в этом разделе — The Cyclops' Island, работающий в 3D-конструкторе игр Neta Studio. Флипбук на экране — это та же операция преобразования индекса в UV, описанная выше, вычисляемая в шейдере Three.js на GPU; разница в том, что она выполняется на настоящем меше в настоящей сцене, с камерой под вашим управлением и движущимся светом.

Это значит больше, чем звучит. Флипбук в плоской сцене Unity обычно рассматривают строго спереди, где утечку по швам и смешивание мипов заметить трудно. Обойдите камерой анимированную поверхность под скользящим углом, и проблемы проявятся сразу: полоса соседней ячейки у края кадра, последний уровень мипа, размывающий два кадра в одно пятно, или альфа-край, который читается правильно спереди и исчезает сбоку. Браузерная сборка делает цикл между созданием листа и его просмотром на поверхности достаточно коротким, чтобы итерировать без этапа сборки.

Mini World — сцена поменьше для проверки одного листа: меньше мешей и короче загрузка. Agent Sprite Forge генерирует кадры, если листа у вас ещё нет, и обе сцены используют один и тот же путь флипбука, так что лист, который выглядит правильно в Mini World, ведёт себя так же в The Cyclops' Island.

Создайте собственный лист

Есть три пути к пригодному листу: конвертировать существующий GIF, обрезать сетку до одной полосы или сгенерировать кадры из текстового описания. Все три заканчиваются одним файлом — одним PNG, где все ячейки одного размера, выложены слева направо и сверху вниз, а ширина листа кратна ширине ячейки.

Конвертация GIF — путь с наибольшим объёмом скрытой работы, потому что GIF не является последовательностью полных кадров. Кадры часто представляют собой частичные разницы с предыдущим кадром, а задержки хранятся для каждого кадра в сотых долях секунды. Шейдер флипбука принимает одну частоту кадров, поэтому переменный тайминг приходится выравнивать дублированием кадров перед экспортом.

Обрезка сетки до полосы механическая: оставьте нужный ряд, обрежьте высоту до одной ячейки и оставьте ширину равной числу кадров, умноженному на ширину ячейки. Это правильный ход, когда лист-сетка используется как одна анимация, потому что он убирает вертикальную ось и связанный с ней шов. Генерация из описания — третий путь: Agent Sprite Forge принимает действие и число кадров и возвращает лист с фиксированным размером ячейки, что избавляет от ручной подгонки кадров, экспортированных по одному.

Войдите в мир, которому она принадлежит

Спрайт — это персонаж, которому негде стоять. Последний шаг — тот, которого не предлагает больше никто: возьмите только что собранный лист и поместите его в мир, по которому можно ходить, — небольшой остров, планету, дождливый угол улицы. Каждый мир на этом сайте был создан из одного текстового описания и опубликован как страница, в которую можно играть.

FAQ