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

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

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

Читать полностью »

Опубликовано 17.08.2015 в 20:58 · Автор illuzor · Ссылка · Написать комментарий
Рубрики: Other · Теги: , , ,

Оптимизация графики для 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

 

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

 

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

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

Опубликовано 30.03.2015 в 15:06 · Автор illuzor · Ссылка · 2 комментариев
Рубрики: air, flash, графика · Теги: , , , ,

Полезные инструменты для 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 и библиотека для программирования. Полностью бесплатен.

dragonbones

Spine

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

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

spine

ShoeBox

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

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

shoebox

BMFont

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

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

 

Glyph Designer

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

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

 

Littera

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

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

 

Опубликовано 04.02.2015 в 23:12 · Автор illuzor · Ссылка · Написать комментарий
Рубрики: инструменты · Теги: , , , , , ,

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.

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

Опубликовано 27.12.2014 в 00:10 · Автор illuzor · Ссылка · Написать комментарий
Рубрики: программирование · Теги: , ,

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

Суть:

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

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

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

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

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

Опубликовано 26.12.2014 в 00:27 · Автор illuzor · Ссылка · Написать комментарий
Рубрики: программирование · Теги: , ,

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

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

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

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

 

Опубликовано 22.02.2014 в 18:17 · Автор illuzor · Ссылка · Написать комментарий
Рубрики: air, flash · Теги: , ,

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

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

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

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

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

Читать полностью »

Опубликовано 07.12.2013 в 23:18 · Автор illuzor · Ссылка · 7 комментариев
Рубрики: air · Теги: , , , ,

Leap Motion

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

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

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

Читать полностью »

Опубликовано 01.06.2013 в 15:58 · Автор illuzor · Ссылка · Один комментарий
Рубрики: flash, другое · Теги: ,

Livecoding with COLT

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

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

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

Опубликовано 18.05.2013 в 01:37 · Автор illuzor · Ссылка · Написать комментарий
Рубрики: flash, программирование · Теги: ,

Native extensions

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

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

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

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

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

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

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

 

Опубликовано 20.04.2013 в 15:24 · Автор illuzor · Ссылка · 3 комментариев
Рубрики: air, mobile · Теги: , ,

Flash platform update

Flash Player обновился до версии 11.6, а AIR и соответственно AIR SDK до версии 3.6.

Вроде, ничего необычного, но одна интересная штука есть. На странице загрузки AIR SDK написано «Adobe AIR SDK & Compiler».

Без проблем, конечно же, не обошлось. После распаковки AIR SDK в папку Flex SDK при компиляции проекта компилятор ругался на один из файлов спарка. При чём тут он, совершенно не понятно. Причём ругался только один раз: первый раз ругается, второй — компилируется без проблем. Стоило чуть изменить код — снова ругается. Помню, раньше была подобная проблема и решаласть откатом с JRE 7 на JRE 6. В данном случае я испробовал несколько версий JRE, проблема не исчезла. Я работаю во FlashDevelop и дело в том, что mxmlc всё ещё остался у власти.

Раз старый компилятор тупит, обратимся к новому. Немного гугления и инструкция по активации ASC2 найдена. Нужно в каталоге Flash Develop заменить файл Tools\fdbuild\fdbuild.exe на пропатченную версию, предварительно сделав резервную копию. Наверняка в новых версиях FD сделают удобный способ переключения между компиляторами.  После этого в консоли мы увидим mxmlc-cli.jar вместо mxmlc.jar. ASC2 более строг, чем mxmlc. Перед использованием нужно внимательно ознакомиться с его особенностями. Также стоит взглянуть на обзорную статью от Thibault Imbert.

Некоторые старые проекты с новым компилятором скомпилировались без проблем. Те, которые компилироваться отказываются, можно довольно быстро вернуть к жизни изменениями кода, следуя описанию компилятора и описаниям ошибок.

Из главных особенностей ASC2 можно выделить оптимизацию кода, сжатие LZMA, Inline функции, и конечно же компиляция с ключём -advanced-telemetry для Adobe Scout. В общем, штука хорошая.

Опубликовано 13.02.2013 в 20:44 · Автор illuzor · Ссылка · 7 комментариев
Рубрики: flash · Теги: , ,

Android AIR notification ane

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

 

 

 

 

 

 

 

 

 

 

 

 

https://github.com/illuzor/NotificationExtention

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

 

Опубликовано 05.11.2012 в 20:44 · Автор illuzor · Ссылка · Написать комментарий
Рубрики: mobile · Теги: , , , ,

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

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

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

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

Читать полностью »

Опубликовано 26.08.2012 в 21:46 · Автор illuzor · Ссылка · 3 комментариев
Рубрики: программирование · Теги: , ,

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

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

Читать полностью »

Опубликовано 06.08.2012 в 17:02 · Автор illuzor · Ссылка · 5 комментариев
Рубрики: программирование · Теги: 

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

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

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

 


Читать полностью »