Назад Вперед

Сборка изображений в спрайт-лист. Создание json-файлов.

При работе с проектами иногда возникает потребность в сборке изображений в один файл, который называется спрайт-листом. В особенности это актуально для спрайтов из которых будет создаваться анимация. Существует полезный сайт, который позволяет быстро собрать такие спрайты в один лист. Подходит для простых изображений, которые имеют одинаковую ширину и высоту. Таким образом можно будет анимировать персонажей, врагов или создавать какие эффекты. В этом материале разберу работу с сайтом.

Для начала мне потребуется несколько изображений. Я создал простые круги с разной заливкой с помощью графического редактора GIMP2.

Создание изображений

Все изображения экспортированы в отдельные файлы.

Готовые изображения

Теперь непосредственно сам инструмент. Суть его заключается не только в сборке изображений в один файл, но так же и создание json-файла, который позволят с помощью фреймворка Phaser удобно и быстро использовать спрайты, в том числе и для анимации. Сам процесс создания анимации с помощью фреймворка буду разбирать в разделе с примерами и шаблонами.

Программа доступна по следующей ссылке. Называется она Atlas Packer Phaser 3. Как видно из названия создана она специально для работы с фреймворком Phaser 3. Внизу сайта прописаны разработчики.

Сайт программы

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

Импорт изображений

После их загрузки открывается рабочее окно, где и отображается будущий спрайт-лист.

Рабочее окно

Слева находиться панель, с помощью которой можно работать с листом. Верхние значки, как и на предыдущей странице, позволяют добавить еще изображения к файлу. Следом идет имя файла и количество столбцов. Сейчас там указано значение 1 и все изображения размещены вертикально в одну линию. Если изменить значение на 3 например, то изображения будут размещены 3 на 2.

Работа со спрайт-листом

Уже сейчас можно сохранить спрайт-лист, нажав на кнопку дискеты. Сразу же скачается архив, в котором будет файл с изображениями в формате png и второй json-файл, в котором прописаны эти изображения, что позволяет работать с ними в проекте. Оба эти файла можно распаковать в папку проекта и уже продолжить работать с ними в редакторе (это буду делать в других материалах).

Скачанный архив

Но это еще не все возможности этого инструмента. Можно пойти другим путем и загружать изображение, которое уже состоит из нескольких спрайтов и которое нужно разбить. Для наглядности могу загрузить на сайт файл, который собрал до этого. Перехожу снова на стартовую страницу программы и уже нажимаю значок по центру. Нахожу файл myatlas.png, который распаковал из архива в папку с изображениями, и нажимаю Открыть.

Загрузка спрайт-листа

После этого открывается окно, где нужно указать ширину и высоту одного изображения и весь файл будет разбит на эти показатели. В моем случает это 100 на 100.

Настройки импорта

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

Работа со спрайт-листом

Рядом со значком скачивания расположен еще один Animate!. Так же полезный инструмент, который позволяет создавать json-файлы для анимирования изображений прямо на сайте. Нажав на кнопку откроется новое рабочее окно, в котором и создается анимация.

Создание анимации

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

Создание анимации

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

Скачанный архив

Такой способ работы с изображениями в проекте позволит загрузить json-файл и одним методом по ключу нужной анимации запустить ее. А также работа с атласом спрайтов очень хороша для оптимизации проекта. На этом знакомство с инструментом завершено.

Спасибо за внимание!

Назад Вперед