Нарезка вручную — это угадывание размеров ячеек, подсчёт полей и исправление резов, съехавших на пиксель. Нарезчик сначала читает лист: находит ровную сетку, линии реза которой не задевают ни одного пикселя спрайта, или, если сетки нет, определяет каждый отдельный спрайт по связным пикселям. Вы видите резы поверх листа, анимация проигрывается прямо во время настройки, а любую ячейку можно исключить кликом.
Как пользоваться инструментом «Нарезка спрайт-листа»
- Перетащите лист с прозрачным или однотонным фоном. Сетка определяется сразу и рисуется поверх него.
- Если догадка неверна, задайте строки и столбцы или переключитесь на «Размер ячейки» и введите размер кадра. Для листов с рамкой или промежутками между кадрами используйте смещение и зазор.
- Для плотно упакованных листов без сетки (наборы предметов, тайлсеты с объектами) выберите «Поиск спрайтов». Расстояние слияния присоединяет оторванные части вроде кончика меча к их спрайту.
- Кликайте по ячейкам на листе, чтобы исключить их. Пустые ячейки пропускаются автоматически.
- Посмотрите превью, задайте FPS и скачайте кадры в ZIP, GIF или пересобранный лист с данными для Godot, Unity, Phaser или Aseprite.
Что вы получаете
- ZIP с кадрами: каждый кадр в своём PNG (ячейка в режимах сетки, плотная рамка в режиме «Поиск спрайтов») плюс JSON с положением каждого на исходном листе.
- Одинаковые кадры: все кадры в равных ячейках с выравниванием по центру снизу, готовые к анимации.
- Пересобранный лист с аккуратными отступами, данными для Aseprite, Phaser/TexturePacker, Godot 4 и CSS, а также GIF.
С какими движками работает
- Выравнивание по центру снизу держит ноги на одной линии в каждом кадре — именно это нужно персонажам в платформерах и играх с видом сверху.
- Файлы данных пересобранного листа напрямую загружаются в Godot 4 (SpriteFrames), Phaser 3 (атлас) и импортёры на базе Aseprite для Unity и Godot.
Советы из практики геймдева
- У листов из магазинов ассетов часто есть зазор 1px между кадрами. Если линии реза съехали на пиксель, поставьте зазор X/Y равным 1.
- Если «Поиск спрайтов» разбивает персонажа на куски, увеличивайте расстояние слияния, пока каждый персонаж не окажется в одной рамке.
- Если он сливает два соседних спрайта, уменьшите расстояние слияния до 0.
- Листы с непрозрачным фоном: включите «Удалить цвет фона», чтобы кадры получились прозрачными.
Сценарии использования
- Извлечение отдельных кадров из листа из магазина ассетов, чтобы отредактировать одну позу.
- Разбивка листа иконок или предметов на отдельные PNG для UI или инвентаря.
- Перераспределение отступов листа, чтобы он работал с сеточным нарезчиком движка.
- Превращение листа в GIF, чтобы поделиться прогрессом.
Вопросы и ответы
Как работает автоопределение сетки?
Инструмент перебирает все числа столбцов и строк, на которые лист делится ровно, отбрасывает сетки, у которых линии реза проходят через пиксели спрайта или делят спрайт пополам, и требует, чтобы в большинстве ячеек что-то было. Побеждает самая мелкая подходящая сетка. Если ровная сетка не подходит, как у атласа или UI-кита, он переключается на «Поиск спрайтов».
Что если спрайты не расположены по сетке?
Используйте «Поиск спрайтов». Он помечает каждую группу связных пикселей, сливает группы в пределах расстояния слияния, отбрасывает точки меньше минимального размера и упорядочивает результат в порядке чтения (строки сверху вниз, слева направо).
Можно нарезать листы со сплошным фоном?
Да. Цвет фона определяется по краю и при поиске считается пустым. Включите «Удалить цвет фона», чтобы экспортированные кадры были прозрачными.
Мои файлы загружаются на сервер?
Нет. Нарезка, поиск и кодирование выполняются в браузере. Лист никогда не покидает ваше устройство.
Какие имена получают кадры?
Имя листа плюс индекс с ведущими нулями, например hero_00.png, hero_01.png, чтобы они везде сортировались правильно.
Можно собрать кадры обратно по-другому?
Да, панель экспорта пересобирает лист с выбранным числом столбцов и отступами, а для плотной упаковки, экструзии и размеров степени двойки есть «Создание спрайт-листа».