1
Кидаете кадры
Перетаскиваете спрайты по одному файлу на кадр. Имя файла станет именем кадра в описании.
Атлас спрайтов
Собирает спрайты в один атлас с описанием кадров и разбирает чужой атлас обратно на кадры.
Бесплатно, без регистрацииСобирает и разбирает атласДо 200 кадров за раз
Перетащите спрайты сюда
PNG, WebP или AVIF — по файлу на кадр, до 200 за раз
Частые задачи
Как это работает
Собрать атлас
кадры → лист с описанием2
Задаёте упаковку
Обрезка прозрачных полей, зазор, растянутый край, предел размера листа и формат описания.
3
Забираете атлас
Картинка и описание одним архивом или по отдельности — с предпросмотром листа перед скачиванием.
Разобрать чужой лист
лист → отдельные кадры1
Кладёте лист
Картинку целиком, как есть. Если к ней есть файл описания — JSON или .atlas, — положите и его.
2
Смотрите, что нашлось
Инструмент сам находит спрайты и обводит их прямо на листе. Рядом настройки: видно, как меняется разбивка.
3
Забираете кадры
Архив с отдельными PNG. Обрезанным кадрам возвращается исходный размер, повёрнутые разворачиваются.
Получить описание
лист → файл описания1
Кладёте чужой лист
Ту же картинку, что и для разбора. Есть описание к ней — положите, тогда кадры возьмутся из него.
2
Проверяете рамки
Кадры видно на листе до выгрузки. Поправьте поиск, если разбивка не та.
3
Забираете файл
JSON для Phaser и PixiJS, .atlas для LibGDX или CSS-спрайты. Картинка при этом не меняется.
Зачем собирать спрайты в атлас
Каждая отдельная картинка — это запрос к серверу при загрузке и переключение текстуры при отрисовке. Сотня спрайтов персонажа превращается в сотню мелких дел на каждый кадр игры. Атлас складывает их в один лист: движок грузит одну картинку и рисует всё одним вызовом.
Обрезка прозрачных полей даёт второй выигрыш. Художник рисует кадры в одном холсте, чтобы они не прыгали, и вокруг персонажа остаётся пустота — иногда больше половины картинки. На листе эта пустота не нужна: кадр обрезается, а его исходный размер и смещение записываются в описание, поэтому в игре он встаёт ровно туда же, где стоял.
Описание — это и есть та часть, которой обычно не хватает. Без него кадр в плотно упакованном листе не найти, и движки вроде Phaser, PixiJS и Cocos без файла описания атлас просто не откроют. Unity и Unreal, наоборот, пакуют сами и ждут на входе отдельные спрайты — им нужен обратный проход, разбор чужого листа на кадры.
Обратный ход нужен не реже. Чужой спрайт-лист приходит одной картинкой — из купленного набора, из старого проекта, из чужой игры, — и как есть он не годится: Unity и Unreal пакуют атлас сами и ждут на входе отдельные кадры. Инструмент разрезает такой лист по файлу описания, а когда описания нет — а его обычно и нет, — сам находит спрайты по картинке и показывает найденные рамки до резки. Оттуда же берутся ещё две вещи: пересобрать лист с другими настройками и перевести описание в формат другого движка, не трогая саму картинку.
Нужны готовые ассеты?
3D-модели, спрайты, текстуры и звуки — бесплатно и без регистрации.
Частые вопросы
Что такое атлас спрайтов?
Одна картинка, в которую плотно уложены отдельные спрайты, и файл описания с координатами каждого кадра. Движок грузит один файл вместо сотни мелких, рисует их одним вызовом, а нужный кадр находит по описанию.
Для чего нужен атлас спрайтов?
Чтобы игра быстрее загружалась и легче рисовалась. Каждая отдельная картинка — это запрос при загрузке и переключение текстуры на каждом кадре игры; в атласе всё это сводится к одному файлу и одному вызову. Заодно уходит лишний вес: прозрачные поля вокруг кадров обрезаются.
Чем атлас отличается от спрайт-листа (spritesheet)?
Спрайт-листом обычно называют лист с кадрами одного размера, разложенными по сетке: описание ему не нужно, движку достаточно знать шаг. Атлас укладывает кадры разного размера вплотную, поэтому лист выходит меньше, но без файла описания кадр в нём не найти. Инструмент собирает именно атлас — с описанием.
Как сделать атлас спрайтов онлайн?
Перетащите кадры — по файлу на кадр, имя файла станет именем кадра. Выберите формат описания под свой движок, при необходимости поправьте обрезку, зазор и предел размера листа. Дальше «Собрать атлас» и скачивание: картинка и описание архивом или по отдельности. Ставить ничего не нужно, всё считается в браузере.
Как разрезать атлас на отдельные спрайты?
Переключите режим на «Разобрать» и положите лист вместе с файлом описания — JSON или .atlas. Кадры вырежутся по описанию, развернутся из поворота и вернутся к исходному размеру, так что анимация не поедет. Описания обычно нет — тогда инструмент сам находит спрайты на листе и показывает рамки до резки. Для листов с ровной сеткой есть второй способ: размер кадра, подобранный по самому листу.
Мои файлы никуда не загружаются?
Нет. Упаковка идёт кодом, который браузер скачал вместе со страницей, картинки остаются на вашем компьютере.