Конвертер GIF в спрайт-лист — бесплатно, в браузере, без загрузки

Преобразование GIF в спрайт-лист кажется тривиальным, пока не сделаешь его вручную. GIF — это уже последовательность полных кадров с палитрой и задержками для каждого кадра, поэтому на самом деле нужен инструмент, который декодирует каждый кадр, корректно объединяет прозрачность и раскладывает кадры на одном PNG в сетку, к которой можно адресоваться через текстурные координаты. Конвертер Neta Studio выполняет этот этап декодирования локально в элементе canvas, поэтому ваш файл остаётся в браузере и не попадает на сервер. Вы перетаскиваете GIF, выбираете столбцы, строки и FPS и скачиваете один PNG-атлас.

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

Преобразование GIF в спрайт-лист

Конвертер — первый элемент на странице: зона перетаскивания, полоса предпросмотра кадров и четыре элемента управления — столбцы, строки, FPS и переключатель сохранения альфа-канала. Когда вы перетаскиваете файл, браузер через декодер GIF создаёт по одному ImageBitmap на кадр, рисует каждый на закадровом canvas в исходных размерах, а затем копирует их в canvas атласа по вычисленным позициям ячеек. Исходный файл читается через File API и хранится в памяти. Сетевой запрос с вашим GIF не выполняется.

Выходной формат всегда PNG. PNG даёт 8-битный альфа-канал, необходимый для работы с персонажами; JPEG превратил бы все мягкие края в подложку. Если в вашем GIF нет прозрачности, атлас всё равно будет RGBA, а неиспользуемые альфа-байты добавят только размер файла. Если прозрачность в GIF есть, декодер должен запрашивать полный кадр с учётом метода удаления (disposal), а не частичное обновление, иначе движущиеся элементы размажутся по листу.

Собирайте лист с учётом того, как его будет сэмплировать движок, а не того, как он выглядит в файловом браузере. Сетка 4x4 из кадров 64x64 — это текстура 256x256, где кадр n адресуется как столбец n mod 4, строка floor(n / 4). Сохраняйте размер листа степенью двойки, если целевой движок или шейдерный атлас этого ожидает; лист 320x320 на некоторых путях будет дополнен или пересэмплирован, и края спрайтов станут мягкими.

GIF в спрайт-лист для VRChat

Шейдер флипбука VRChat читает текстуру как одну горизонтальную полосу, а не как сетку. Если передать ему лист 6x4, вы получите повторяющуюся полосу из первой строки, потому что UV-математика предполагает, что все кадры находятся в одной строке, а индекс кадра меняется только по оси U. Укажите число столбцов, равное количеству кадров, а строк — 1. Анимация из 24 кадров станет листом 24x1.

Сделайте полную ширину полосы степенью двойки. Полоса из 24 кадров по 64 пикселя имеет ширину 1536 пикселей, а это не степень двойки; следующий размер, который делится на 64 без остатка, — 2048, и в него помещается 32 кадра. Неиспользуемые ячейки можно заполнить прозрачными пикселями или дубликатом последнего кадра. Степень двойки важна потому, что текстура не-PoT, проходящая через генерацию мипмапов или сжатие на этапе загрузки, может сместить сэмплирование на полтекселя, и спрайт шириной в один пиксель это покажет.

Зашивайте альфу здесь, в листе, а не в шейдере. Cutout или alpha-test в шейдере — грубый инструмент; мягкие края от сглаженного контура GIF либо сохранятся, либо исчезнут в зависимости от порога, а порог вряд ли стоит подбирать для каждого аватара. Экспортируйте PNG с настоящей альфой и краем, безопасным для premultiplied alpha, — и шейдер просто сэмплирует его. Поддерживайте постоянный темп цикла: флипбук VRChat продвигается фиксированным шагом времени, поэтому если в исходном GIF задержки кадров были неравномерными, выровняйте их перед экспортом, иначе анимация будет идти с равномерной скоростью, не соответствующей исходному таймингу.

Полный список параметров и настройку текстуры см. в руководстве по текстуре флипбука.

GIF в сетку кадров («таблица»)

Когда люди ищут «gif to spreadsheet», они почти никогда не имеют в виду .xlsx. Они имеют в виду сетку кадров: кадры, разложенные по строкам и столбцам так, что каждый адресуется по индексу. Это слово используют потому, что сетка на первый взгляд похожа на таблицу. Этот инструмент создаёт такую сетку, а сетка — то же самое, что спрайт-лист; разница только в названии. Важно, чтобы раскладка была регулярной: фиксированный размер ячейки, фиксированное число столбцов и порядок кадров слева направо, сверху вниз.

Иногда вместо этого пытаются рисовать кадры по одному в редакторе пиксель-арта, накладывая onion skin, пока анимация не станет выглядеть правильно. Такой подход хорош для создаваемых с нуля персонажей и плохо подходит для уже готового GIF. Пиксельный редактор не считает задержки кадров GIF, а ручной импорт 24 кадров в 24 слоя полностью теряет тайминг. Если исходник уже является анимацией, преобразование в сетку — более короткий путь. Инструменты для пиксель-арта стоит использовать при создании графики, а не при перекодировании.

Для ручной работы с кадрами страницы о пиксель-арте охватывают рисование и работу с палитрой.

Размер кадра, сетка и прозрачный фон

Четыре вещи ломают большинство преобразований. У каждой свой симптом.

Прозрачность GIF погибает в палитре. GIF может использовать не более 256 цветов и помечает прозрачность индексом палитры. Когда кадр декодируется с методом удаления 2, область, прозрачная в одном кадре, может быть восстановлена цветом фона предыдущего кадра. Решение — композитить каждый кадр на прозрачном буфере, а не на белом. Если в предпросмотре вокруг спрайта видна чёрная или серая форма, это фоновый индекс палитры, и теперь это настоящие пиксели.

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

Размер кадра должен делить лист без остатка. Если вы извлекаете подобласть шириной 64 из листа шириной 320, получается ровно пять столбцов. Из листа шириной 330 получаются пять столбцов и остаток 10 пикселей, который не является кадром. Держите размеры листа равными размеру кадра, умноженному на число столбцов, и так для обеих осей.

Ошибка на единицу в начале координат. UV-координаты текстуры обычно отсчитываются от нижнего левого угла, а сетка кадров раскладывается от верхнего левого. Если кадр 0 отображается как последний, движок инвертирует V. Ячейка спрайта для столбца c и строки r находится в пространстве изображения в точке x = c * width, y = r * height, а преобразование в перевёрнутый UV — это одно вычитание из 1.

Что делать с листом дальше

В любом случае экспортируется один и тот же PNG; различия в том, как движок ожидает нарезку текстуры и что он делает с альфой. Используйте это как краткую справку.

Для каждой цели экспортируйте лист с той сеткой, которую эта цель может прочитать без пользовательского шейдера. Если вы поддерживаете две цели, экспортируйте два листа: горизонтальную полосу для VRChat и сетку для движка. Повторный экспорт из того же GIF занимает меньше времени, чем написание UV-математики для их согласования.

Посмотрите, как ваш лист анимируется в 3D

Большинство конвертеров останавливаются на PNG и оставляют вас проверять результат где-то ещё. Конструктор 3D-игр идёт дальше: можно загрузить лист на билборд-плоскость и увидеть, как он анимируется в реальной сцене, — это единственная проверка, которая отвечает, верны ли сетка и тайминг. В Agent Sprite Forge спрайт становится персонажем с контроллером; спрайт — это персонаж, а 3D-мир — место, где он живёт.

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

Попробуйте играбельную сцену Cyclops' Island и подставьте свой атлас.

Больше бесплатных инструментов для спрайтов

Конвертер — лишь одна часть. Эти три инструмента покрывают остальной рабочий процесс со спрайтами в Neta Studio и работают в той же сессии браузера с такой же локальной обработкой файлов.

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

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

FAQ