indie game developer
0,0
рейтинг
16 сентября 2015 в 09:05

Разработка → Как подружить HTML5 с мобильными ОС tutorial

Ты совсем рехнулся с этим WebGL!”, как-то заявил мне знакомый разработчик: “Изучаешь новый движок ради одной платформы?!

А ведь и, правда, работая с Unity, я получаю доступ ко многим платформам. Работая с Blend4Web — только к одной. Крупные компании могут позволить себе использовать несколько технологий для качественного портирования игры, в случае инди — это большая проблема.

И что, разрабатывая браузерный проект не с Unity, я ставлю крест на остальных платформах? Честно, этот разговор сильно поколебал мою решимость. Но недавно я услышал о фреймворках, с помощью которых можно чудесным образом портировать HTML5 на множество мобильных платформ.

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


Преамбула


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

Основная задача — найти фреймворк для простой развертки WebGL-приложения на популярных мобильных платформах. Желательно, чтобы инструментарий был бесплатным или хотя бы, умеренным в денежных запросах.

Как оказалось, в сети Интернет можно найти большое количество фреймворков для поставленной задачи: Appcelerator Titanium, NimbleKit, MotherApp, PhoneGap, CocoonJS, Intel XDK. Конечно, это неполный список, но именно с этими инструментами я попытался разобраться. В итоге по разным причинам была отсеяна большая часть. Где-то была “мутная” документация и лицензия, один из фреймворков непозволительно долго устанавливался и тянул из сети кучу библиотек, третий вообще рассчитан только на одну операционную систему.

Для тестирования я выбрал готовое приложение из SDK Blend4Web, которое так и называется “Простое приложение”. Я скомпилировал его в виде одного файла HTML со всеми зависимостями. Тестовые сборки были снабжены индикатором FPS в углу экрана.

Кандидаты оценивались по нескольким критериям: простота интеграции, поддержка платформ, конечное быстродействие. В итоге для меня несомненными лидерами стали PhoneGap и CocoonJS. Причем каждый из них оказался хорош для сборки под определенные платформы, но обо всем по-порядку.

PnoneGap + Blend4Web


Первое, что мне посоветовали посмотреть — это детище Adobe Systems.

“PhoneGap — бесплатный open-source фреймворк для создания мобильных приложений.” Так гласит вступление на странице вики, посвященной этой технологии.

Когда я слышу слово “бесплатный”, особенно с привязкой к крупной компании, то невольно начинаю искать ту самую запрятанную платность. В действительности все очень просто. PhoneGap изначально основан на Apache Cordova, который является open source фреймворком для разработки мобильных приложений. По своей сути PhoneGap и Cordova одно и тоже, только первое предоставляет более удобные инструменты. Adobe Systems отбивает потраченные ресурсы за счет облачных услуг по сборке. Политика компании такова, что эти самые услуги могут быть бесплатными, правда, с некоторыми ограничениями. Впрочем, ограничения (1 приватное приложение и 50 мб на размер) вполне приемлемы для инди-разработчика.

PhoneGap способен собирать проекты под все популярные мобильные платформы: iOS, Android, Blackberry, Windows Phone 8, Ubuntu. Судя по таблице возможностей, поддерживаются основные технические и программные элементы мобилок, такие как акселерометр, GPS, сеть и т.д.

PhoneGap это обвертка вокруг HTML5, своеобразный мостик между браузерной программой и нативным API. Поэтому быстродействие скомпилированного приложения вплотную зависит от возможностей компонента WebView в системе. К сожалению, не все платформы обеспечивают работу Webview с WebGL. Особенно это касается Android, но, как говорится, пока не попробуешь — не узнаешь.

Работать с PhoneGap можно двумя способами: через командную строку или с помощью десктопного приложения. Вот только компиляция исходников возможна с установкой SDK мобильных платформ. Причем, для iOS необходим Mac или его эмулятор (у меня Windows). Все проблемы вполне решаемы, если использовать компиляцию в облаке Adobe.

Да простят меня апологеты командной строки и желающие услышать пространные объяснения команд CLI. Здесь я пошел по пути наименьшего сопротивления и выбрал “лузерное” решение. В конце концов, мне интересны практическая работоспособность PhoneGap и кратчайший способ развертки проекта.

Для работы с фреймворком необходимо скачать специальное приложение PhoneGap Desktop App. Эта программа нужна для тестирования своего проекта в окружении фреймворка. Она не умеет билдить, с ее помощью вы не отошлете код на сервера Adobe, а только сможете проверить его работоспособность.

Итак, для удачного симбиоза Blend4Web с PhoneGap понадобиться создать новое приложение с помощью программы Desktop App. Конечно, это можно сделать и вручную, но согласитесь, что так будет быстрее и без ошибок. В принципе достаточно щелкнуть по ссылке Create new PhoneGap Project и программа создаст в указанной директории еще целую кучу файлов и папок.

image

Большинство папок пустые, кроме WWW. Это место для хранения собранного приложения WebGL и управляющих скриптов PhoneGap. По умолчанию здесь уже есть тестовый пример, который можно смело удалить.

Создать обвертку на удивление просто — понадобится один файл HTML и один JavaScript. Ну и, естественно, свой шедевр.

Файл HTML (index.html):
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    </head>
    <body>
<input type=button value="Start Blend4Web" onclick="{location = 'trdd_blend4web.html?show_fps'}">
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Это ключевой файл index.html. Обратите внимание на объявление скриптов JS. Первая строка с cordova.js необходима для PhoneGap, причем физически этого скрипта не существует. Возможно при сборке приложения, он автоматически подключается компоновщиком, а вот второй скрипт — придется писать самим. Минимально он может выглядеть так:
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

Скрипт index.js — это копия из официальной документации. Как говорится, работает и ладно. Никаких изменений я в него не вносил.

Собственно приложение Blend4Web (напоминаю, что для упрощения интеграции я скомпилировал его в виде единого файла HTML со всеми зависимостями) запускается при нажатии кнопки «Start Blend4Web», которая описана в index.html.

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

Следующий этап — компиляция пакетов. Тут опять-таки два варианта: вручную с установкой нужных SDK или в облаке разработчика. Разумеется, я выбрал второй.

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

image

По умолчанию мне удалось получить пакеты для Android и Windows Phone. iOS не собрался, так как потребовалось ввести сертификат и профиль, чего у меня на тот момент не было. В остальных случаях имеется возможность загрузить в облако данные для сборки (подписи, ID продавца и т.п.).

Все остальные настройки платформ содержатся в файле config.xml, который находится в корне проекта PhoneGap.

Результаты тестирования на реальных устройствах были неоднозначными. Провальными оказались попытки запуска приложения на Android. Программу я проверял на 4-х различных устройствах и то, что ни на одном так и не «завелось», навеяло на грустные размышления.

Конечно, я бросился искать причины столь вопиющего несоответствия заявленным возможностям PhoneGap. Оказалось все просто — поддержка WebGL для WebView появилась только с версии Android 5.х. Как вы понимаете, не все являются обладателями новейших систем Android. И мой случай — это доказывает. Хотя частично, это должно работать, начиная с версии 4.4.

Таким образом, связка PhoneGap+WebGL+Android оказалась неработоспособной. Однако, это не означает, что для других платформ PhoneGap не годится. Так, к примеру, iOS поддерживает WebGL для WebView еще с седьмой версии. В большинстве случаев устройства Apple обновляются при выходе апдейтов, чего не скажешь об Android. Я не утерпел и попытался проверить работоспособность сборки под iOS.

Проблема заключалась в том, что у меня отсутствует Mac, а тратить время на установку виртуальной машины и запуск в ней Mac OS не хотелось. Я нашел способ создать цифровую подпись для iOS в системе Windows. Поэтому, если у вас нет компьютера Apple, но необходимо собрать проект под iOS — читайте дальше.

Итак, PhoneGap для сборки приложения под iOS требует Certificate (p12) и Provisioning Profile. Для получения этих файлов необходим аккаунт разработчика Apple и реальное устройство, а также большое количество терпения.

Сначала нужно зарегистрировать устройство, которое будет использоваться для тестирования приложения. Это выполняется в окне “Certificates, Identifiers & Profiles”.

image

Самый простой способ узнать UDID устройства — это открыть iTunes и посмотреть в панели Devices.

image

Теперь понадобится скачать и установить OpenSSL с сайта slproweb.com. Я воспользовался несколько более старой версией Win32 OpenSSL v1.0.1p Light. Та, которая шла по умолчанию, нормально не установилась. И да, не забудьте перезагрузить компьютер!



Вся работа с OpenSSl выполняется в терминале Windows. Откройте его и и перейдите в папку BIN, которая находится в директории OpenSSL-Win32. В моем случае программа установилась на диск C.

Сначала генерируется ключ и CSR файл:
openssl genrsa -out mykey.key 2048
openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest  -subj "/emailAddress=yourAddress@example.com, CN=Name, C=RU"

Во-второй строке нужно указать свой email, который используется для доступа к аккаунту Apple Developer, имя и регион. Если все пройдет нормально, то в папке BIN появится файл с расширением CSR.

Файл требуется загрузить в аккаунт Apple, чтобы получить в ответ сертификат. Это также выполняется в окне “Certificates, Identifiers & Profiles”. Только необходимо выбрать пункт Development (см. рис). Далее просто загружаете файл CSR с помощью формы на странице и в ответ получаете ссылку на сертификат .CER.



Однако, это еще не все, ведь PhoneGap требует сертификат в формате p12. Конвертация также выполняется силами OpenSSL.

Сначала конвертируете в формат PEM:
openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM

Затем уже в p12:
openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out ipad_dev.p12

Программа попросит вас ввести пароль для сертификата, который в дальнейшем будет использоваться при сборке приложения в PhoneGap.

Теперь вы стали обладателем сертификата в формате p12, но еще необходимо создать Provisioning Profile. Это уже легко. Выберите опции, как на рисунке ниже. Укажите тестовое устройство и панель разработчика позволит скачать созданный профиль.



Вот и все. Полученные файлы загружается на сервер PhoneGap через соответствующую форму (см. рис).



А теперь долгожданные результаты! Тестовая сборка Blend4Web прекрасно установилась на iPad и выдала 60 fps. Правда было странное свечение вокруг объектов, но возможно это вызвано использованием нестабильной версии движка, которая была у меня установлена в тот момент. Самое главное — приложение Blend4Web без проблем запустилось в системе iOS, а это значит, что дорога на аппараты Apple открыта.

CocoonJS + Blend4Web


Обескураженный плохими результатами PhoneGap для Android, я нашел в сети Интернет его прямого конкурента CocoonJS компании Ludei. На главной странице сайта обещалось куда более высокое быстродействие, чем у PhoneGap, а также различные вкусные плюшки, такие как мультиплеер, модули рекламы, аналитика, пушы и другое. Интересно, что мне не удалось найти прайса на эти услуги.

Главное отличие CocoonJS от PhoneGap — это подход к использованию WebView. Если последний ориентируется на системный, то детище Ludei предлагает интегрировать в приложение свой собственный просмоторщик. Это значительно увеличивает размер конечного файла, но зато гарантированно работает на всех платформах и версиях API.

CocoonJS поддерживает не все мобильные платформы, а ограничивается андроидом и iOS, т.е. Windows Phone в списке нет. Зато имеются Ouya, Pokki, Tizen, Android Wear.



Интересно происходит создание приложения с CocoonJS. В отличие от PhoneGap не нужно скачивать SDK или писать какой-либо код обвертки. Все действия по сборке пакетов выполняются на серверах Ludei. Это конечно удивительно, так как предлагаемые социальные функции требуют определенного механизма взаимодействия между своим кодом и CocoonJS.

Разработчики фреймворка предлагают специальную утилиту для тестирования приложения WebGL сразу в нужной ОС. Программа называется CocoonJS Launcher и доступна для загрузки в магазинах Google Play и iTunes. С ее помощью можно запустить свою программу в окружении фреймворка без компиляции. Я пробовал использовать этот лаунчер, но ничего не получилось. Происходил вылет или зависание оболочки. Возможно это объясняется недостатком оперативной памяти (на используемом в тот момент тестовом устройстве было 512 мб). Кстати, компилированная программа впоследствии прекрасно работала на этом же девайсе.

Итак, для компиляции приложения Blend4Web требуется упаковать все файлы в архив и загрузить на сервер Ludei. Основная настройка выполняется в окне Compile Project (см. рис. выше). Самое главное — это выбрать правильный рендер из предложенного списка: Canvas+, WebView+, System WebView. В случае Blend4Web требуется WebView+ (это касается и всех остальных движков WebGL). Оставшиеся два варианта — это использование аппаратной прорисовки канвы или системного API.

Есть некоторое отличие от PhoneGap при настройке пакетов (логотипы, ID и т.д.). Все это выполняется в панели Ludei. Набор возможных опций очень минималистичный и не покрывает стандартные запросы, например, при создании приложения Android. Так, не удастся установить специальные разрешения (permissions). Вы можете только загрузить логотипы, подписать приложение, выбрать версии и все.

Чуть позже я нашел способ корректировки разрешений для пакета Android. На одном из форумов посоветовали “раскрыть” пакет и вручную изменить опции в AndroidManifest.xml. Однако, есть и другой вариант, но я его не проверял. Разработчики CocoonJS заявляют о корректной поддержки проектов, созданных с помощью PhoneGap, который имеет специальный файл настроек непосредственно для этих целей.

Вернемся к компиляции. После выбора нужных платформ (см. рис. выше), заливки архива на сервер — начнется сборка пакетов. Время зависит от объема. Уведомление о завершении работы вы получите на свою почту. Процесс сборки тестового приложения занял около 3 минут.

Результаты тестирования на устройствах Android действительно впечатляющие. Все работает. Даже на самом старом и слабом устройстве сцена крутится без заметных тормозов. Никаких проблем, как с PhoneGap здесь нет. Сцена запускалась на нескольких аппаратах и FPS доходил до 60 единиц.

Выводы


А куда же без них-то… Итак, выяснилось, что приложение WebGL, созданное с помощью Blend4Web, можно прекрасно экспортировать для платформ Android и iOS. PhoneGap позволяет создавать билды для аппаратов Apple, а CocoonJS оптимально использовать для Android. К сожалению, второй при попытке сборки под iOS выдает просто проект для Xсode. У меня мака нет, поэтому такой вариант не подходит.

И последнее — сборка Windows Phone неработоспособна ни в одном варианте. Похоже реализация WebGL у данной системы совсем не на высоте.
Андрей @Prand
карма
20,0
рейтинг 0,0
indie game developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (5)

  • 0
    В phonegap для android есть возможность использовать не системный вебвью, а последний хромиум (crosswalk).
    • +1
      Спасибо, я видел подобное в XDK, который тоже cordova использует. Но это требует, чтобы хромиум был установлен в системе?
      • 0
        Нет, не требует
      • 0
        Нет. Просто итоговый размер приложения вырастет где-то на 20-30мб.
  • 0
    В Intel XDK можно скомпилировать phonegap в облаке на халяву. Нажатием пары кнопок.

    Кстати, там есть хорошо разжеванные примеры.

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