Сборщик спрайт-листов: бесплатный онлайн-конструктор листов и атласов
Создайте собственный сборщик спрайт-листов
Объедините кадры в один лист — задайте столбцы, отступы и масштаб, экспортируйте PNG и JSON-атлас — или сгенерируйте целый анимированный лист по одному запросу.
Сборщик спрайт-листов выполняет одну задачу: берёт набор отдельных кадров и упаковывает их в одно изображение по известным координатам. Вы подаёте ему файлы PNG, JPG или WebP, выбираете столбцы, отступы и масштаб, а он возвращает PNG и JSON-атлас, который сопоставляет имя каждого кадра прямоугольнику с x, y, width и height. Этот прямоугольник — всё, что нужно вашему рендереру, чтобы нарисовать нужную ячейку.
Термин охватывает два разных инструмента. Один — упаковщик: у вас уже есть кадры, и вы хотите собрать их на одном листе. Другой — генератор: вы пишете запрос и получаете полный анимированный лист персонажа в едином стиле. Браузерный 3D-конструктор миров Neta Studio умеет и то, и другое, а результат сразу попадает в сцену Three.js без этапа конвертации.
Создайте спрайт-лист из своих кадров
Это путь упаковки. Вы загружаете кадры, и лист строится детерминированно: слева направо, сверху вниз, в том порядке, в котором вы их подали. Первый кадр занимает ячейку (0,0), второй — на одну ячейку правее, и так далее, пока ряд не заполнится, после чего упаковка переходит на следующий ряд.
Здесь порядок значит больше всего остального. Упаковщик не сортирует по имени файла и не выводит группы анимации из имён. Если ваши кадры пронумерованы от frame_1.png до frame_8.png, а вы загрузите их не по порядку, экспортированный лист будет неправильным, и JSON-атлас точно зафиксирует неверный порядок. Отсортируйте до загрузки или проверьте полосу миниатюр перед экспортом.
На выходе два файла. PNG — это упакованное изображение. JSON — небольшой объект с ключами по именам кадров, где каждое значение содержит прямоугольник и размер исходного кадра. Большинство движков могут использовать этот JSON напрямую; если ваш не может, числа достаточно просты, чтобы переназначить их вручную.
01
Экспортируйте кадры как PNG с прозрачностью или JPG/WebP, если альфа-канал не нужен. Все кадры должны быть одного размера в пикселях.
02
Загрузите кадры в упаковщик в порядке воспроизведения. Проверьте, что полоса миниатюр читается слева направо так, как должна проигрываться анимация.
03
Задайте количество столбцов. Оставьте авто, если хотите примерно квадратный лист, или задайте его равным количеству кадров для одной широкой полосы.
04
Задайте отступы и масштаб. Отступы добавляют прозрачные пиксели между ячейками; масштаб умножает каждый кадр на целочисленный коэффициент с помощью nearest-neighbour.
05
Экспортируйте PNG и JSON-атлас вместе. Проверьте один прямоугольник в JSON по видимому листу, прежде чем подключать его к рендереру.
Сгенерируйте спрайт-лист по запросу
У второго значения термина «создатель спрайтов» нет ничего общего с упаковкой по сетке. Вы описываете персонажа и получаете готовый лист — полный набор поз, отрисованных в едином стиле и уже разложенных по сетке. Исходную графику загружать не нужно, потому что графика и есть результат.
Полезная часть — это согласованность. Генерация восьми направлений цикла ходьбы за один проход сохраняет силуэт, палитру и пропорции согласованными по ячейкам. Генерация каждого кадра отдельным запросом этого не даёт, и расхождение проявляется в том, что персонаж как будто меняет массу между кадрами.
Neta Studio генерирует 8-направленные циклы ходьбы, наборы покоя, атаки и заклинаний. Agent Sprite Forge — это ассет в студии, который создаёт такие листы; сгенерированный лист можно поместить в мир в 3D-конструкторе игр и управлять им с помощью того же JSON-атласа, который создал бы упаковщик.
- Ходьба в 8 направленияхОдин лист, охватывающий восемь направлений по компасу, поэтому поворот персонажа в сцене сводится к поиску строки, а не к новой генерации.
- Покой, атака, кастОтдельные наборы действий, сгенерированные в том же стиле, что и ходьба, поэтому между ними можно переключаться во время выполнения без заметного разрыва стиля.
- Перенос стиляОпишите персонажа один раз, и наборы поз унаследуют палитру и пропорции — именно это обычно ломается, когда кадры генерируются по одному.
Столбцы, отступы, масштаб и JSON-атлас
Четыре параметра решают, будет ли лист пригоден. Задайте их правильно при экспорте, потому что исправление после означает повторную упаковку и повторное тестирование каждой анимации, которая ссылалась на старые координаты.
JSON-атлас — это контракт между листом и вашим кодом. Для каждого кадра он хранит положение и размер ячейки. Если вы измените лист и не перегенерируете атлас, спрайты будут выбирать не ту область, и в ячейку начнёт затекать полоса соседних кадров.
- СтолбцыЗадаёт, сколько ячеек помещается в ряду до переноса. Широкая полоса использует количество столбцов, равное количеству кадров; сетка — значение, близкое к квадратному корню.
- Отступы и промежуткиВставляют прозрачные пиксели между ячейками. Это важно, когда рендерер выполняет выборку с любой фильтрацией, потому что при нулевых отступах краевые пиксели соседнего кадра могут протекать через границу.
- МасштабУмножает каждый кадр на целочисленный коэффициент с помощью nearest-neighbour. Нецелочисленное масштабирование с гладким фильтром размывает края пикселей и уничтожает чёткий вид, ради которого вы экспортировали кадры.
- JSON-атласСопоставляет имя каждого кадра с x, y, width и height. Считайте началом координат ступни персонажа, а не верхний левый угол изображения, чтобы для размещения на плоскости земли не требовались смещения для каждого кадра.
Что такое текстурный атлас
Атлас — это одна текстура, содержащая множество меньших изображений, плюс таблица, описывающая, где находится каждое из них. Спрайт-лист — распространённый случай, когда эти меньшие изображения являются кадрами анимации одного объекта.
Причина существования атласов — вызовы отрисовки. Привязка отдельной текстуры для каждого кадра заставляет рендерер переключать состояние между ними, а при большом количестве спрайтов на экране переключения состояний начинают доминировать во времени кадра. Упаковка всего в одну текстуру означает одну привязку для всей группы. Геометрия по-прежнему рисуется для каждого спрайта, но текстура не меняется.
Компромисс в том, что редактирование становится грубым. Изменение одного кадра означает повторную упаковку листа и обновление атласа, а любой код, хранящий старый прямоугольник, теперь неверен. Именно поэтому атлас экспортируется как данные, а не как жёстко заданные координаты. Наше руководство по спрайт-листам подробнее разбирает решения по упаковке.
Генератор спрайт-листов для RPG, платформеров и изометрии
Нужная вам раскладка в основном определяется жанром. В RPG индексация идёт по направлению и фазе анимации, поэтому сетка читается естественно. Платформеры обычно воспроизводят одно действие за раз, поэтому широкая полоса проще. Изометрическим мирам нужны размеры ячеек, соответствующие ромбической проекции, иначе спрайты перекрываются.
Выберите раскладку до того, как задавать столбцы, и пишите код поиска под эту раскладку. Переделка сетки под индексацию на основе полосы — механическое, но утомительное изменение, и оно затрагивает каждое место вызова анимации.
| Жанр | Типичная раскладка | Примечания |
|---|---|---|
| RPG | Сетка на 4 направления | Строки — направления, столбцы — кадры. Индексация сначала по направлению, затем по фазе. |
| Платформер | Широкая одиночная полоса | Одно действие на лист. Воспроизведение — линейный индекс, без вычислений по строкам. |
| Изометрия | Ромбические ячейки | Размер ячейки должен соответствовать проекции. Добавляйте больше отступов, чем обычно, чтобы остановить протекание краёв. |
Спрайт-листы персонажей
Поддерживать согласованность состава персонажей сложно, когда их больше одного. По отдельности правдоподобные листы перестают работать вместе, когда палитры расходятся, пропорции смещаются или направление света меняется между персонажами в одной сцене.
Генерируйте полный набор действий персонажа за один проход, а не по одному действию за раз. Палитра и пропорции переносятся между позами внутри одного прохода; между проходами — нет, и разница видна, как только два персонажа оказываются в одном кадре.
Держите размер ячейки одинаковым для всех персонажей состава, даже если графика не заполняет ячейку. Одинаковые ячейки позволяют сцене помещать любого персонажа в любой слот без таблицы смещений для каждого персонажа. Сценарий использования сборщика спрайтов персонажей разбирает это для полного состава.
Разрежьте существующий лист на части
Если у вас уже есть лист и нужно извлечь кадры обратно, это нарезка, а не упаковка, и это обратная операция. Конвертер GIF и аниматор работают по этому пути — вы подаёте лист, задаёте сетку ячеек или границы кадров и получаете отдельные кадры.
Две вещи приводят к сбою нарезки. Листы с неравномерными отступами не делятся ровно на предполагаемый размер ячейки, поэтому измерьте известную ячейку, а не делите ширину изображения на предполагаемое количество столбцов. Листы, экспортированные из формата с потерями, несут артефакты сжатия по границам ячеек, и эти артефакты становятся заметны, как только ячейки разделены и увеличены.
Войдите в мир, которому она принадлежит
Спрайт — это персонаж, которому негде стоять. Последний шаг — тот, который больше никто не предлагает: возьмите только что созданный лист и поместите его в мир, по которому можно ходить, — маленький остров, планету, дождливый угол улицы. Каждый мир на этом сайте создан из одного письменного описания и опубликован как страница, в которую можно играть.
FAQ
Какие форматы файлов можно использовать для исходных кадров? +
PNG, JPG и WebP. PNG — единственный из трёх, который надёжно несёт альфа-канал, поэтому используйте его для всего, что требует прозрачности.
Почему мой спрайт-лист выглядит размытым при увеличении? +
Вы масштабировали на нецелочисленный коэффициент или рендерер применяет гладкий фильтр. Масштабируйте только целыми числами и установите фильтр текстуры nearest-neighbour.
Нужны ли отступы между кадрами? +
Обычно да. При нулевых отступах и любой фильтрации текстуры краевые пиксели одного кадра попадают в соседнюю ячейку, создавая видимый шов во время анимации.
Что на самом деле содержит JSON-атлас? +
Одну запись на кадр, содержащую его x, y, width и height на листе. Некоторые экспортёры также записывают размер исходного кадра и начало координат, которое для персонажей обычно находится у ступней.
Можно ли изменить количество столбцов после экспорта? +
Нет, без повторной упаковки. Изменение столбцов перемещает каждый кадр на листе, поэтому старые прямоугольники в атласе больше не указывают на нужные ячейки, и каждая анимация, ссылающаяся на них, ломается.
В чём разница между сборщиком спрайт-листов и генератором спрайт-листов? +
Сборщик упаковывает уже имеющиеся кадры в сетку. Генератор создаёт кадры по запросу — например, полный набор ходьбы в 8 направлениях в едином стиле — поэтому графика здесь результат, а не входные данные.
Назад к 3D-конструктору игр
Все 31 готовых 3D-миров, игр и сцен собраны на одной странице — в каждый из них можно играть.
Начните с шаблона из библиотеки
Каждый ассет в этой библиотеке — прозрачный, готовый для игры PNG с записанным запросом — библиотека спрайтовых ресурсов и бесплатные спрайт-листы с тегами по действию, стилю и теме. Бесплатно для просмотра и скачивания.