Екстрактор спрайтів

Drop files here or click (max 12 MB)

Перетягніть зображення вище, щоб почати вилучення спрайтів.

Про інструмент Онлайн Екстрактор Спрайтів

Потрібно перетворити спрайт-лист або статичне зображення на окремі спрайти? Цей Екстрактор Спрайтів автоматично виявляє області спрайтів, акуратно їх обрізає (з опціональним обрізанням та відступами) та експортує готові до використання прозорі PNG-файли. 🚀 Ідеально для проєктів Scratch, 2D ігрових прототипів, класних занять та інди-ігор. Чудово працює з піксель-артом, UI-елементами, іконками та персонажами.

Чому варто використовувати цей екстрактор спрайтів?

  • Автоматичне виявлення спрайтів на основі прозорості та настроюваних порогів
  • Чисте обрізання з опціональним видаленням прозорих меж навколо кожного спрайту
  • Контроль відступів, вирівнювання (по центру/знизу) та опціональний єдиний розмір виводу
  • Зберігає прозорість (альфа-канал) для експорту PNG – ідеально для тайлмапів та персонажів
  • Візуальна галерея всіх виявлених спрайтів для швидкого огляду перед завантаженням
  • Клієнтський експорт ZIP за допомогою JSZip, зберігаючи стабільність імен файлів та порядку спрайтів
  • Дружній до Scratch: швидко перетворює єдиний лист спрайтів на кілька костюмів або ассетів
  • Ідеально для повторного використання ассетів між рушіями (Scratch, Godot, Unity 2D, Phaser тощо)

🛠️ Як витягти спрайти з листа спрайтів for sprite-extractor

1

1. Завантажте ваше зображення

Перетягніть лист спрайтів або зображення в зону завантаження, або клацніть, щоб обрати файл. Для найкращих результатів використовуйте PNG з прозорим фоном або високим контрастом між спрайтами та фоном.

2

2. Запустіть авто-виявлення

Інструмент надсилає легке представлення вашого зображення на ендпоінт виявлення, який обчислює обмежувальні рамки для кожного спрайту на основі прозорості та мінімального розміру. Рамки накладаються на ваше зображення, щоб ви могли швидко побачити, що буде експортовано.

3

3. Налаштуйте опції витягування

Налаштуйте відступи, прозорий фон проти суцільного кольору, обрізання прозорих країв, вирівнювання (по центру або знизу) та опціональну єдину ширину/висоту виводу. Інструмент відповідно перебудовує кожен канвас спрайту.

4

4. Попередній перегляд спрайтів

Прокрутіть галерею згенерованих спрайтів. Кожен попередній перегляд створюється на клієнті за допомогою офскрін канвасу і може бути перейменований або видалений залежно від опцій інтерфейсу.

5

5. Завантажте PNG або ZIP

Експортуйте окремі PNG спрайти або завантажте єдиний ZIP файл, що містить усі поточні попередні перегляди. ZIP створюється на клієнті за допомогою JSZip, а імена файлів слідують послідовному шаблону, як <code>sprite_0000.png</code>, <code>sprite_0001.png</code> тощо.

Технічні характеристики

Виявлення та обмежувальні рамки

Фаза виявлення виконується на виділеному бекенд ендпоінті та повертає чисті обмежувальні рамки, які клієнт використовує для побудови фінальних спрайтів.

АспектПоведінкаПримітки
Ендпоінт виявленняPOST /api/sprite-extractor/inspectПриймає URL даних та параметри виявлення, повертає масив рамок спрайтів.
Вхідні параметри виявленнядопуск, альфа-поріг, мін. ширина, мін. висотаНалаштуйте ці параметри в інтерфейсі, щоб ігнорувати дрібний шум або захоплювати лише значущі спрайти.
Форма рамкиВирівняні по осях прямокутникиКожен <code>SpriteBox</code> містить <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> у координатах вихідного зображення.
Обробка прозоростіЗ урахуванням альфа-каналуПрозорі пікселі враховуються при рішеннях про обрізку/підрізання, але можуть зберігатися у вихідному зображенні.
Обробка помилокПлавні запасні варіантиЯкщо виявлення не вдається, інструмент показує зрозумілу помилку і не ламає інтерфейс.

Обрізка, підрізання та вирівнювання

Після визначення рамок, весь рендеринг спрайтів виконується в браузері за допомогою HTML canvas.

КрокРеалізаціяДеталі
Початкова обрізкаdrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Кожен спрайт спочатку обрізається з оригінального зображення на тимчасовий canvas.
Підрізання прозоростісканування альфа-каналу через getImageDataІнструмент сканує пікселі для обчислення мінімальної рамки без прозорих областей, коли ввімкнено підрізання.
Відступиналаштовується 0–256 пксВідступи застосовуються навколо підрізаного або обрізаного спрайта для зменшення артефактів країв у рушіях.
Вирівнюванняпо центру / по низуСпрайти можна вирівнювати по центру або по низу (корисно для персонажів, що стоять на базовій лінії).
Одинковий розмір виводуопційно spriteWidth / spriteHeightПри ввімкненні, всі спрайти відображаються на canvas фіксованого розміру для стандартизації анімацій.
Фонпрозорий або суцільний колірАбо зберегти повну прозорість, або заповнити canvas обраним кольором фону RGBA.

Продуктивність та обмеження

Розроблено для інтерактивного використання в браузері.

ПараметрТипова поведінкаПримітки
Максимальний розмір вхідного файлу~10 МБ зображенняБільші файли можуть працювати, але завантажуватимуться/виявлятимуться повільніше.
Кількість спрайтівдо ~400 спрайтівМожлива дуже велика кількість, але попередній перегляд і створення ZIP займатимуть більше часу.
Формат експортуPNG у ZIP (Blob)ZIP генерується повністю на стороні клієнта за допомогою JSZip.
Операції з CanvasОбрізання та малювання для кожного спрайтаВикористовує 2D canvas API браузера; продуктивність залежить від роздільної здатності та кількості.

Альтернативи командного рядка

Для масивних спрайт-листів або автоматизованих конвеєрів можна поєднувати інструменти CLI, такі як ImageMagick, зі скриптами.

Linux / 🍎 macOS

Обрізання за рівномірною сіткою з ImageMagick

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

Розрізає регулярну сітку 64×64 на окремі файли PNG.

Запакувати всі спрайти в ZIP

zip sprites.zip sprite_*.png

Пакує всі згенеровані спрайти в один архів.

Windows (PowerShell + ImageMagick)

Обрізання на основі сітки

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Те саме, що й вище, використовуючи CLI <code>magick</code> на Windows.

Практичні випадки використання

Розробка 2D ігор

  • Витягніть кадри анімації персонажа з спрайт-листа для Godot, Unity 2D, Phaser або Construct.
  • Виділіть елементи інтерфейсу (кнопки, іконки, шкали здоров'я) з макету дизайну.
  • Розбийте набори тайлів на окремі тайли для редакторів рівнів.
// Приклад для Godot: завантаження кількох кадрів\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch та класні проєкти

  • Перетворіть один спрайт-лист на кілька костюмів для персонажа в Scratch.
  • Підготуйте тематичні набори ресурсів (тварини, планети, іконки) для майстерень з програмування.
  • Дозвольте учням створювати спрайт-листи в інструменті для малювання, а потім витягувати їх для Scratch.
// Псевдокод у стилі Scratch для простої анімації\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

Піксельне мистецтво та бібліотеки ресурсів

  • Розділіть старі піксельні арт-листи на пошукову бібліотеку окремих спрайтів.
  • Витягніть лише потрібні ресурси з великих комерційних або відкритих пакунків.
  • Уніфікуйте відступи та вирівнювання для спрайтів з різних джерел.

❓ Frequently Asked Questions

❓Чи є виявлення спрайтів повністю автоматичним?

Інструмент виконує автоматичне виявлення на основі прозорості та настроюваних порогів (допуск, поріг альфа-каналу, мінімальна ширина/висота). У багатьох випадках він «просто працює», але для складних листів може знадобитися налаштування параметрів або повторний прохід.

📏Чи змінює екстрактор оригінальне зображення?

Ні. Ваше оригінальне зображення залишається недоторканим. Інструмент лише зчитує його в пам'ять на canvas, обрізає області в нові canvas та експортує нові PNG-спрайти.

🎯Чи можна керувати відступами та вирівнюванням?

Так. Ви можете налаштувати відступи (у пікселях), обрати між прозорим або суцільним фоном, увімкнути обрізання прозорих країв та вирівнювати спрайти по центру або по нижньому краю в межах вихідного canvas.

🔒Чи зберігаються мої зображення на сервері?

Крок виявлення надсилає ваше зображення (у вигляді data URL) на спеціальну кінцеву точку для обчислення меж спрайтів, але самі спрайти створюються та архівуються у вашому браузері. Сервіс розроблений для тимчасової обробки, а не довгострокового зберігання. Як завжди, уникайте використання сторонніх інструментів для ресурсів, які мають залишатися строго конфіденційними.

🧊Чи буде прозорість збережена в експортованих спрайтах?

Так. За замовчуванням вихідний canvas залишається прозорим, а ваші спрайти зберігають альфа-канал. Ви можете додатково обрати суцільний колір фону, якщо ваша цільова рушія віддає перевагу непрозорим ресурсам.

Pro Tips

Best Practice

Використовуйте невеликий відступ (2–4 пкс) навколо кожного спрайта, щоб запобігти витіканню кольору країв при масштабуванні або обертанні у вашій рушії.

Best Practice

Називайте спрайти послідовно (наприклад, <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>), щоб спростити імпорт анімації та скриптування.

Best Practice

У навчальних закладах почніть з дуже простих спрайт-листів (кілька великих спрайтів, чіткий фон), щоб учні відразу побачили результати.

Best Practice

Зберігайте експортований ZIP поряд з вихідними файлами вашого проекту, щоб потім легко перегенерувати або налаштувати анімації.

Additional Resources

Scratch Wiki – Спрайти
Documentation
Godot Docs – 2D Анімація Спрайтів
Documentation
Unity Manual – 2D Спрайти
Documentation

Other Tools