Что такое Генератор спрайт-листов?

Генератор спрайт-листов объединяет несколько отдельных изображений в один оптимизированный спрайт-лист. Загрузите кадры или иконки — или перетащите анимированный GIF, и каждый кадр извлечётся автоматически, — выберите раскладку (сетка, горизонтальная полоса, вертикальная полоса или плотная упаковка), задайте прозрачный или сплошной фон и экспортируйте объединённое изображение с данными о позициях в формате JSON, массив JSON, XML TextureAtlas или CSS.

Режим сетки располагает всё в равномерной раскладке N на M, идеальной для циклов анимации, где каждый кадр одного размера. Горизонтальная и вертикальная полосы выстраивают кадры в один ряд или столбец — стандартная раскладка для простых анимаций 2D-движков. Плотный режим выполняет упаковку, чтобы иконки разного размера уместились с минимумом отходов. Перетащите анимированный GIF, и каждый кадр декодируется в лист, так что не нужно сначала экспортировать кадры. По умолчанию вывод сохраняет прозрачный фон, либо можно выбрать сплошной цвет как заливку для хромакея. Метаданные доступны в четырёх форматах — хеш JSON, массив JSON, XML TextureAtlas и CSS — чтобы сразу подставить их в Phaser, PixiJS, Unity, Godot или в CSS-свойство background-position. Предпросмотр анимации позволяет прокручивать кадры со скоростью от 1 до 60 кадров в секунду, чтобы выверить тайминг перед загрузкой. Пролистывайте кадры по одному, чтобы заметить смещённый спрайт, обрезайте прозрачные поля каждого кадра, чтобы лист оставался компактным, и сохраняйте последовательность в анимированный GIF, чтобы поделиться результатом без игрового движка.

Как использовать

1. Загрузите отдельные изображения, которые хотите объединить в спрайт-лист.
2. Выберите раскладку (сетка, горизонталь, вертикаль или упаковка), настройте отступ и задайте прозрачный или сплошной фон.
3. Скачайте изображение спрайт-листа вместе с данными позиций в формате CSS или JSON.

Когда использовать

• Сшить цикл ходьбы персонажа или анимацию взрыва в одно изображение для игрового движка.
• Собрать набор UI-иконок в один файл, чтобы страница делала один HTTP-запрос вместо сорока.
• Подготовить спрайты для тайлмапа с одинаковым отступом, чтобы соседние тайлы не «затекали» друг в друга.

Результат

Разработчик игр загружает 16 кадров анимации персонажа (64×64 каждый). Инструмент размещает их в сетке 4×4, создавая спрайт-лист 256×256 с JSON-координатами кадров для игрового движка.

Частые вопросы

Когда выбирать упаковку вместо сетки?

Берите сетку, когда все кадры одного размера, например 32×32 для анимации персонажа. Берите горизонтальную или вертикальную полосу для последовательности в один ряд или столбец — это самый простой формат для большинства движков. Берите упаковку, когда размеры иконок различаются, скажем, UI-набор из 16×16 и 48×48; лист получается самым компактным, но метаданные читать вручную сложнее.

Зачем нужен отступ (padding)?

Отступ добавляет вокруг каждого кадра прозрачные пиксели. Без него рендер с линейной фильтрацией начнёт затягивать цвета соседних кадров на края текущего. 1–2 пикселя отступа достаточно, чтобы избавиться от этого артефакта.

Какой формат метаданных выбрать для экспорта?

JSON (хеш) — это формат TexturePacker, который загружает большинство движков: каждый кадр индексируется по имени. Массив JSON хранит кадры в виде упорядоченного списка, что предпочитают Phaser 3 и некоторые пайплайны. XML — это TextureAtlas от Starling/Sparrow, используемый в Unity, Godot и Friday Night Funkin. CSS даёт классы с background-position для наборов веб-иконок. Выбирайте тот, что ожидает ваш движок отрисовки.

Сохранится ли прозрачность в результате?

По умолчанию да. Лист сохраняется в PNG с целым альфа-каналом, поэтому прозрачные фоны исходных PNG переносятся как есть. Если нужен непрозрачный лист, рядом с настройками раскладки выберите сплошной цвет фона — пригодится для chroma key или движков, которые игнорируют альфу. Если прозрачность важна, не берите JPG в качестве источника: формат заливает альфу белым ещё до загрузки.

Сколько кадров поместится на один лист?

На практике мобильные GPU ограничивают одну текстуру 2048 или 4096 пикселями по стороне, поэтому лист 4096×4096 с кадрами 64×64 вмещает 4096 кадров. Для анимации безопаснее разбивать на два листа 2048×2048 — на старых устройствах надёжнее.

Похожие инструменты