Извлекатель спрайтов

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Принимает data URL и параметры обнаружения, возвращает массив ограничивающих рамок спрайтов.
Входные данные для обнаруженияtolerance, alphaThreshold, minWidth, minHeightНастройте эти параметры в интерфейсе, чтобы игнорировать мелкий шум или захватывать только значимые спрайты.
Форма рамкиВыровненные по осям прямоугольникиКаждый <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)Каждый спрайт сначала вырезается из исходного изображения на временный холст.
Обрезка прозрачностисканирование альфа-канала через getImageDataИнструмент сканирует пиксели для вычисления минимальной непрозрачной ограничивающей рамки при включённом тримминге.
Отступынастраиваемые 0–256 pxОтступы применяются вокруг обрезанного спрайта для уменьшения артефактов краёв в движках.
Выравниваниецентр / низСпрайты можно центрировать или выравнивать по низу (полезно для персонажей, стоящих на базовой линии).
Единый размер выводаопционально spriteWidth / spriteHeightПри включении все спрайты отрисовываются на холсте фиксированного размера для стандартизации анимаций.
Фонпрозрачный или сплошной цветЛибо сохраняется полная прозрачность, либо холст заполняется выбранным RGBA-цветом фона.

Производительность & Ограничения

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

ПараметрТипичное поведениеПримечания
Максимальный размер входного файла~10 МБ изображениеБольшие файлы могут работать, но будут загружаться/определяться медленнее.
Количество спрайтовдо ~400 спрайтовОчень большое количество возможно, но предварительный просмотр и создание ZIP займут больше времени.
Формат экспортаPNG внутри ZIP (Blob)ZIP создается полностью на стороне клиента с использованием JSZip.
Операции с холстомОбрезка и отрисовка для каждого спрайтаИспользует 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

❓Автоматически ли полностью определяется спрайт?

Инструмент выполняет автоматическое определение на основе прозрачности и настраиваемых порогов (допуск, порог альфа-канала, минимальная ширина/высота). Во многих случаях он «просто работает», но для сложных листов может потребоваться настройка параметров или повторный запуск.

📏Изменяет ли экстрактор исходное изображение?

Нет. Ваше исходное изображение остается нетронутым. Инструмент только считывает его в холст в памяти, обрезает области в новые холсты и затем экспортирует новые PNG-спрайты.

🎯Можно ли управлять отступами и выравниванием?

Да. Вы можете настроить отступы (в пикселях), выбрать прозрачный или сплошной фон, включить обрезку прозрачных краев и выравнивать спрайты по центру или по нижнему краю в выходном холсте.

🔒Хранятся ли мои изображения на сервере?

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

🧊Сохранится ли прозрачность в экспортированных спрайтах?

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

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