Конвертируем графику в ATF правильно

При конвертации png в atf на краях текстур появляются артефакты. Выглядят они так или так. Будут ли они видны, зависит от изображения и от фона, на котором оно отображается. Часто они вообще незаметны, но проблема есть и лучше её исключить изначально. Есть три варианта:

1) Экспорт сразу в atf:

TexturePacker умеет экспортировать атласы в atf, но версии 2. Если нужно использовать atf версии 3, переходим ко второму пункту.

2) Экспорт в pvr и конвертация его в atf:

Также TexturePacker умеет экспортировать атласы в pvr, который с помощью утилиты pvr2atf из AIR SDK можно конвертировать в atf. В настройках TexturePacker  — Texture/Texture Format нужно выбрать PVR(.pvr, Ver. 3) со стандартными настройками. Конвертация производится следующей командой:

pvr2atf.exe -r input.pvr -o output.atf

3) Экспорт в png, конвертация png в pvr, конвертация pvr в atf:

Не всегда есть возможность экспорта атласов в atf или в pvr, например при использовании ShoeBox или GAF. В этом случае нужно произвести две конвертации. Для начала нужно скачать PVRTexTool и установить, выбрав в списке компонентов только PVRTexTool(всё остальное очень много весит и в нашем случае вообще не нужно). После установки нужно открыть %путь_установки%/PowerVR_Tools/PVRTexTool/CLI, открыть папку вашей платформы(win или osx) и достать файл PVRTexToolCLI. С помощью этой утилиты можно конвертировать png в pvr. Этот файл можно сохранить отдельно, а саму установленную программу удалить, так как, кроме файла PVRTexToolCLI, нам от неё ничего не нужно. Конвертируем png в pvr командой:

PVRTexToolCLI -i input.png -o output.pvr -l -f r8g8b8a8 -q pvrtcbest

И возвращаемся ко второму пункту.

Конечно же, можно эти процессы автоматизировать. Делюсь своим ant конфигом для конвертации атласов и gaf.

Автоматизация сборки проекта под несколько платформ с помощью ant

Условная компиляция и ant могут сильно упростить жизнь при разработке проекта под несколько платформ, а именно:

  • сборка под все платформы за один клик;
  • отдельные swf для каждой платформы;
  • независимость от операционной системы (windows или osx);
  • независимость от IDE.

Рассмотрим простейший пример. Что для этого понадобится:

Читать далее «Автоматизация сборки проекта под несколько платформ с помощью ant»

Оптимизация графики для Starling

В этой статье я хочу рассказать об известных мне способах уменьшить вес графики и оптимизировать её. В первую очередь это касается разработки под мобильные устройства с использованием Starling Framework, но также подойдёт и для других движков, фреймворков и платформ. Некоторые пункты подходят не только для AIR.

Текстурные атласы:

Что такое, текстурные атласы, я рассказывать не буду, материалов на эту тему много. Хочу просто рассказать о некоторых, возможно не очевидных, аспектах их создания и настройки при использовании TexturePacker.

1) Обрезка прозрачных пикселей. Включается в разделе Layout — настройка Trim mode. Если у вас есть изображения с большим количеством прозрачных пикселей по краям, вы сможете сэкономить часть места в атласе. Прозрачные пиксели просто обрезаются, а при использовании текстуры из атласа — автоматически добавляются.

trim1

2) Поворот текстур в атласе. Включается флагом Allow Rotation в разделе Layout. Позволяет поворачивать элементы на 90 градусов, тем самым делает атлас максимально компактным. В атлас умещается больше элементов, а иногда уменьшается размер атласа. А чем меньше размер атласа, тем меньше он потребляет памяти. При этом от программиста не требуется ничего — текстуры при использовании отображаются без поворота. Поддерживается в Starling Framework с версии 1.5.

rotation

3) Добавление текстур шрифтов в общий атлас. Если вы используете растровые шрифты, можно добавить их png в атласы, а конфиги(fnt файлы) можно загрузить отдельно. Это позволит уменьшить количество DrawCall`ов на один (Конечно же, тут есть оговорки, но они вне темы статьи).

 

ATF

Формат текстур ATF разработан Adobe специально для использования в Stage3D. Специальные инструменты позволяют конвертировать png в .atf файлы, которые могут занимать в 3-4 раза меньше места на диске, что уменьшает итоговый вес приложения, причём без видимой для глаза потери качества. Также atf текстуры загружаются в видеопамять быстрей, чем png/jpeg и значительно быстрей рендерятся.

Для создания atf текстур есть два пути. Первый — консольная утилита png2atf, которая входит в состав Adobe Gaming SDK. Второй — TexturePacker умеет экспортировать атласы сразу в atf формат, для этого нужно в разделе Output — Texture Format выбрать .atf. Возможно, также существуют какие-то сторонние конвертеры, но я их не встречал.

Делюсь ant конфигом для автоматической конвертации png атласов в atf. Единственное, что нужно сделать — поменять пути.

 

Сжатие PNG

PNG файлы можно сжимать. Для этого существует множество инструментов, но мне больше всего нравится программа PNGGauntlet, она использует несколько разных утилит для сжатия, что позволяет добиться максимального результата. Степень сжатия зависит от конкретного изображения. Сэкономить можно от пары процентов до половины размера или даже больше. В любом случае, стоит попробовать. PNG формат устроен так, что в нём не может быть потерь качества. То есть, сжатое и не сжатое изображение будут выглядеть абсолютно одинаково и занимать одинаковое количество оперативной памяти или памяти gpu, но при этом размер сжатого файла на диске будет меньше, что уменьшит вес билда. Конечно же, лучше использовать atf формат везде, где это возможно, но некоторые изображения всегда будут в png, например иконки для ios/android и сплешскрины для ios — их стоит сжимать.

Хочу обратить внимание на то, что сжимать стоит только те png, которые непосредственно используются в игре. Например, не нужно сжимать изображения, которые будут добавлены в атлас. Также не нужно сжимать атлас, который будет конвертирован в atf, в этом нет никакого смысла. Если же вы используете png атласы в игре, их стоит сжать.

 

Инструменты анимации

Для Starling самым удобным и актуальным из таких инструментов является gaf. Вместо огромных покадровых анимаций он позволяет делать небольшой текстурный атлас из элементов анимации + конфиг для программной анимации. На выходе получается zip архив, который содержит по одному .png и .gaf файлу. Конечно, не для всех случаев он подходит, но при возможности стоит воспользоваться этим инструментом. Для примера — есть swf анимация:

При конвертации этой анимации в атлас для использования в Starling MovieClip получим покадровую разбивку и довольно большое изображение:

bee_atlas1

 

Если конвертировать анимацию в gaf формат, получается очень компактный атлас всего из трёх элементов:

bee_atlas2

Эти элементы автоматически собираются в анимацию.

С gaf немного сложней работать, чем со Starling MovieClip, но оно того стоит. Также есть возможность под названием GAF bundles. Это упаковка нескольких анимаций в один атлас. То есть, получается .zip файл с одним .png, но с несколькими .gaf файлами. Преимущества очевидны.

 

Gaf + ATF

Как я уже говорил, конвертер gaf выдаёт обычный zip архив с .png файлом и конфигом внутри. Можно распаковать архив, сжать png и запаковать обратно. Но лучше пойти дальше. Движок gaf для Starling поддерживает atf текстуры. Для использования этой возможности нужно распаковать архив, конвертировать png в atf и запаковать снова.

 

 Система частиц

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

particles

будет изображение одной частицы:

particle

 

Точно такой же эффект воспроизвести, конечно же, не получится. Но очень похожий — без проблем. К тому же анимация через систему частиц добавляет рандома в эффект, а это для подобных эффектов очень хорошо.

 

При комбинации всех перечисленных приёмов можно существенно уменьшить итоговый вес билда.

Как всегда, исправления и дополнения приветствуются.

Полезные инструменты для as3 разработчика 2

Ещё немного инструментов, которые могут быть полезны для as3 разработчика. Все для работы с графикой.

GAF (Generic Animation Format)

Сайт — http://gafmedia.com/

Инструмент для конвертации swf анимаций в растровые карты спрайтов для последующего использования с популярными движками (Starling, Sparrow, Unity и другие). Для работы со сгенерированными картами спрайтов используется библиотека для соответствующего движка. Есть веб конвертер и десктопный клиент.

gaf

DragonBones

Сайт — http://dragonbones.effecthub.com/

Инструмент для работы с 2D скелетной анимацией. Как и GAF создаёт карту спрайтов для Starling, но позволяет работать с состояниями(бег, ходьба, прыжок) и поддерживает скинирование. Состоит из двух частей: плагин для Flash Professional и библиотека для программирования. Полностью бесплатен.

Spine

Сайт — http://esotericsoftware.com/

Более продвинутый аналог DragonBones с собственным редактором.

ShoeBox

Сайт — http://renderhjs.net/shoebox/

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

BMFont

Сайт — http://www.angelcode.com/products/bmfont/

Редактор растровых шрифтов под Windows.

 

Glyph Designer

Сайт — https://71squared.com/glyphdesigner

Редактор растровых шрифтов под OS X.

 

Littera

Сайт — http://kvazars.com/littera/

Онлайновый редактор растровых шрифтов.

Rotator. Класс индикатора загрузки

Часто бывает нужно отобразить какой-нибудь индикатор, но возиться с рисованием и анимированием не хочется. Вот такую  крутилку, например:

325

Предлагаю простой и универсальный способ решения этой проблемы — класс Rotator.

Первое, что нужно сделать — зайти на сайт preloaders.net, выбрать и настроить любой индикатор. Image type обязательно APNG. После нажатия на Generate под сгенерированной анимацией появятся дополнительные параметры, нужно выбрать Download as sprites и скачать png. Preloaders.net выдаёт странные png файлы огромного веса, которые PNGGauntlet отказывается сжимать. Нужно пересохранить png через фотошоп или любой другой графический редактор, а затем сжать через PNGGauntlet. Таким образом вес png файла уменьшится в несколько раз.

Далее нужно подключить png через embed или загрузить через Loader, создать экземпляр класса Rotator и добавить его в дисплей лист:

Первый параметр конструктора — битмапдата png, о котором говорилось выше, второй — прямоугольник с размерами, указанными при создании индикатора на preloaders.net (Preloader size), x и y прямоугольника нулевые. Также у конструктора есть два необязательных параметра: autoplay:Boolean — стартовать анимацию сразу,  interval:uint — это интервал обновления анимации в миллисекундах, он определяет скорость анимации.

Методы play и pause позволяют запускать и останавливать анимацию соответственно. Когда экземпляр больше не нужен, его нужно очистить через метод dispose.

Судя по тексту, всё это довольно заморочено, но на деле на все эти действия уходит пара минут, если не слишком увлекаться настройкой ротатора на сайте.

ImageAtlas. Класс для работы с картами спрайтов

Суть:

Класс для удобной работы с множеством изображений. Вместо прикрепления большого количества изображений через embed или сборки swc/swf с графикой, используется карта спрайтов(png+xml). Аналог класса TextureAtlas из Starling Framework. Доступ к изображением происходит по имени файла нужного изображения.

Как использовать:

  • Создаём атлас для Startling/Sparrow через TexturePacker. Формат графики — png, Size: Any size(не обязательно), параметры Rotation и Trim mode нужно отключить.
  • Подключаем полученные файлы png и xml через embed или загружем через Loader/URLLoader.
  • Создаём экземпляр класса, в конструктор передаёт битмапдату и xml:

var atlas:ImageAtlas = new ImageAtlas(atlasBitmapData, atlasXML);

  •  Далее можно получать нужный тип данных через соответствующие методы: getBitmapDatagetBitmapgetSpritegetShape. Думаю, имена методов говорят сами за себя. В параметры передаётся имя нужного файла изображения (можно подсмотреть в xml). При вызове любого из этих методов создаётся BitmapData нужного изображения, а затем, в зависимости от вызванного метода возвращается  либо сама битмапдата, либо битмап с этой битмапдатой, либо спрайт с битмапом, либо Shape, в который отрисована битмапдата. В любом случае все битмапдаты кэшируются, то есть при повторном обращении к битмапдате она не создаётся заново, а используется уже созданная, не важно, через какой из перечисленных методов.
  • Когда атлас больше не нужен, его нужно очистить через метод dispose.

Есть у данного класса один явный минус — общая битмапдата атласа всегда находится в памяти, но для проектов под пк в большинстве случаев это не критично.

Для уменьшения веса swf можно пережать png, например через PNGGauntlet.

Возможности AS3 API, о которых не все знают

После прочтения поста от TheRabbit  я решил развить тему.

AS3 API не стоит на месте, постоянно появляются новые возможности. Но, почему-то, не все разработчики о них знают. Здесь я перечислю самые, на мой взгляд, важные из этих возможностей:

  • Уже упомянутый Native Cursor. Flash Player и десктопный AIR могут управлять курсором операционной системы. Причём очень давно. Периодически я встречаю проекты, в которых невооружённым взглядом видно, что курсор представляет собой DisplayObject. Используйте нативный курсор и почувствуете разницу. Материал на тему:  Working with native mouse cursors;
  • Обработка правой кнопки мыши доступна с версии плеера 11.2. События MouseEvent.RIGHT_CLICKMouseEvent.RIGHT_MOUSE_DOWNMouseEvent.RIGHT_MOUSE_UP;
  • Alchemy/FlasCC  — средство для компиляции C/C++ кода в .swc библиотеки, которые можно подключать к Flash/AIR проектам. Даже если вы далеки и C/C++, эта возможность может вам пригодиться, так как часто такие библиотеки будут работать значительно быстрей, чем AS3 код;
  • Нативные кодировщики JPEG и PNG. Несмотря на их существование многие разработчики продолжают использовать давно устаревшую библиотеку as3corelib. Те, кто знает о предыдущем пункте, используют библиотеки Alchemy/FlasCC. Но нативные кодировщики быстрей и того и другого. Как использовать: метод encode() класса BitmapData, классы JPEGEncoderOptions и PNGEncoderOptions;
  • Встроенная поддержка JSON. Так же, как и кодировщик изображений, нативный JSON работает быстрей любых библиотек. Класс: JSON;
  • Workers. Пусть костыльная и довольно неудобная, но многопоточность всё же есть, и в некоторых случаях её использование очень даже оправдано. Моя статья на эту тему;
  • Поддержка игровых устройств. В свои игры можно добавить поддержку игровых контроллеров, это не сложно. Класс: GameInput;
  • StageVideo. Использует аппартное ускорение для вывода видео, поддерживается как во FlashPlayer, так и в AIR(в том числе и в мобильном). Класс: StageVideo;
  • StageText. Использует нативные текстовые поля в AIR для мобильных устройств. Позволяет полноценно работать с возможностями системной клавиатуры, в отличии от обычного TextField. Класс: StageText;
  • Fullscreen с поддержкой клавиатурного ввода. С версии плеера 11.3  появился StageDisplayState.FULL_SCREEN_INTERACTIVE;
  • ATF текстуры. Adobe Texture Format — специально разработанный формат текстур для Stage3D. Быстрей других типов текстур загружается в память GPU и занимают меньше памяти. Большинство современных движков поддерживают ATF. Конвертер png2atf есть в Adobe Gaming SDK, документация по нему там же.

Чтобы быть в курсе новых возможностей, просто следите за официальным описанием релизов.

Сборка ane с помошью ant

В своём уроке по созданию Native Extension я давал довольно замороченный способ сборки ane файла,  который состоял из следующих шагов:

  • компиляция swc через Flash Pro;
  • распаковка swc через 7-zip и перетаскивание файлов по нужным папкам;
  • сборка java классов в jar библиотеку через Eclipse;
  • сборка ane через командную строку.

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

Относительно недавно я открыл для себя инструмент под названием Apache Ant и жалею, что не обратил на него внимания раньше. Он позволяет проделать все эти шаги в один клик. Если кратко, то ant — это утилита для автоматизации компиляции и сопутствующих процессов(работа с файлами, изменения кода и т.д.). Сборочный конфиг представляет собой обычный xml. Для его запуска нужно выполнить команду ant -f build.xml. Сам по себе ant довольно прост и при желании его можно освоить за один вечер, хотя и придётся подглядывать в документацию.

На примере расширения Android-Notification-Extension-ANE я кратко расскажу, как это работает.

Читать далее «Сборка ane с помошью ant»

Leap Motion

Leap MotionПару месяцев назад ко мне приехала заветная коробочка. Ещё до её приезда у меня была масса идей, что с ней делать, но после просмотра демок и попыток что-то написать самому, почти все пришлось отбросить. Работало оно ужасно. По началу я думал, что софт ещё очень сырой и нужно ждать, когда допилят, но с каждым обновлением прошивки девайс тупил всё больше. Я даже написал в техподдержку, где мне сказали, что это аппаратный баг и выслали новый leap. К его приезду вышла версия софта под номером 0.7.9. При запуске программа стала ругаться на то, что девайсу мешает слишком яркий свет, хотя на самом деле, свет у меня довольно тусклый, но практически над столом висит люстра. После выключения света всё заработало отлично — и новый девайс, и тот, который приехал раньше. Сомнительное удовольствие: выключать свет и программировать в темноте. Собственно в темноте я написал несколько демок,  некоторые из них заснял (видео под катом).

В целом моё мнение следующее: в том виде, в котором leap motion сейчас, он подходит только для «поиграться». Не думаю, что кто-то будет использовать его в повседневной жизни постоянно. Возможно, было б удобно, если бы он был встроен в клавиатуру и никак не выдавал бы себя физически. В таком случае будет удобно комбинировать его с клавиатурой и мышью в повседневной работе

Есть несколько критичных минусов:

  • Девайс смотрит снизу вверх, следовательно, если один палец находится над другим, он теряется;
  • Девайс должен лежать перед клавиатурой или на клавиатуре, что само по себе довольно неудобно;
  • Боится яркого света;
  • При работе ощутимо нагружается cpu;
  • Через несколько минут активного использования руки начинают уставать.

Читать далее «Leap Motion»

Livecoding with COLT

colticonСовсем недавно команда под предводительством Евгения Потапенко показала миру инструмент для лайвкодинга под названием Code Orchestra Livecoding Tool (COLT).  Штука получилась просто волшебная, лично я от неё в восторге. Почитать можно на официальном сайте. Пока что, есть некоторые баги, но они очень оперативно исправляются. Ещё не все возможности, которые были заявлены, реализованы. Они появятся чуть позже.

Также объявлен конкурс, в котором можно выиграть одну из пятидесяти лицензий на программу.

Моя скромная работа.

Native extensions

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

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

Android Communication Extension. Возможности:

  • набрать номер телефона;
  • позвонить по номеру телефона;
  • отправить смс;
  • отправить email.

Android File Extension. Возможности:

  • открыть локальный файл любого типа в нативном android приложении.

Android Notification Extension. Возможности:

  • показ Toast;
  • показ AlertDialog (без кнопок, или с кнопками — от 1 до 3);
  • показ ListDialog с любыл количеством кнопок.

Android Sharing Extension. Возможности:

  • поделиться текстом;
  • поделиться изображением.

Инструкции и примеры использования есть по ссылкам.

Android AIR notification ane

Залил на github пример Native Extension для Android под названием Notification Extension.
Расширение позволяет отображать нативные Alert и Toast.

https://github.com/illuzor/NotificationExtention

Вот подробный урок, ради которого расширение и писалось.

DialogManager — библиотека для отображения диалоговых окон

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

Она представляет собой менеджер диалоговых окон.

Особенности:

  •  библиотека очень проста в работе;
  •  размер диалога подгоняется автоматически в зависимости от количества текста и количества кнопок;
  • при изменении размера сцены менеджер автоматически приспосабливается и корректирует размер фона и положения диалога;
  • возможность показывать только текст (информационные сообщения) и текст вместе  с кнопками;
  • очередь диалоговых окон.

Читать далее «DialogManager — библиотека для отображения диалоговых окон»

Удобный доступ к методам класса загруженного swf

Иногда работа с классами из загруженного .swf файла бывает не очень удобной из-за того, что загружающий .swf не знает классов загружаемого.

Читать далее «Удобный доступ к методам класса загруженного swf»

Полезные инструменты для as3 разработчика

Чем больше я работаю с as3, тем больше различных вспомогательных инструментов встречаю. Странно, но некоторые разработчики о них даже не догадываются.

Это мини обзор таких инструментов.

Читать далее «Полезные инструменты для as3 разработчика»