
Создание iOS приложения при помощи Flash CS5.5 + AIR 2.7
Вступление
Здравствуйте, джентльмены.Тема портирования флэш-игр на мобильные платформы с минимальными изменениями очень интересовала меня, но обсуждалась в нашем сообществе только вскользь, потому попробую рассмотреть её чуть подробнее, отталкиваясь от своего крайне скудного, но уже опыта.
Потому под катом — краткий отчёт о портировании одной из моих игр на iPhone.
В первую очередь, позвольте представиться. Меня зовут Сергей, я живу в Киеве и работаю в департаменте ИТ головного офиса одного из многочисленных иностранных банков, действующих на территории Украины. Флэш-играми заинтересовался, как и многие другие, случайно наткнувшись на статью «Путь инди» Вадима Старыгина и на краткий отчёт о годичной деятельности Джонни-К, за которые им очень благодарен. К настоящему моменту с удовольствием учусь делать хорошие игры, а пока имею несколько незамысловатых игрушек, из которых пара была спонсирована. Речь пойдёт о портировании одной из них под iOS.
В двух словах о процедуре
Вышедший в 2011 году Adobe Flash CS5.5 в отличие от предыдущих версий, поддерживает «из коробки» не только возможность сборки приложения AIR для Android, но и для iOS без каких-либо дополнительных ухищрений. В целом, суть процедуры довольно проста: пишем приложение, оптимизированное под (относительно) маломощное железо, небольшое разрешение экрана и тачскрин, собираем в AIR, подписав персональным сертификатом, и вуаля! — заливаем на телефон/планшет и играемся вдоволь.
А теперь немножко практики.
Stack It Up!
В начале этого лета я продал за $2000 эксклюзив на небольшую игрушку "Stack It Up!" известному Bored.com. Мне очень нравятся игры, в которых можно что-то строить, потому в этой игрушке мы сооружаем башенку из наваленных друг на дружку придурковато улыбающихся жёлтых блоков, которую затем пытаются развалить вылетающие из-за края экрана чёрные шарики. Своим идеалом я считаю стиль World of Goo и Angry Birds, и здесь хотел попробовать сделать что-то яркое и хоть немного вызывающее улыбку, несмотря на убогое исполнение. Надеюсь, получилось.
После множества допиливаний Антон Ушкин — менеджер по играм из Bored — предложил мне заодно сделать и её iPhone-версию, объяснив, что раздел мобильных игр на их портале быстро растёт и сулит неплохой доход (к слову, в начале июня там было только две игры, а сейчас, в конце августа, их уже под двадцать). Намекнул, правда, что оплата, мол, будет меньше, но меня это не смутило — опыт важнее; тем более, что за него вообще платят (да и особенно учитывая то, что основной источник дохода вашего покорного слуги — не флэш, а ежедневное планктонство в офисе).
Регистрация в Apple
Шаг вовсе не обязательный, но упомяну о нём.Оформив за $100 подписку разработчика, мы получаем возможность генерировать provisioning profile'ы и сертификаты, которыми подписываем свои приложения (а это, в свою очередь, необходимо для их установки на устройство), затем от своего же аккаунта отправляемые на AppStore.
Но в данной ситуации издателем выступает Bored (т.е. заливается на AppStore приложение из-под его аккаунта); сертификат и профайл тоже генерирует и предоставляет разработчику он. Ну а на период разработки и тестирования вполне можно использовать любой липовый сертификат на джейлбрейкнутом устройстве. Например, этот.
Но на всякий случай я решил зарегистрироваться. Вдруг, мол, пригодится. Весь процесс занял порядка полутора недель. При регистрации как жителю СНГ пришлось распечатать и заполнить от руки форму с платёжной информацией, которую затем отправить по факсу в США (ну ей-богу, как в каком-то ЖЭКе или поликлинике — получить справку на специальной форме, и обязательно с треугольной печатью), однако дальше в Apple отработали довольно быстро, сняли деньги с моей карты, номер которой я указал в этой самой бумажке, и зааппрувили мою учётную запись в дев.центре.
Толку с этого аккаунта пока не так и много. Разве что, сделало +10 к ЧСВ, да могу скачать iOS 5 beta и всякие SDK, толку с которых за неимением в пределах досягаемости MacOS — маловато.
Редизайн и оптимизация
Оригинальная игра имела разрешение 550х450, в то время как разрешение дисплея айфона несколько меньше — 480х320. Размерами дисплейчик и так небольшой, а пальцы, которыми в него тычут, бывают весьма пухлыми, потому я постарался обойтись без уменьшения каких-либо элементов интерфейса или игрового поля, постаравшись просто распихать всё как можно более рационально по разным концам экрана, не забыв, разумеется, и о дорогом спонсоре с его логотипом и ссылками :-).Управление переделывать практически не пришлось — буквально самую малость, заменив штуки вроде «щелкни по объекту на боковой панели, а потом щелкни там, куда он должен упасть» на «перетащи объект с боковой панели туда, куда хочешь его положить». Никакие специфические классы для работы с сенсорным дисплеем не пригодились — стандартных mouse event'ов хватило с головой.
Вот с графикой было хуже. Все объекты векторные (в них там и элементов-то всего ничего — рот с парой зубов да немножко глазиков, каждый из которых следит за движениями мыши), и их отрисовка для ПК не составляла проблем. А вот айфону пришлось с ними потяжелее.
Во-первых, в настройках AIR for iOS можно выбрать используемое разрешение дисплея: стандартное или высокое (retina display же). В высоком разрешении всё смотрится даже немного лучше, чем на мониторе ПК (пушо крохотное и аккуратное), но приложение сильно тормозит, и выдаёт со всего одним-двумя объектами на игровом поле что-то порядка 10 FPS (не измерял, ориентируюсь по ощущениям). А в стандартном разрешении любая диагональ выглядела просто отвратительно. О зазубренные грани повернутых под углом прямоугольников, казалось, можно не просто порезаться, а просто-таки вскрыть о них вены, не вынеся всего этого визуального ужаса. Скриншотов того ужаса нет — и хорошо. Плюс тормозит, когда на экране накапливается 5-6 объектов.
Потому каждый объект пришлось переделывать в растр. Стандартная функция Flash «Convert to bitmap» сильно размывала полученное изображение; копировать в фотошоп и аккуратно обкусывать получилось значительно качественнее.
После растрирования игровых объектов производительность заметно выросла, но была ещё не такой, как хотелось бы. Тут уже полез оптимизировать код как мог (радиус кривизны рук вашего покорного слуги превышает допустимые нормы, потому написанный им изначально код жалобно плакал и молил об оптимизации). И там ещё много чего нужно править!.. Но по крайней мере убрал создание переменных внутри циклов, убрал отовсюду лишние listener'ы, и просто попросил игру не делать никаких бесполезных глупостей стопицот раз в секунду.
С хранением данных проблем не возникло. Поджимаемый временем, я решил не заигрывать с SQLite, и обойтись обычными SharedObject'ами. Не, нуачо. Работает? Работает. Не удаляется само по себе? Не удаляется.
А со звуком вообще всё было отлично. Там даже не пришлось ничего трогать. Всё работало и так (там и звука-то — только музыка)
Игра сейчас ожидает аппрува в AppStore — надеюсь, всё будет хорошо. После аппрува с удовольствием поделюсь с вами ссылкой, джентльмены.

Выводы
Вроде хотелось ещё всякого написать — и впечатлений, и деталей, но, думаю, пока что хватит этого — может, вообще, шапками меня закидаете, мол, вылезло тут зелёное непойми что и начало умничать, дядькам солидным рассказывать, как игры программировать. Во-вторых, я ведь только учусь программировать, и потому ещё оооочень мало знаю о хорошем коде; с огромным желанием хотел бы услышать советы старших товарищей на эту тему.Но, всё же, какие выводы я для себя сделал после того, как поработал над этим портированием:
- Стараться изначально оптимизировать код где только можно. Не ставить никаких лишних конструкций на «а вдруг пригодится?». Всё равно забуду о них! А если что-то понадобится — не отвалится от меня кусок, прикручу уже именно тогда, когда нужно будет. Всё равно лучше, чем впоследствии рыться в готовом коде, ежеминутно удивляясь: «А это я здесь зачем оставил?..», «А это что здесь делает?..»
- Интерфейс стараться изначально разрабатывать так, чтобы его можно было без особых проблем переделать под сенсорный дисплей. Мало ли что.
- Не злоупотреблять с векторной графикой.
- Обучиться, в конце-концов, object pool'ингу!
Напоследок...
Ах, да, вспомнил ещё одну интересную вещь! В AIR для iOS есть различные режиме publish'а (http://www.as3dp.com/wp-content/uploads/2011/08/Fig2.png). Во время разработки и тестирования наиболее логичным кажется использование первого или второго (quick publish for device testing/debugging), да? Так вот, я был очень удивлён, когда запаблишив приложение используя последний режим «Deployment — Apple AppStore», увидел, что оно работает значительно (!) быстрее, чем будучи скомпиленным в первом режиме. Правда, и собирается в мильён раз дольше.И ещё одна хорошая штука в AIR для iOS, которую в AIR для Android обещают ввести только начиная с версии эйра 3.0: рантайм интегрируется прямо в приложение. Т.е. если мы пытаемся запустить впервые AIR-приложение на андроиде — ОС разово лезет в инет за рантаймом. А вот айфону ничего дополнительно докачивать не нужно — олл, так сказать, уже инклюзив.
Я буду очень рад любым комментариям, дополнениям, мнениям и вообще.
Спасибо за внимание!
UPD: Несколько экспериментов, кстати, показало, что запускаются приложения, собранные при помощи AIR 2.7 только на iOS 4+
- +29
- SeeD
Комментарии (25)
Тоже давно хотелось портануть что-нибудь лёгенькое эксперимента ради :)
В процессе чтения возникло пару мыслей не по теме:
Прямую можно считать окружностью с бесконечным радиусом кривизны. Так что, чем кривее руки, тем их радиус кривизны меньше :)
А чтобы не удивляться, «А это что здесь делает?..», я себя приучил ставить комментарии вида //TODO: здесь будет взрыв. Затем во Flash Develop все такие заглушки можно просмотреть, нажав View -> Tsk List
Может, совпадение, конечно, и причина в чём-то ином — я этот appsync ставил чуть ли не сразу после покупки iPod, когда ещё не особо знал, где там вообще можно экспериментировать. А сейчас, имея девелоперский аккаунт, уже не имею нужды в левых сертификатах/профайлах, потому что генерю их себе сам.
Я просто изначально читал какой-то пост на Хабре, так там дело озвучивалось так, словно достаточно одного только джейлбрейка.
Заголовок:
Теоретическая часть:
Процесс портирования:
Штука, норм пост, но это называется адаптирование/оптимизация под мобильные устройства, а не портирование, т.к. AIR и так мультиплатформенный.
О! Она была портирована с Флэш на Эйр :)
Шарики вылетают либо справа, либо слева, либо с обеих сторон. Это выбирается каждый раз рандомно.
Потом, когда сторона выбрана, координата X для точки вылета одинакова для всех шариков, а Y постепенно опускается сверху-донизу. Выглядит топорно, но работает :)
Меня немного удивляет, что я не вижу в официальной документации по эйру список поддерживаемых им устройств. В What's new in Adobe AIR 2.6 нашёл следующий раздел:
Supported iOS devices
As part of supporting the latest and most powerful Flash runtime features on iOS, we have chosen to drop support for the original iPhone and the iPhone 3G, along with iPhone OS 3. AIR 2.6 supports building apps for the following iOS 4 devices:
iPhone 3GS and iPhone 4
iPod Touch (3rd Generation and 4th Generation)
iPad
А по поводу 2.7 рекомендую глянуть сюда:
http://forums.adobe.com/thread/878657 (кстати, у меня почему-то с моей «Воля-кабель» не открывается форум на адоб.ком, приходится ходить через cameleo.ru)
То есть на iPod touch — 3 с iOS 4.2 всё должно быть ок. Но это не так и причина тому вот этот код из application.xml:
Без него всё ок. То есть выходит что AIR 3.0 отрубит гораздо бОльшую часть iOS устройств, существующих на данный момент. Грустно. Кстати никто не набродил на статистику сколько хотя бы примерно каких i-устройств в процентном соотношении существует на данный момент?
In addition to the Adobe Flash Professional CS5.5 system requirements, applications created using AIR for iOS will only run on devices that support iOS 4 or higher and iPod Touch 3rd & 4th generation, iPhone 3GS and iPhone 4, and iPad. Applications created and published from Flash Professional CS5.5 for Android platforms will run on devices that run Google Android™ 2.2 operating system or higher. For a list of the latest certified devices, please visit www.adobe.com/flashplatform/certified_devices/.