TileMaker for Adobe Photoshop CS5 (beta)

 

При создании изометрических игр  (Isometric Games) *[1] используются алгоритмы "плитки" или "тaйлинга" (tile) *[2], т.е. все игровое пространство разбивается на кусочки-"тайлы", которые вступаю в игру по мере их открытия, захвата или достижения пользователем определенного уровня. Если игровая карта достаточно велика, чтобы подгрузить за один раз, то ее удобно разбить на кусочки, загрузка которых происходит постепенно (в фоновом режиме). Также такое разбиение ускоряет выход готового продукта в тестовый режим. Когда карта готова ее нужно разрезать на одинаковые кусочки, что может занять длительное время если карта большая и количество кусочков более 50. Средствами Photoshop автоматически разрезать карту на равные кусочки не получается, поэтому мною был написан плагин позволяющий это сделать.

TileMaker - плагин для Photoshop предназначенный для автоматической разрезки картинки на заданное количество кусочков.
Интерфейс

Данный плагин написан на Adobe Flash Builder 4 (framework Flex), JS, Photoshop API. Как он работает, как написать похожий плагин и что для этого нужно я расскажу дальше.

Прежде всего нужно его скачать от сюда. Пароль: dqvsra
Внутри архива находиться текстовый файлик - setup,  в нем описано как нужно установить плагин:

1) Скопировать файлы в папку Adobe\Adobe Photoshop CS5\Plug-ins\Panels
2) Перезапустить PS
3) Window - Extension - TileMaker

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

5) Папка, куда будут сохраняться картинки, должна быть заранее создана и располагаться на диске С:\\

Теперь давайте разберемся как сделать похожий плагин. К сожалению исходники TileMaker был удален при переустановке винды, так что рассмотрим немного упрошенный пример только с доступом к стороннему скрипту JS.

Разработку будем проводить в среде Flash Builder и для начала создадим простой Flex Project с именем TileMaker.

Design

Минималистический дизайн стандартными компонентами фреймворка Flex

Особое внимание, как всегда, стоит уделить названиям компонентов, и лучше всего их продумать заранее.

ActionScript 3.0

Для начала нужно скачать библиотеки для доступа к сторонним файлам из Flash Builder. Она называется CSXSLibrary-2.0-sdk-3.4.swc. Документацию этого пакета можно найти тут, он позволяет получать доступ к сторонним скриптам и файлам из FB (что то вроде NativeProcess в Air). После того как скачаете библиотеку нужно поместить ейо в папку libs вашего FB проекта.

Теперь стандартная процедура обработки нажатия на кнопку

Скрипт вставлен с помощью системы http://pastie.org/

Затем собираем значения из полей введенных пользователем, заносим их в массив и преобразуем в строку. Преобразование в строку нужно делать потому, что передать в скрипт параметры мы можем только как строку. А также добавляем еще один параметр который запускает скрипт "run".

После того как FB заглючил я переключился в мой постоянный редактор Flash Develop.


Теперь можно скинуть откомпилированный swf-файл в паку Adobe\Adobe Photoshop CS5\Plug-ins\Panels, запустить фотошоп и посмотреть определяется ли он, если же он не определяется, то можно попробовать отключить preloader в настройках компиляции.


На этом с ActionScript 3.0 мы заканчиваем и переходим к связи Photoshop API и JavaScript через редактор Adobe ExtendScript Toolkit CS5

Photoshop API

Полную документацию ко всем функциям Photoshop (API) можно скачать с официального сайта разработчиков Adobe Photoshop Developer Center. 

Запускаем Adobe ExtendScript Toolkit CS5 и получаем доступ к API Photoshop чтобы было проще искать нужные нам команды.

JavaScript and Photoshop

Честно говоря я мне не нравиться JavaScript, убогий какой то язык, особенно не нравиться то, что нету типизации. Ну да ладно, скрипт у нас будет совсем не большой, к тому же это простейший способ доступа к внутренностям Photoshop.

Прежде всего объявление основных переменных и определения единиц измерений (pixels). 

Затем смотрим в каком режиме мы запускаем скрипт: тестовый или рабочий. В зависимости от выбранного режима выполняем ту или иную функцию.

Далее главная функция скрипта которая и делает всю работу.



Ну вот собственно говоря и всео. : )
Под конец осталось рассмотреть функцию формирующую возвращаемый xml-объект, ейо я представляю без особых комментариев, ничего там особого нету.

ANOTHER WORDS

Еще пару слов о написании plug-in. Полезную информацию, с примерами и более глубокими объяснениями вы можете найти здесь или тоже самое в руководстве Photoshop Panel Developer's Guide for Windows (zip).

ВСЕМ УСПЕХА И ПРИЯТНОЙ РАБОТЫ! 

Учитесь всегда и помните: "No Questions = No Answers" 

Если возникнут вопросы

email: vladimirminkin@gmail.com

skype: rimidalv.niknim

* Полезные ссылки:
[1] Kirupa - Senocular - Isometric - О изометрии (AS2.0)
[2] Tile Base Games - Сайт о создании Tile Base Games в среде Adobe Flash - понятия, алгоритмы, pathfinding, но на AS2.0. И тоже самое, но на русском.