Конвертер изображений и видео в спрайт-лист — PNG-кадры в игровой атлас

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

Ломается обычно не сама упаковка. Ломаются порядок (frame_10 сортируется раньше frame_2), отступы (фильтры читают соседнюю ячейку и дают кайму) и размер ячейки (лист, размеры которого не делятся на сетку, из-за чего последний столбец обрезается). На этой странице каждый из этих случаев разобран конкретно, а ещё рассказано, как вырезать кадры из видео и как проверить результат в анимации внутри настоящего 3D-мира.

Перетащите изображения или видео

На первом экране есть одна зона перетаскивания и две ветки. Перетащите папку или несколько выбранных PNG, WebP или JPG — инструмент воспримет ввод как упорядоченную последовательность изображений. Перетащите один видеофайл — MP4, WebM или MOV, который браузер может декодировать, — и инструмент переключится на ветку извлечения: там вы выбираете частоту дискретизации, и он извлекает кадры через путь WebCodecs или, как запасной вариант, через скрытый элемент video.

Обе ветки ведут в один и тот же редактор: сетка ячеек справа, столбец настроек слева и живой предпросмотр, который прокручивает лист на месте. Ничего не записывается на диск, пока вы не нажмёте экспорт. Декодирование статических изображений идёт в основном потоке, а видео — в воркере, поэтому 4K-клип не заблокирует интерфейс, а последовательность из 300 PNG на время декодирования ненадолго заблокирует отрисовку.

Если перетаскивание отклонено, причина почти всегда одна из трёх: видеокодек не декодируется в вашем браузере (часто это HEVC в MOV), изображения имеют разные размеры или число кадров превышает бюджет ячеек для заданной сетки. Инструмент называет проблемный файл, а не отбрасывает его молча.

Как сделать спрайт-лист из PNG-кадров

Порядок — это первое решение, и инструмент может ошибиться, если имена файлов непоследовательны. Компаратор по умолчанию разбивает каждое имя файла на текстовые и числовые фрагменты и сравнивает их, поэтому walk_0001.png … walk_0048.png выстраиваются в правильном порядке, как и walk_1.png … walk_48.png. Если кадры названы по времени или по UUID, порядок сортировки произвольный — сначала переименуйте или перетащите миниатюры в нужном порядке перед упаковкой.

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

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

Конвертация видео в спрайт-лист

В извлечении кадров из видео есть одно число, определяющее, годится ли результат: частота извлечения. Видео обычно идёт с частотой 24, 30 или 60 fps; спрайтовой анимации это почти никогда не нужно. Клип 30 fps, выбранный с частотой 30 fps на протяжении трёх секунд, даёт 90 ячеек и без необходимости большой атлас. Выборка того же клипа с частотой 12 fps даёт 36 ячеек и для большинства движений персонажа неотличимое воспроизведение.

Выбирайте частоту извлечения исходя из предполагаемой частоты воспроизведения анимации, а не из источника. Если спрайт будет играть в игре с частотой 12 fps, извлекайте с 12 fps. Если планируете менять тайминг, извлекайте с 24 и отбрасывайте каждый второй кадр в движке — вы сохраняете возможность, ценой большего листа.

Размер ячейки берётся из размеров видео после любого применённого масштабирования. Клип 1920×1080, масштабированный до 480×270, даёт ячейки 480×270. Сохраняйте исходное соотношение сторон; неравномерное масштабирование искажает каждый кадр, и никакая настройка отступов это не исправит. Если видео содержит чёрные полосы, обрежьте их до извлечения, а не удаляйте цветом после, потому что движущийся объект может касаться цвета полосы.

PNG в спрайт: прозрачность и отступы

Сохраняйте альфа-канал. Большинство сообщений о проблемах с упаковкой сводятся к конвертеру, который при экспорте схлопнул RGBA в RGB, из-за чего каждый прозрачный пиксель стал чёрным или белым в зависимости от заливки холста. В этом инструменте холст экспорта создаётся без непрозрачного фона, поэтому PNG с удалённым или заранее удалённым фоном сохраняет альфу при упаковке.

Отступы нужны потому, что фильтрация текстуры читает пиксели за пределами ячейки. На краю спрайта билинейный или трилинейный фильтр считывает пиксели соседней ячейки и подмешивает их, создавая кайму в 1 px, цвет которой зависит от соседнего спрайта. Прозрачный отступ 2 px вокруг каждой ячейки не даёт фильтру выйти наружу. Значения отступов записываются в манифест, поэтому движок может смещать UV на величину отступа, читая атлас.

Размеры листа, кратные степени двойки, больше не требуются большинством движков, но всё ещё полезны на аппаратном уровне и в старых конвейерах, которые на них рассчитывают. Задайте столбцы и строки так, чтобы (ячейка + 2 × отступ) × столбцы и (ячейка + 2 × отступ) × строки попадали в 256, 512, 1024, 2048 или 4096. Если сетка не делится нацело, последняя строка или столбец обрезается или заполняется пустым пространством — инструмент показывает итоговые размеры листа в реальном времени, так что это видно до экспорта.

Автоопределение размера ячейки

Инструмент считывает размер ячейки из источника. Для последовательности изображений он берёт размеры первого декодированного кадра; для видео — размеры вывода после масштабирования. Это значение подставляется в поле Cell size и используется для расчёта сетки по умолчанию, поэтому папка с кадрами 64×64 открывается с ячейками 64×64.

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

Переопределите его в другую сторону, когда кадры непоследовательны. Если последовательность смешивает 64×64 и 66×66, потому что один проход экспорта добавил обводку, определение размера ячейки зафиксируется на первом файле, а остальные будут масштабированы или отклонены. Исправьте источник. Нет такого размера ячейки, который сделает несовпадающие кадры правильными.

Посмотрите анимацию в 3D

Спрайт-лист правилен только тогда, когда он воспроизводится. The Cyclops' Island — игровой мир на Neta Studio, в котором используются персонажи в спрайтовом стиле, и это самый быстрый способ проверить атлас в движении: проведите персонажа по миру, посмотрите на точку зацикливания, проверьте, видна ли кайма от отступов, когда камера отъезжает и включается фильтрация.

Если вы предпочитаете собрать тест сами, 3D game builder позволяет поместить экспортированный PNG и его манифест в сцену и управлять смещением UV по таймеру. Задайте время кадра равным выбранной частоте извлечения, и анимация пойдёт с задуманной скоростью. Если здесь она выглядит неправильно, она будет выглядеть неправильно и в вашем движке, а причина почти всегда в значении ячейки или отступа из манифеста.

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

Другие бесплатные инструменты

Конвертер соседствует с тремя инструментами, которые используют тот же редактор и тот же формат экспорта. Лист, сделанный в одном, открывается в другом без конвертации.

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

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

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

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