Генератор спрайт-листов — PNG + JSON + CSS

Что такое спрайт-лист и чем он полезен

Спрайт-лист (sprite sheet) объединяет множество маленьких изображений — кадры анимации, игровые тайлы, иконки UI, эмодзи или флаги — в одно большое изображение. Загрузка одного файла вместо десятков сокращает число HTTP-запросов и переключений текстур, поэтому веб-страницы и игры быстрее загружаются и отрисовываются. Каждый отдельный спрайт затем показывается по ссылке на его прямоугольник внутри листа. Этот генератор спрайт-листов создаёт изображение и координаты за вас: перетащите файлы, выберите компоновку и скачайте PNG вместе с файлом данных JSON и готовой таблицей стилей CSS.

Вся работа выполняется в вашем браузере. Изображения рисуются локально на canvas, а файлы координат генерируются на JavaScript, поэтому ваша графика никогда не загружается на сервер, и вы можете пересоздавать лист сколько угодно раз, экспериментируя с настройками.

Сетка или плотная компоновка

Равномерная сетка отводит каждому спрайту ячейку размером с самое большое изображение и центрирует каждый спрайт в его ячейке. Именно такую предсказуемую структуру ожидает большинство систем анимации: кадр n всегда находится в столбце n по модулю числа столбцов. Плотные ряды сортируют спрайты по высоте и заполняют ряды до целевой ширины, что расходует гораздо меньше места, когда изображения разного размера. В обоих режимах значение отступа добавляет прозрачное пространство вокруг каждого спрайта, чтобы избежать просачивания цветов при масштабировании листа.

Использование выходных файлов JSON и CSS

Файл JSON перечисляет каждый спрайт под аккуратным именем, полученным из имени файла, с его позицией x и y, шириной и высотой, а также общим размером листа. Игровые фреймворки, такие как Phaser и PixiJS, могут загружать этот hash-формат напрямую, и его легко разобрать на любом языке. Файл CSS определяет базовый класс, задающий лист в качестве фонового изображения, и по одному классу на каждый спрайт с его размером и позицией фона, так что иконка — это просто span с двумя классами. Измените префикс классов под соглашения об именовании в вашем проекте и держите PNG рядом с файлом CSS или поправьте URL.