Флипбук-текстура: как анимировать спрайты в 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, где тайлинг и 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 управляет тайлингом и 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, а offset — просто 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 с помощью tween с кривой сглаживания по умолчанию — это целочисленный индекс, и его интерполяция либо округляется до одного значения, либо мерцает между двумя ячейками.

Для флипбука на 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