Создаем HTML5 игру. Часть 3: Портируем на мобилки



Продолжаем цикл статей по разработке HTML игры. Эта заключительная часть посвящена теме портирования игры используя инструмент Intel XDK.

Если вы что-то пропустили, вот ссылки на предыдущие части статьи:
Часть 1: Подбор технологий
Часть 2: Архитектура и игровая логика

Если коротко, Intel XDK - это переосмысление идей PhoneGap, т.е. ещё один инструмент для разработки HTML5 игр на JavaScript с последующим экспортом на различные платформы. Intel сделал впечатляющую работу создав доступный и простой редактор, интегрировав его с онлайновым сервисом appMobi. XDK - очень любопытный инструмент уже готовый к продакшен решениям, умеющий создавать билды на IOS, Android, Windows 8, WinPhone 8, Tizen, Amazon, Nook, а также порты веб-приложений в магазины Chrome и Facebook.
Возможности платформы Intel XDK
Установить Intel XDK можно на официальном сайте http://software.intel.com/en-us/html5/tools

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

Первоначальная установка проекта

Создадим директорию с именем не превышающий 18 символов (иначе XDK выбросит ошибку при запуске билда). 

Создаем новый проект.

XDK при выборе пустого проекта по-умолчанию создает три файла:
index.html с внедренными линками на скрипты;
файлы описания проекта и манифеста: .xdk и .xkde.  

Вот проект и готов!

Перейдя во вкладку DEVELOP вы увидите файл index.html содержащий подобную структуру документа: 
Brackets IDE же!
IDE Intel XDK в точности повторяет IDE Brackets. Действуют те же хоткеи, цветовая гамма схожа. Да здравствует OpenSource!
В файле index.html добавляем ссылку на библиотеку intelxdk.js. Добавляем в директорию с проектом файлы игры и перезапускаем программу Intel XDK.

У Вас должна получиться структура проекта вроде этой:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
 <title>KineticJS Simple App</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
 <style type="text/css">
  /* Prevent copy paste for all elements except text fields */
  *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
  input, textarea  { -webkit-user-select:text; }
  body { background-color:white; color:black }
 </style>
 
    <!-- XDK lib -->
    <script src='intelxdk.js'></script>
    <script type="text/javascript">
  /* This code is used to run as soon as Intel activates */
  var onDeviceReady = function(){
    //hide splash screen
            intel.xdk.device.hideSplashScreen();
            intel.xdk.device.setRotateOrientation("portrain");
            intel.xdk.device.setAutoRotate(true);
  };
  document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
 </script>
 
   <!-- Style Main -->
    <link type="text/css" rel="stylesheet"  href="app/stylesheets/main.css" />
    
    <!-- Require Main -->
    <script type="text/javascript"  data-main="app/javascript/main" src="app/javascript/lib/require.js"></script>
  
</head>
<body>
    <!-- content Kinetic Canvas -->
    <div id="container">
        <div id="loading-info">LOADING...</div>
    </div>
    
    <!-- Key detection -->
    <a href="javascript:void(0);" id="anchor"></a>
</body>
</html>

Главное изменение - добавление скрипта библиотеки intelxdk.js и обработчика события "intel.xdk.device.ready".
Внутри функции происходит сворачивание окна рекламы и инициализации портретной ориентации устройства.
Все события XDK доступны на официальной документации.

Проведение теста на эмуляторе

Во вкладке EMULATE происходит тест на виртуальном эмуляторе. Здесь можно выбрать вид устройства, задать ориентацию, настроить debug и работать с акселерометром.
В целом, эмулятор соответствует реальному устройству, но разрабатывать без физического устройства считается очень плохой практикой.
Работа в эмуляторе Google Nexus 7
Когда приложение протестировано на эмуляторе, необходимо протестировать на физическом устройстве.

Тестирование на физическом устройстве


Сперва необходимо получить права разработчика на устройстве.
  • В меню "Настройки" зайдите в пункт "Для разработчиков" (если его нет, нужно зайти в "О планшете", и несколько раз подряд тапнуть на "Номер сборки". Появится окно уведомляющее что вы разработчик ;) Затем перейти назад в меню настройки и войти в появившийся пункт "Для разработчиков").
  • "Отладка по USB" поставить флажок
  • Выбрать приложение для отладки
К сожалению, мой Android 4.4.2 пока не в полной мере поддерживается в Intel XDK, и мне не удалось напрямую через USB подключить свой планшет. Поэтому для проверки на Android я использовал бесплатную программу Intel App Preview:

Создание установочного APK файла

Перейдите во вкладку BUILD, выберите тип устройства (я выбирал Android). Проект будет отправлен на облако, где произойдет проверка вашего проекта. Здесь могут возникнуть проблемы из-за неправильного наименования. В моем случае, проверка завершилась ошибочно из-за наличия символа подчеркивания в URI SCHEME. Сделайте необходимые правки, сохраните изменения просто нажав ENTER.

Когда проверка окончится, после этого появится панель для редактирования конфигурации билда. Здесь можно добавить иконки, выбрать ориентацию приложения по-умолчанию, подключить сторонние плагины, добавить сигнатуру facebook (если вы используете api от этой соцсети) и настроить нотификацию событий.


После завершения конфигурирования жмем на большую зеленую кнопку Build App Now. На создание билда может уйти достаточно времени, поэтому рекомендую идти пить чай :)

Настройки билда
Если вы дошли до этого сообщения, значит вы все правильно сделали
Нажимаем Download Build и сохраняем APK. 
Не удивляйтесь увесистому размеру файла. Почти 6mb занимает собственный браузер основанный на web-kit.
Теперь подключаем устройство, заходим во внутреннюю память через проводник и закидываем присланный apk. Устанавливаем через файловый менеджер, предварительно настроив возможность устанавливать сторонние приложения.
Установка приложения
Запускаем игру на устройстве и наслаждаемся проделанной работой.
Нативно запущенная игра на Android!

Подводим итог 

Разрабатывая сложное веб-приложение, тем более игру, нужно думать о порте под какую-либо платформу. Создать приложение в вебе, которое будет одинаково хорошо работать на всех видах устройств сложно до невозможности. И такие средства как Intel XDK или PhoneGap позволяет упростить гибридную разработку в разы. Они уже имеют множество модулей по работе с СМС, нотификаций, работой с установкой и пр.

PS. В Intel XDK добавили поддержку Cordova Crosswalk и удалили собственные плагины в пользу плагинов от Cordova.

Исходный код получившегося можно взять на гитхабе.

Я рекомендую к чтению: Быстрый старт с Crafty.js