Генератор спрайт-листов — PNG + JSON + CSS
Объединяйте несколько изображений в один спрайт-лист 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.
Как использовать
- Добавьте изображенияПеретащите отдельные спрайты или иконки; они добавляются в том порядке, в котором вы их перетаскиваете.
- Выберите компоновкуВыберите равномерную сетку с нужным числом столбцов или плотные ряды и задайте отступ.
- Проверьте предпросмотрПросмотрите лист и удалите любое изображение, щёлкнув по его имени.
- СкачайтеСохраните лист PNG вместе с файлами координат JSON и CSS.