GIF часто хранят только пиксели, изменившиеся между кадрами, поэтому простая выгрузка кадров даёт спрайты с дырами и остатками предыдущего кадра. Этот конвертер воспроизводит каждый кадр с его методом очистки, как это делает браузер, поэтому каждый кадр листа получается целым. Он также сохраняет собственную задержку каждого кадра, что важно для анимаций с удержанием позы.
Как пользоваться инструментом «GIF в спрайт-лист»
- Перетащите анимированный GIF (или попробуйте пример). Каждый кадр декодируется со своей задержкой и методом очистки.
- Выберите диапазон кадров и с помощью «Оставлять каждый N-й кадр» сократите длинный GIF вдвое или втрое. Оставшиеся кадры забирают время пропущенных, поэтому скорость не меняется.
- Кликайте по кадрам на ленте, чтобы исключить отдельные кадры.
- «Обрезать по содержимому» обрезает все кадры одной общей рамкой, и спрайт остаётся на месте. Добавьте отступы, если движку нужен зазор вокруг.
- Если у GIF сплошной фон вместо прозрачности, включите «Удалить цвет фона».
- Выберите исходный тайминг или фиксированный FPS, затем экспортируйте лист, файл данных, GIF или ZIP со всем сразу.
Что вы получаете
- PNG спрайт-лист, прозрачный, по сетке с автоматическим или фиксированным числом столбцов.
- Aseprite JSON с длительностями кадров из GIF, а также Phaser/TexturePacker JSON, Godot 4 SpriteFrames
.tres, CSS-спрайты и настройки нарезки для Unity. - Перекодированный GIF с вашими правками в масштабе 1×–8×.
- ZIP со всем перечисленным и каждым кадром в отдельном PNG.
С какими движками работает
- Aseprite JSON сохраняет неравные длительности кадров. Импортёры для Godot вроде Aseprite Wizard и импортёры Aseprite для Unity читают его напрямую.
- Godot 4 .tres использует фиксированную скорость с относительными длительностями кадров, так что удерживаемые кадры остаются удерживаемыми.
- Phaser 3: загрузите как атлас с hash JSON и соберите анимацию из имён кадров, перечисленных в
animations.
Советы из практики геймдева
- Пиксель-арт GIF с 255 цветами или меньше перекодируются здесь без потерь: инструмент использует точные цвета, а не квантует их заново.
- Многие GIF из интернета — это пиксель-арт, увеличенный в 2× или 3×. Инструмент это распознаёт и восстанавливает настоящие пиксели 1×, поэтому лист остаётся маленьким и чётким.
- Задержки GIF меньше 20 мс браузеры проигрывают как 100 мс. Инструмент делает так же, поэтому превью совпадает с тем, что вы видели раньше.
- Для движков, которые принимают только один FPS, переключите тайминг на фиксированный FPS и проверьте в превью, что удерживаемые позы по-прежнему читаются.
Сценарии использования
- Перенос в игровой движок GIF из старого проекта или из пиксель-арт редактора, который умел экспортировать только GIF.
- Превращение GIF из ИИ-инструмента анимации в кадры, которые можно редактировать и чистить.
- Разбивка GIF на пронумерованные PNG-кадры для доработки в Aseprite, LibreSprite или Photoshop.
- Создание CSS-анимации спрайта для сайта из готового GIF.
Вопросы и ответы
Почему в других конвертерах у некоторых кадров GIF не хватает пикселей?
GIF может хранить кадр только как изменившуюся область и указывать, что с ней делать дальше (оставить, очистить или восстановить предыдущий кадр). Инструменты, игнорирующие этот метод очистки, выдают битые кадры. Этот его применяет, поэтому каждый кадр полный.
Сохраняется ли исходный тайминг кадров?
Да. Задержка каждого кадра читается из GIF и записывается в Aseprite JSON и ресурс Godot. Если движку нужен фиксированный FPS, можно переключиться на него.
Можно сделать белый или цветной фон GIF прозрачным?
Включите «Удалить цвет фона». Будет удалён цвет, найденный по краю кадра. Для сложных фонов экспортируйте лист и прогоните его через «Удаление фона спрайтов».
Есть ли ограничение по размеру или числу кадров?
Фиксированного ограничения нет. Всё происходит в памяти браузера, поэтому обработка очень больших GIF (сотни кадров в высоком разрешении) зависит от вашего устройства.
Мой GIF загружается на сервер?
Нет. GIF декодируется на вашем устройстве в фоновом воркере. Ни один файл не покидает ваш компьютер.
А что с клипами MP4 или WebM?
Этот инструмент читает GIF-файлы. Для видео используйте «Видео в спрайт-лист»: он захватывает каждый кадр любого клипа, который может воспроизвести браузер, и умеет вырезать зелёный фон.