Создание спрайт-листа в Sprite Sheet Packer

Sprite Sheet Packer – это инструмент для создания спрайт-листов (спрайтшит, спрайт шит) различных форматов. Домашняя страница упаковщика спрайтов https://spritesheetpacker.codeplex.com/. Эта небольшая программа, распространяемая под MIT-лицензией, объединяет множество одиночных изображений в одно изображение, на прозрачном холсте которого эффективно располагаются входные изображения. Для нормальной работы Sprite Sheet Packer в системе должен быть установлен Microsoft .Net Framework не ниже версии 3.5
Программа поддерживает входные изображения форматов PNG, JPG, BMP и GIF. Результирующим является одно изображение формата PNG 32 бит с прозрачным фоном. Sprite Sheet Packer также создает сопутствующий текстовый файл, который отображает имена файлов входных изображений с их координатами и размерами. Все это нужно для использования в вашей программе работы со спрайтами, чтобы найти области изображений, которые вам необходимы.

Пользовательский интерфейс Sprite Sheet Packer имеет необходимый и достаточный набор элементов управления. Разобраться в нем не представляет труда. Открытие входных файлов возможно как из диалогового окна, так и методом перетаскивания. Открывать файлы можно индивидуально или сразу множественным выбором.

Вид окна программы

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

Поскольку я предполагаю использовать Sprite Sheet Packer как инструмент для создания мастер-спрайтов для применения css-спрайтов на веб-страницах, то я не стал переводить две специфические опции. Это – «Require Power of Two Output?» и «Require Square Output?». Как я понимаю, они предназначены для задания каких-то специальных форматов спрайт-листа при использовании программы по прямому назначению – созданию спрайт-листов для игр. Ниже я приведу скриншоты всех вариантов построения спрайт-листа.

1 – Опции «Require Power of Two Output?» и «Require Square Output?» не активированы. Размеры спрайт-листа 462х200px.

Спрайт-лист 1

2 – Активирована только первая опция – «Require Power of Two Output?». Размеры спрайт-листа 512х256px.

Спрайт-лист 2

3 – Активированы обе опции – «Require Power of Two Output?» и «Require Square Output?». Размеры спрайт-листа 512х512px.

Спрайт-лист 3

4 – Активирована только вторая опция – «Require Square Output?». Размеры спрайт-листа 336х336px.

Спрайт-лист 4

Пример спрайт-листа приведен очень простой. Я не стал заморачиваться с картинками разных размеров, а взял первые попавшиеся изображения формата PNG с размерами 32х32 пикселя. На странице разработчика (см. ссылку выше) можно увидеть примеры спрайт-листов с картинками разных размеров. Мне кажется оптимальным для создания мастер-спрайта для последующего размещения css-спрайтов на веб-страницах является последний вариант. Этот спрайт-лист имеет оптимальную квадратную форму с небольшим пустым запасным пространством для возможного добавления новых спрайтов по мере необходимости. Приведу скриншот фрагмента текстового файла карты для последнего варианта спрайт-листа.

Карта спрайт-листа

На скриншоте видны обещанные имена файлов спрайтов, их координаты и размеры. Но координаты картинок здесь приведены без учета знака минус, поэтому при создании стилей для css-спрайтов надо это учитывать. Гораздо проще для определения нужных координат загрузить полученный мастер-спрайт в программу Sprite Cow, она беспроблемно укажет координаты для их использования в CSS.

Вот, собственно, и все.