Конвертер спрайт-листа в GIF — как превратить спрайт-лист в анимированный GIF

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

Перетащите спрайт-лист, задайте размер кадра, столбцы, строки и FPS, затем скачайте GIF. Вы можете просмотреть цикл перед экспортом, что важно, когда последняя строка короткая или задержка не выражается целым числом кадров.

Перетащите спрайт-лист

Инструмент — это первый экран. Здесь нет регистрации и очереди. Вы перетаскиваете PNG или GIF на страницу, и декодер сразу считывает размеры листа.

Вы задаёте четыре вещи: ширину и высоту кадра, столбцы, строки и FPS. Размер кадра — это размер ячейки в пикселях. Столбцы, умноженные на строки, дают ёмкость сетки. Если лист 512 на 256 с ячейками 64 на 64, это 8 столбцов и 4 строки, ёмкость 32. FPS задаёт задержку на кадр. Затем вы скачиваете GIF.

Предпросмотр запускает цикл на месте. Если кадр выглядит разрезанным — половина персонажа смещена в следующую ячейку — размер кадра неверен на несколько пикселей. Если анимация смещается, неверно число столбцов. Исправьте числа, и предпросмотр обновится.

Как это работает

Файл никогда не покидает браузер. Изображение декодируется локально собственным декодером браузера, отрисовывается на внеэкранном canvas и считывается обратно как пиксельные данные. Этапа загрузки не существует, потому что он не нужен.

Конвертер измеряет лист: он проверяет, делится ли ширина нацело на объявленную ширину кадра и делится ли высота нацело на объявленную высоту кадра. Если оба значения делятся без остатка, сетка однородна. Если нет, остаток говорит о том, что либо размер кадра неверен, либо есть отступы и промежутки, которые нужно учесть.

Затем он проходит по сетке слева направо, сверху вниз. Каждая ячейка копируется в буфер кадра. Прозрачные пиксели остаются прозрачными. Кодировщик записывает GIF с задержкой на кадр, поэтому тайминг хранится в файле, а не в проигрывателе.

Для листа из 32 кадров, экспортированного на 12 FPS, задержка составит около 8 сотых секунды на кадр, или 8 сантисекунд в терминах GIF. Общий цикл — 32 разделить на 12, около 2,67 секунды.

Листы с неполной последней строкой

Многие листы экспортируются как фиксированная сетка с неиспользуемыми ячейками в конце. Лист 4 на 4 может содержать только 13 кадров. В последней строке три пустые ячейки. Если оставить число кадров равным ёмкости сетки, эти пустые ячейки станут тремя пустыми кадрами в GIF, и цикл будет мигать или останавливаться.

Задайте истинное число кадров. Если в анимации 13 кадров, задайте 13. Конвертер остановится на кадре 13 и проигнорирует пустые ячейки. То же самое относится к случаю, когда последняя строка короче и имеет другую ширину ячейки.

Если вы не можете определить, есть ли в листе завершающие пустые кадры, задайте число на один кадр больше последнего видимого кадра. Экспортируйте, посмотрите предпросмотр, затем уменьшите на единицу, если видите пустой кадр. Проверить в предпросмотре быстрее, чем вручную изучать лист.

Прозрачные фоны остаются прозрачными

В GIF есть один прозрачный цвет, а не альфа-канал. Это 1-битная альфа: пиксель либо полностью прозрачен, либо полностью непрозрачен. Частичной прозрачности в формате нет. Листы с мягкими краями после экспорта покажут жёсткий край, если это не обработать.

Конвертер сохраняет прозрачность источника. Он записывает прозрачный цвет в палитру GIF и помечает такие пиксели как прозрачные. Пиксель с альфой ниже порога становится прозрачным; всё выше — непрозрачным.

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

Для мягких краёв матируйте край по известному цвету, на котором отображается кадр. Если GIF будет размещён на белой странице, матируйте край по белому, чтобы совпадал сглаженный ореол. Если он будет на тёмном фоне, матируйте по этому цвету. Один цвет матирования не может быть правильным для обоих.

Листы, которые не являются однородной сеткой

У упакованных листов часто есть промежуток между ячейками и отступы вокруг листа. Ячейка 64 на 64 с промежутком 2 пикселя имеет шаг 66 пикселей. Если ввести 64 как ширину кадра, каждая ячейка после первой будет смещаться на накапливающиеся 2 пикселя, и анимация поплывёт.

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

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

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

Выбор FPS

GIF хранит задержку кадра в сантисекундах. При 10 FPS это 10 сантисекунд на кадр. При 30 FPS это 3,33, что округляется до 3, давая примерно 33 FPS. Формат не может выражать произвольные задержки меньше сантисекунды, поэтому выбирайте FPS, который делит 100 без остатка: 10, 20, 25 или 50 FPS.

Неравномерные задержки вызывают рывки. Если задать 24 FPS, задержка составит 4,17 сантисекунды и округляется непоследовательно, поэтому одни кадры держатся дольше других. На коротком цикле это заметно как рывок раз за цикл. Используйте 20 или 25.

Согласуйте длину цикла с задуманной длительностью анимации. Цикл ходьбы, задуманный как 0,8 секунды, должен давать GIF, который зацикливается за 0,8 секунды. При 16 кадрах это ровно 20 FPS. Измените число кадров — и задуманный FPS изменится вместе с ним.

Большинство браузеров также применяют минимальную задержку. Задержки ниже 2 сантисекунд часто ограничиваются просмотрщиком примерно до 10 сантисекунд, поэтому экспорт с 50 FPS в некоторых контекстах может воспроизводиться как 10 FPS независимо от содержимого файла. Проверьте экспортированный GIF в целевом браузере.

В обратную сторону

Обратное направление тоже распространено. У вас есть анимированный GIF, и вы хотите спрайт-лист: одно изображение со всеми кадрами, разложенными по сетке, чтобы игровой движок мог нарезать его в анимацию. Конвертер GIF в спрайт-лист делает именно это: декодирует кадры GIF, упаковывает их в однородную сетку и экспортирует PNG с размером и числом кадров.

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

Задержка кадров также теряется при экспорте. У спрайт-листа нет тайминга; его задаёт движок или аниматор. Если вам нужен тайминг, запишите FPS GIF перед конвертацией и задайте его в целевой анимации.

Посмотрите, как GIF воспроизводится в 3D

Цикл GIF — это плоская анимация. The Cyclops' Island — играбельный 3D-мир, созданный в Neta Studio, где спрайт является персонажем, а мир — местом, где он живёт. Вы можете загрузить сконвертированную анимацию на персонажа и перемещать его по сцене.

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

Mini World и 3D-конструктор игр — два других места, куда можно поместить результат. Mini World — это небольшой мир с той же поверхностью конструктора. Agent Sprite Forge генерирует спрайтовых персонажей, которых можно экспортировать и анимировать. Все они работают в браузере.

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

Если вы работаете со спрайтами, конвертер — лишь один шаг в цепочке. Вот остальные.

Аниматор спрайтов: воспроизводит лист с заданным FPS, с калькированием и покадровым переключением, чтобы вы могли проверить цикл перед экспортом. Полезно для поиска плохого кадра без предварительного экспорта GIF.

Создатель спрайт-листов: упаковывает отдельные изображения кадров в сетку с выбранным размером ячейки, числом столбцов и отступами. Это то, что нужно, когда кадры поступают отдельными файлами, а не одним листом.

Библиотека спрайтовых ресурсов: набор готовых спрайтов и листов для проверки конвертера, включая листы с неполными последними строками и прозрачными фонами.

Ни один из них не требует загрузки на сервер. Они работают в браузере так же, как конвертер.

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

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

Частые вопросы