Спрайт-лист — это только половина дела. Движку ещё нужно знать, где находится каждый кадр и сколько он длится. Этот инструмент упаковывает кадры в сетку, ленту или плотный атлас и записывает эти данные в форматах, которые движки реально импортируют: TexturePacker/Phaser JSON, Aseprite JSON, ресурс Godot 4 SpriteFrames, CSS и настройки нарезки для Unity. Кадры сортируются так, как вы бы их нумеровали, поэтому walk_10 идёт после walk_9.
Как пользоваться инструментом «Создание спрайт-листа»
- Перетащите все PNG-кадры разом. Они сортируются по имени в естественном порядке. Добавлять новые можно в любой момент.
- Меняйте порядок стрелками, удаляйте лишние кадры или разворачивайте порядок.
- Выберите раскладку: сетка (авто или фиксированное число столбцов), одна строка, один столбец или плотная упаковка с обрезкой прозрачных краёв.
- Задайте отступы между кадрами, внешнее поле и экструзию краёв. Включите степень двойки, если платформе нужны текстуры 64, 128, 256 px.
- Проверьте анимацию в превью и задайте FPS.
- Скачайте PNG и один файл данных или ZIP с PNG и всеми форматами.
Что вы получаете
- PNG-лист с прозрачностью, ровно как в превью.
- Phaser / TexturePacker JSON (hash и array) со смещениями после обрезки, чтобы плотно упакованные кадры по-прежнему совпадали.
- Aseprite JSON с тегом кадров и длительностями.
- Godot 4 SpriteFrames .tres на AtlasTexture, готовый для AnimatedSprite2D.
- CSS-спрайты с отдельным классом на кадр и пошаговой анимацией, а также настройки импорта и нарезки для Unity.
С какими движками работает
- Phaser 3:
this.load.atlas(key, 'sheet.png', 'sheet.json'), затем создайте анимацию из имён кадров. - Godot 4: положите .tres рядом с PNG и назначьте его в Sprite Frames узла AnimatedSprite2D.
- Unity: сеточные раскладки нарезаются через Grid By Cell Size по значениям из файла настроек. Используйте фильтрацию Point и без сжатия.
- PixiJS, Defold, Cocos, Construct: читают TexturePacker JSON (hash) напрямую или через свои импортёры.
Советы из практики геймдева
- Для анимации персонажей используйте сетку с одинаковыми кадрами. Сеточные нарезчики движков и инструменты onion skin рассчитаны именно на это.
- Для атласов предметов и UI с множеством картинок разного размера используйте плотную упаковку с обрезкой.
- Добавьте 1–2 px экструзии, если лист масштабируется на нецелый коэффициент или использует мипмапы. Это не даёт соседним кадрам просачиваться по краям.
- Давайте кадрам осмысленные имена (hero_walk_00…). Они становятся ключами кадров в JSON.
Сценарии использования
- Упаковка кадров, экспортированных из Aseprite, Blender или Spine, в одну текстуру.
- Сборка атласа UI или предметов для веб-игры.
- Превращение сгенерированных ИИ кадров в лист, который движок может анимировать.
- Создание CSS-анимации спрайта для лендинга.
Вопросы и ответы
В какие форматы данных он экспортирует?
TexturePacker JSON в формах hash и array (его читают Phaser, PixiJS и многие движки), Aseprite JSON, Godot 4 SpriteFrames .tres, CSS-классы спрайтов с keyframes и текстовый файл с настройками импорта и нарезки для Unity.
Что делает плотная упаковка?
Она обрезает прозрачную рамку каждого кадра и укладывает обрезанные кадры в строки, отсортированные по высоте, перебирая несколько ширин и оставляя самый маленький лист. JSON записывает исходный размер и смещение каждого кадра, чтобы он отрисовывался в нужном месте.
Что такое экструзия краёв?
Экструзия копирует внешний ряд пикселей каждого кадра наружу на 1–4 px. Когда GPU сэмплирует чуть за пределами кадра (фильтрация, мипмапы, нецелый зум), он читает собственный край кадра, а не соседний.
Мои кадры разного размера. Что будет?
В раскладках «Сетка», «Строка» и «Столбец» каждая ячейка равна самому большому кадру, а меньшие кадры выравниваются по центру снизу, по центру или слева сверху. Плотная упаковка сохраняет каждому кадру его собственный размер.
Есть ли ограничение на число кадров?
Фиксированного ограничения нет. Всё работает в браузере, так что практический предел — память устройства. Сотни кадров по 64 px — не проблема.
Мои изображения загружаются на сервер?
Нет. Кадры читаются и упаковываются локально. На сервер ничего не отправляется.