Конвертер видео в спрайт-лист (MP4, WebM, MOV)

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

Как пользоваться инструментом «Видео в спрайт-лист»

Перетащите MP4, WebM или MOV. Самый чистый результат даёт персонаж, снятый или отрендеренный на однотонном зелёном, пурпурном, синем или белом фоне. WebM с альфа-каналом сохраняет прозрачность в Chrome и Edge.
Задайте начало и конец нужного фрагмента (до 30 секунд) и размер захвата, затем нажмите Извлечь кадры. Клип проигрывается один раз, и каждый декодированный кадр сохраняется.
Если движение повторяется, инструмент находит один полный цикл и выделяет его. Выберите, сколько кадров будет в спрайт-листе: они распределяются равномерно по циклу, а замыкающий кадр отбрасывается, чтобы на стыке не было рывка.
Проверьте кеинг фона. Режим «Авто» берёт цвет фона с краёв кадра. Если он ошибся, кликните по фону в исходном кадре. Настраивайте допуск, мягкость краёв, подавление ореола и сжатие на 1px, глядя на результат в реальном времени.
Задайте максимальный размер кадра и включите «Пикселизацию», если нужны жёсткие края и одна общая палитра для всех кадров.
Экспортируйте PNG-лист с данными для Aseprite, Phaser/TexturePacker, Godot или CSS, анимированный GIF или ZIP со всем этим и отдельными кадрами.

Что вы получаете

PNG спрайт-лист с прозрачным фоном, разложенный по сетке (автоматическое или фиксированное число столбцов, отступы по желанию).
Данные кадров в виде Aseprite JSON, Phaser/TexturePacker JSON (hash или array), ресурса Godot 4 SpriteFrames .tres, CSS-классов спрайтов с пошаговой keyframe-анимацией или настроек нарезки для Unity.
Анимированный GIF с любым целым масштабом, на прозрачном, чёрном или белом фоне.
ZIP со спрайт-листом, GIF, всеми форматами данных и каждым кадром в отдельном PNG.

С какими движками работает

Godot 4: положите PNG и .tres в одну папку, затем назначьте SpriteFrames узлу AnimatedSprite2D. Если PNG лежит в другом месте, поправьте путь res:// в первой строке.
Unity: импортируйте PNG как Sprite (Multiple), выставьте Filter Mode в Point и нарежьте через Grid By Cell Size по числам из файла настроек для Unity.
Phaser 3 и PixiJS: загрузите PNG вместе с TexturePacker JSON (hash) как атлас. В JSON также перечислены имена кадров анимации по порядку.
GameMaker, Defold, Construct, RPG Maker: импортируйте PNG как ленту или сетку с размером кадра, указанным в настройках экспорта.

Советы из практики геймдева

Снимайте или рендерьте на фоне цвета, которого нет на персонаже. Пурпурный надёжнее всего для героев в зелёном, зелёный — для всего красного или розового.
Оставляйте поля вокруг персонажа. Если конечность выходит за кадр, общая обрезка её не вернёт.
Для циклов ходьбы и бега 8 кадров при 10–12 fps хорошо читаются на 32–64 px. Для idle хватит 4–6 кадров с режимом Ping-pong в просмотрщике анимаций.
Если после кеинга на контурах остаётся оттенок, немного увеличьте мягкость краёв и не выключайте подавление ореола. Сжатие на 1px включайте, только если остаётся цветное кольцо.
Пикселизируйте в финальном игровом размере. Уменьшение кадра 512 px до 48 px с одной общей палитрой выглядит гораздо лучше, чем масштабирование уже пикселизированного листа.

Сценарии использования

Превращение ротоскопированного референса в черновую анимацию для прототипа.
Извлечение зацикленного движения из видео, которое ИИ-модель сгенерировала для вашего персонажа на зелёном фоне.
Перевод рендера из Blender или Spine в спрайт-лист без настройки пайплайна рендеринга.
Перенос эффектов (дым, магия, вода), отрендеренных в видео, в игру в виде спрайт-листа.

Вопросы и ответы

Моё видео куда-то загружается?

Нет. Файл читает ваш браузер, а кадры обрабатываются на вашем устройстве. На сервер ничего не отправляется, и инструмент продолжает работать, даже если после загрузки страницы пропадёт интернет.

Какие видеоформаты поддерживаются?

Всё, что умеет воспроизводить ваш браузер: MP4 (H.264), WebM (VP8/VP9/AV1) и в большинстве случаев MOV. Файлы HEVC/H.265 .mov с iPhone декодируются только в Safari и некоторых сборках Chrome. Если файл не открывается, сначала сконвертируйте его в H.264 MP4.

Как работает поиск цикла?

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

Можно сохранить прозрачный фон из видео?

Да, в Chrome и Edge: они декодируют альфа-канал файлов WebM в VP8/VP9. Выберите «Оставить» в разделе «Фон», чтобы ничего больше не удалялось. Другие браузеры показывают такие видео на чёрном фоне, поэтому там используйте кеинг.

Сколько кадров он может обработать?

До 30 секунд за один захват. Кадры хранятся в памяти в выбранном размере захвата, а общий объём ограничен примерно 350 МБ, поэтому длинные клипы при большом размере захвата обрываются раньше. Для спрайтов захвата в 256–512 px более чем достаточно.

Почему кадры выглядят размытыми при маленьком размере?

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

Можно получить спрайт-лист, ничего не снимая?

Да. ИИ-генератор на этом сайте рисует вашего персонажа и анимирует его по библиотеке движений, а затем экспортирует в те же форматы, что и этот инструмент.