GIF в текстурный флипбук — упакуйте любой GIF в полосу кадров для Unity и VRChat

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

Эта страница описывает, что на самом деле даёт конвертация gif в флипбук для Unity, Godot и VRChat: четыре числа, необходимые шейдеру флипбука, что настроить в материале Poiyomi и когда полоса кадров лучше сетки. На выходе получается PNG с прозрачным фоном и количествами строк и столбцов простым текстом рядом.

Перетащите GIF

Основное тело инструмента — это первый экран. Зона перетаскивания находится сверху; всё ниже — это вывод. Перетащите на неё GIF, и инструмент считает число кадров, задержку каждого кадра, размер холста и метод очистки. Он сообщает о найденном до того, как что-либо записать, потому что GIF в природе расходятся по всем четырём пунктам.

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

Когда композитинг завершён, упаковщик записывает одно изображение. GIF 128x128 из 24 кадров становится полосой 3072x128. Те же кадры в виде сетки 6x4 становятся 768x512. Это одни и те же пиксели; разница лишь в том, что шейдер делает с UV.

Что такое текстурный флипбук

Шейдер флипбука читает четыре числа: строки, столбцы, текущий индекс и FPS. Он берёт UV-координату в диапазоне от 0 до 1, делит её на ячейку строки/столбца и сдвигает эту ячейку на текущий индекс. Сама текстура статична. Ничего не анимируется, пока не движется индекс.

Индекс обычно выводится из времени. При полосе в одну строку индекс равен floor(время, умноженное на FPS), а координата U смещается на индекс, делённый на число столбцов. При сетке индекс также задаёт строку: строка равна floor(индекс, делённый на число столбцов), столбец равен индексу по модулю числа столбцов. Вот почему полоса в одну строку — более простой случай: проходить нужно только по одному измерению.

Строки и столбцы должны точно соответствовать изображению. Полоса 3072x128 с объявленными 24 столбцами и 1 строкой сэмплируется корректно. Объявите 23 столбца — и каждый кадр сместится на долю ячейки, что читается как диагональная смазанность. Объявите 1 столбец — и получите статичное изображение. Эти две ошибки объясняют большинство сломанных флипбуков.

FPS отделён от числа кадров. Полоса из 24 кадров при 12 FPS зацикливается дважды в секунду. Полоса из 24 кадров при 24 FPS зацикливается раз в секунду. Данные текстуры идентичны; меняются только часы. Держите FPS там же, где число строк и столбцов, чтобы они никогда не расходились.

Строки, столбцы, индекс, FPS. Строки и столбцы описывают текстуру. Индекс и FPS описывают время. Строки и столбцы фиксируются при экспорте. Индекс динамичен и принадлежит шейдеру или скрипту. FPS фиксирован для большинства шейдеров, но может управляться параметром, когда нужен контроль скорости.

Если у вашего шейдера есть параметр скорости или частоты воспроизведения, он умножает временной член, а не константу FPS. Оставляйте экспортированный FPS базовой частотой, чтобы метаданные оставались осмысленными при скорости 1.

Текстурный флипбук для Unity

В Unity флипбук обычно представляет собой материал на кваде или частице. Импортируйте PNG с включённым sRGB, без мипмапов, если кадры маленькие, а альфа — это прозрачность. Режим обёртывания должен быть Clamp, а не Repeat: повторяющийся флипбук заворачивает последний кадр в первый на краю UV и показывает шов в один пиксель.

Есть два способа управлять индексом. В шейдере Unlit или Particles со встроенным узлом флипбука вы задаёте тайлинг равным строкам и столбцам и подаёте значение смешивания от 0 до 1. В пользовательском шейдере вы пишете UV-математику сами и выставляете строки, столбцы и FPS как свойства материала, чтобы их можно было редактировать без перекомпиляции.

Метаданные, которые вы вставляете: строки, столбцы, число кадров, экспортированный FPS. Если ваш шейдер использует нормализованное смешивание, а не целочисленный индекс, диапазон смешивания — от 0 до числа кадров, делённого на общее число ячеек сетки: для 24 кадров в одну строку это от 0 до 1, для сетки 6x4 с 24 кадрами из 24 ячеек это тоже от 0 до 1. Частичные сетки — тот случай, где люди спотыкаются: сетка 6x4 с 20 кадрами заканчивается на 20, делённом на 24, то есть примерно на 0.833. Пройдите дальше — и вы сэмплируете пустые ячейки.

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

Poiyomi поставляется с узлом флипбука, и это обычный путь для говорящего рта, скроллящегося экрана или переключателя из двух кадров на аватаре. Узел принимает текстуру, пару строк и столбцов и значение смешивания. VRChat не выполняет пользовательский код шейдера из скрипта во время выполнения, поэтому индекс должен поступать из анимированного свойства материала или параметра, управляемого аниматором.

Меш важен не меньше материала. Флипбук на плоском кваде читается корректно; та же текстура на изогнутой поверхности покажет растянутые ячейки там, где UV распределены неравномерно. Держите материалы флипбуков на планарных или почти планарных мешах.

Работайте со схемой полосы для Poiyomi, когда анимация — это цикл, потому что UV-математика сводится к одному умножению и одному сложению. Используйте схему сетки, когда анимация — это набор дискретных состояний, между которыми нужно переключаться: рот с четырьмя формами проще осмыслить как сетку 4x1 с целочисленным индексом, чем как скроллинг.

Полоса кадров или сетка: что экспортировать

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

У полосы одна строка, поэтому координата V не используется, и шейдер сдвигает только U. Это меньше инструкций и меньше способов ошибиться в математике. Сетка использует обе оси, чего и ожидают системы на основе атласов. Если сомневаетесь, экспортируйте полосу и переэкспортируйте в виде сетки только тогда, когда импортёр движка её запросит.

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

Проиграйте это в 3D

Текстурный флипбук на статичной плоскости ничего не доказывает. Проверять нужно утверждения, которые проявляются только в движении: заворачивается ли шов, держится ли альфа на расстоянии, ощущается ли FPS правильным при движении камеры. The Cyclops' Island — это играбельная сцена, собранная в 3D-конструкторе игр, где поверхности анимируются в реальном времени, так что вы можете наблюдать цикл флипбука рядом с геометрией, а не в инспекторе.

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

Та же сцена служит ориентиром для того, как перелистывание кадров читается на разных расстояниях и под разными углами камеры. Кадры, которые хорошо выглядят на 128 пикселях вблизи, будут давать алиасинг на расстоянии без контроля мипмапов; кадры, которые хорошо выглядят издалека, могут быть слишком мягкими вблизи. И то, и другое легче оценить в движении.

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

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

FAQ