Генератор спрайт-листів — 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.