Утилиты и Программы

Часть 28: Создание атласа изображений TexturePacker

Разумно найти готовое решение создания атласа изображений и возобновить работу над игрой. Таким готовым решением оказалась программа TexturePacker. Ее можно использовать бесплатно, но есть и платный вариант, с дополнительными функциями. Цена платной версии не большая, исходя из расчета, что это одноразовое вложение, а планы не ограничиваются созданием одной игры.

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

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

включение префикса для названий и удаление расширения файла

Создавая сцену с результатом урока, я решил использовать новую структуру организации графики. Для сцены я создал свою папку src/level_complete. Программе TexturePacker дал указание сохранять атлас и файл инструкций json в assets/images. Теперь достаточно обновить изображения в src/level_complete папке и нажать кнопку экспорта в TexturePacker, что бы получить новый спраит в папке assets/images. А за счет префикса имени папки, вся графика в одном файле но в тоже время разбита на сцены.

Изучая подробно программу TexturePacker я нашел две полезные функции:

1) Оказалось что он умеет работать с svg файлами. Это значит, мне не надо заранее конвертировать изображения утилитой svg2png. Хотя делает это она не всегда верно. Экспериментально я определил, что svg надо сохранять в SVG Tiny 1.1 и обязательно включать Image Location: Embed (хотя у меня чистый вектор, без графики)

правильные настройки svg файла при сохранении для программы TexturePacker

2) Можно сохранять результат с масштабированием! Вы можете себе представить как эта возможность, вместе с поддержкой svg упростит создание графики для мобильных и планшетных версий? Одно нажатие и у вас изображения для большого мобильно, еще одно — для маленького.

Переход с отдельных спраитов на атласы требует внесения некоторых изменений в коде. Дело в том, что ключ изображения теперь у нас один для всех спраитов, а значит обращаться к отдельным изображениям можно через свойство frame. По этому мне надо пересохранить всю spritesheet графику в отдельные файлы. Также надо обновить свои классы элементов интерфейса, так как для обращения к нужному изображению надо использовать пару key, frame вместо одного — key.

В следующем посте я вам расскажу про создание аудио спраита. А пока начну пробовать разные способы склеивания сцен и передачи данных между ними.

6 thoughts on “Часть 28: Создание атласа изображений TexturePacker

  1. Элспер, ты читаешь мои мысли =) Я уже хотел попросить тебя кинуть ссылку, а то гугл меня не туда послал.

    Программу обязательно посмотрю, тем более что-то TexterPacker не собирается делать то, что заявлено на сайте. Мне больше всего понравилось то, что он умеет создавать alias-ы. Если всю графику ложить в одну папку, при программировании сложно понять, что от какой сцены. Если забивать на разные, то часть графики либо дублируется, либо должна находится в shared папке (что не совсем красиво). А тут получается я могу продублировать для себя, но в конечном атласе будет всего одна копия. Проблема только в том, что сегодня когда создал сцены сдачи и провала экзамена, TexturePacker красиво все мне продублировал =)

  2. За ShoeBox большое спасибо (хотя я уже купил текстурепакер ))

    Думаю, было бы очень полезно, если бы и Элспер, и ты написали пост со списком используемых инструментов и краткими причинами их выбора

  3. ShoeBox это Элспера, хотя у меня лицензия от TexturePacker. Он мне понравился своим визуальным интерфейсом и возможностью копировать пути к спраитам нажав на них правой кнопкой мыши в списке. Но самое главное это поддержка папок!!! К концу разработки там столько графики, что найти нужное изображение помогает только папка от сцены. А ты каким форматом хранения пользуешься ВитринныйКапчеРобот?

  4. внутри игры — разумеется, PNG
    в качестве исходников покупал бы векторные, если бы были

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *