Когда Intel поставил перед небольшой командой разработчиков задачу создать приложение с открытым кодом, они создали Dev Story/*HACK THE CODE*/— последовательность задач на темы цикла разработки игр.
Начало
Команда
Мэтт
Я являюсь директором компании Creative Technology и имею опыт разработок на Actionscript, и с недавних пор – на Java. Некоторое время я не занимался написанием кода и лишь недавно вернулся в эту область. В прошлом я разработал целый ряд игр, и в процессе работы мне приходилось изучать Javascript и WebGL.
Задача Intel по созданию приложения для Android в среде Intel XDK показалась мне заманчивой. Мне, по меньшей мере, как разработчику, представилась возможность создать свое первое мобильное приложение и второй коммерческий проект на javascript. Я надеялся, что опыт проектирования и разработки игр поможет мне в этом проекте, и мне было интересно посмотреть, насколько легко с помощью инструментов я смогу проявить свои умения в работе над приложением.
Энтони
Я являюсь разработчиком пользовательских интерфейсов и имею опыт работы в маркетинговых агентствах. Я испытываю пылкую страсть к Javascript и HTML5, и мне нравится платформа Android.
Когда Intel поставил перед нами задачу создать приложение для Android с помощью Intel XDK, я ухватился за эту возможность. Применение моих знаний Javascript в сфере разработок приложений, недоступной для меня иначе, стало приятной прогулкой за пределы моей области, в которой я чувствую себя уверенно.
В прошлом я пробовал заниматься Canvas, но слишком поверхностно. И создать настоящее мобильное приложение также никогда не пытался. К счастью, инструменты и платформы, доступные разработчикам пользовательских интерфейсов, позволили нам буквально сразу же приступить к работе и начать программировать.
Идея
Intel поставил перед нами задачу создать приложение за месяц. Нам было нужно предложить концепцию, обращенную к таким разработчикам, как мы; концепцию с возможностью привлечения труда сообщества разработчиков.
Нашей идеей было создать приложение на основе идеи создания приложений, и на первом обсуждении задачи мы занимались определением различных этапов разработки приложений.
Затем мы выбрали некоторые из этих этапов и разбили их на минизадачи.
Мы решили, что с учетом сроков будем разрабатывать три задачи с тремя уровнями сложности, затем передадим исходный код сообществу разработчиков и посмотрим, какие будут у них улучшения или дополнения.
К трем выбранным нами этапам разработок относятся «создание концепции», «написание кода» и «релиз приложения».
Пока дизайнеры приступили к работе над созданием зрительных образов, мы обратились в Интернет, чтобы найти платформы, отвечающие нашим потребностям…
Выбор фреймворков
Создать 2D приложение с нуля в столь жесткие сроки – дело нелегкое. К счастью, на дворе – 2014 год, и к этому времени сообществом Javascript разработаны и продолжают поддерживаться многие замечательные платформы.
Мы старались найти такие платформы, которые, по сути, являются игровыми движками на базе Javascript.
Применялись следующие критерии выбора:
- Ориентация на двумерную графику – мы не планировали добавление трехмерных элементов в игру.
- Мобильность – поддержка сенсорного интерфейса, аудио, WebGL
- Открытый код
- Наличие библиотечных функций для общих игровых операций – промежуточные классы, векторная математика и т.д.
Рассмотренные кандидаты
Construct 2. Хотя мы понимаем тех, кому нравится концепция «программирование не требуется», нам, как программистам, хотелось засучить рукава и с головой окунуться в работу!
Impact JS. К сожалению, этот проект не предлагает открытый код.
Решение
Panda.js - http://www.pandajs.net/
Игровой движок Panda нам сразу же приглянулся. Он активно поддерживается (фактически еще дорабатывается) и им пользуются очень толковые пользователи, способные предлагать ответы на вопросы.
Нас очень привлекал тот факт, что Panda ориентирован на сенсорный интерфейс с поддержкой мобильности, а также понравился грамотно сделанный объектно-ориентированный синтаксис. Просмотрев документацию, мы немедленно пришли к выводу, что эта платформа отлично подходит для решения нашей задачи.
Pixi.js - http://www.pixijs.com/
Panda поставляется с механизмом рендеринга Pixi. Он ориентирован на двумерные объекты и отвечает современным требованиям с точки зрения скорости рендеринга и простоты реализации. Во процессе разработки мы провели обновление до версии 1.6.0, в результате чего увеличилась производительность и добавился целый ряд новых функций.
Работа в среде Intel XDK
Когда Intel поставил перед небольшой командой разработчиков задачу создать приложение с открытым кодом, они создали Dev Story/*HACK THE CODE*/ — последовательность задач на темы цикла разработки игр.
Интегрированная среда разработки (IDE)
Мы оба подключились к проекту в качестве пользователей Sublime Text для работы с разработками на Javascript, хотя Мэтт привык к относительно "спартанскому"интерфейсу разработки для Java.
С самого начала XDK IDE оказалась очень знакомой и простой в использовании средой. Эта среда, основу которой составляет открытый редактор исходного кода Brackets, обеспечивает такие удобные функции, как встроенные подсказки кода, автозавершение кода, JSHint, а также оперативный просмотр одним щелчком непосредственно из среды IDE. Нам не хватало функции минипросмотра документа редактора Sublime Text, но за исключением этого, XDK – отличная среда для разработки.
Эмулятор
Развертывание еще незавершенного приложения на мобильных телефонах с помощью Intel XDK – процесс быстрый, но не мгновенный.
Для получения быстрого отклика, исправления ошибок и общей разработки мы использовали эмулятор Intel XDK, а также Chrome в режиме эмуляции.
В main.js можно включать кнопки, предназначенные только для разработчиков. Они позволяют очищать локальную память и быстро перемещаться по приложению вперед и назад.
Эмулятор Intel XDK дает очень хорошее представление о том, как приложение будет смотреться и работать на реальном устройстве. Он даже может загружать выбранные Cordova-плагины для отслеживания и тестирования поведения исходных устройств.
Google Chrome в режиме эмуляции мобильных устройств позволил нам очень быстро проверить графику, DPPI и размеры экранов. Кроме того, проявились многие проблемы, не связанные с Cordova Javascript, что также делает эту платформу очень удобной для тестирования. Именно этой платформой пользуется большинство разработчиков на Javascript.
Единственное, что невозможно проверить без развертывания – производительность устройства, которая зависит от его процессора и видеокарты. Для этого приложение нужно собрать и установить на реальном устройстве.
К счастью, собрать приложение в Intel XDK и запустить его на реальном устройстве можно за несколько минут.
Структура проекта
После того, как мы разобрались с Panda и Pixi и освоили типовые шаблоны Intel XDK, настало время настроить структуру проекта.
config.js
Этот файл содержит переменную "pandaConfig"– набор параметров для платформы Panda. При разработке приложения мы применили следующие правила:
- Принудительная альбомная ориентация (в сочетании с другими выбранными средствами).
- WebGL установлен в true для разрешения рендеринга на мобильном GPU.
- Anti-aliasing (сглаживание) установлен в false для повышения производительности.
- Установка значения переменной хранения для сохранения настроек и хода игры для последующих сеансов.
main.js
Этот файл определяет все конфигурации и параметры, связанные с приложением. Помимо создания экземпляра объекта Panda, этот файл также включает в себя многие вспомогательные функции, которые многократно используются во время перемещения по приложению.
К таким функциям в этом файле относятся
- Функция переключения режима разработки и функции отладки.
- Параметры конфигурации, связанные с определенным уровнем.
- Переключение сцен с анимацией.
- Код, необходимый для создания имени приложения методом случайной генерации (используется в различных задачах).
- Метод безопасной загрузки ресурсов.
Модули
Panda использует метод включения файлов, аналогичный "Require.js". Поскольку данный проект предназначался для представления широкой аудитории разработчиков, мы остановились на модульном подходе для включения сцен и задач.
Модули имеют следующий вид:
- Модуль
- Сцены – Intro, Main, Outro
- Объекты – объекты и классы, свойственные модулю.
Таким образом, каждая задача содержит собственный набор исходного кода, отделенный от других задач. Она может вызывать вспомогательные функции из main.js но не может обращаться к исходному коду в других модулях.
Разработка задач
Когда Intel поставил перед небольшой командой разработчиков задачу создать приложение с открытым кодом, они создали Dev Story/*HACK THE CODE*/ — последовательность задач на темы цикла разработки игр.
Различные варианты игрового дизайна
Имея в запасе всего лишь четыре недели на разработку трех игр, мы понимали: чтобы сдать проект в срок, нужно ограничить рамки игрового сценария. Мы не стали изобретать велосипед и решили придерживаться широко известных игровых стилей, хорошо знакомых разработчикам. Тогда цель игры и код, необходимый для ее воплощения, будут доступны пониманию других разработчиков, желающих добавить свою часть кода в проект.
Различные варианты реализации
Концепция
В первой игре игрок вылавливает «идеи», свободно плавающие в «концептуальном бульоне» своего воображения. Задача и награда за ее решение выражаются, соответственно, как "отвлекающие факторы", которые могут внести некое подобие отрицательного воздействия, и "подпитки"как помощь игроку.
В качестве основы для схем управления игроком, а также идеями, которыми он руководствуется, и угрозами, которые он пытался предотвратить, мы выбрали работу Крейга Рейнольдса (Craig Reynolds) по типам управляющего поведения. Управляющие алгоритмы обеспечивают гибкие и сложные средства сочетания поведенческих мотивов поиска и побега, а также группирования и уклонения от ограничений. Кроме того, подобные алгоритмы легко адаптируются или добавляются другими разработчиками.
Написание кода
Вторая задача имеет вид пишущего код разработчика. Нас вдохновлял механизм игрового процесса игры «Guitar Hero» (Герой гитары), и за основу концепции нашей игры мы взяли точность и синхронизацию. Это можно сравнить с идеей представления разработчиков, как рок-звезд! ;)
Элементы "кода"появляются на экране слева и перемещаются по нему до тех пор, пока не достигнут правой стороны экрана, и в этот момент пользователь должен нажать соответствующую кнопку мыши, чтобы обозначить прикосновение. Любое неправильное или несвоевременно выполненное нажатие выдает ошибку, которую нужно немедленно исправить.
Выпуск
После разработки концепции воображаемого приложения и написания его кода пользователь-игрок должен правильно выбрать момент для представления своего творения миру.
Простая, но интересная концепция заключительного этапа основана на механизме синхронизации игрового процесса и выбора удобного случая. Пользователю противостоят приложения одного или двух "конкурентов", и ему нужно нажать кнопку запуска в подходящий момент.
Оптимизация и производительность
Разработка первой игры на десктопе прошла без особых проблем, но как только началось тестирование производительности на мобильных устройствах, отмечались довольно заметные пропуски кадров. Мы проверили исходный код в XDK и его выполнение на устройствах. Никаких причин найдено не было. В игре использованы сочетание шейдерных эффектов Pixi.js, сравнительно затратной с точки зрения вычислений для типов группового управляющего поведения, таких как группирование и отклонение, а также многоуровневые анимации графических объектов с несколькими слоями альфа-прозрачности и затушевывания.
Благодаря сокращению объема используемых анимаций, «сплющиванию» графических объектов в единый графический образ (вместо их динамического распределения по слоям и затушевывания) и упрощению реализации шейдерных эффектов, нам удалось вернуть более высокую частоту кадров. Первая игра продолжает работать с более низкой, чем хотелось бы, частотой кадров, однако, это упражнение было полезным и научило нас, что тестировать нужно часто и на ранних этапах разработки.
Работа с Panda и Pixi
WebGL в сравнении с Canvas
Наш опыт работы с WebGL на десктопе показал, что возможно существенное улучшение производительности по сравнению с Canvas рендерингом, и нам хотелось посмотреть, как приложение будет выглядеть на устройствах Android.
Первые результаты были обнадеживающими. Вдохновленные производительностью демо Pixi.js Bunnymark, мы приступили к проектированию игр с десятками, если не сотнями графических объектов. С добавлением функций и началом тестирования на различных устройствах мы стали замечать снижение производительности в некоторых важных областях. В частности, производительность шейдеров была веcьма непостоянной. Хотя возможность написания и запуска шейдеров непосредственно на видеокарте позволяла воспроизводить ряд интересных визуальных эффектов, совершенно очевидно, что цена этому – непредсказуемая производительность. Понятно, что этим дефектом больше всех страдают устройства с ультравысокой плотностью пикселей (>= 2.5), не оснащенных достаточно мощным GPU, поскольку им требовалась очень высокая пиксельная скорость заполнения на фрагмент. Нам удалось сохранить большую часть шейдерных режимов с некоторым упрощением, но к ним нужно подходить с осторожностью и подвергать их многократному тестированию!
Физическая среда
Panda.js имеет встроенные средства моделирования физической среды для простых 2D коллизий. Мы думали о применении этих средств, но тогда нам пришлось бы пройти дополнительное обучение, и кроме того, возросла бы зависимость других разработчиков от сторонних библиотек.
В итоге, мы решили написать собственный код для обработки необходимых взаимодействий в ограниченной физической среде. В этом случае другие разработчики смогут увидеть, как и почему графические объекты ведут себя так, а не иначе.
На мобильных устройствах мы видели довольно большой разброс величин частоты кадров; несмотря на это, нам был нужен способ обеспечения стабильного качества изображения. Использование переменной, описывающей допустимые изменения исходной системы Panda.js, для интеграции прошедшего промежутка времени с функциями нашей физической среды обеспечило нам достаточно корректную работу. Мы долго мучились с частичной реализацией симплекс-метода Эйлера, поскольку нас беспокоила не столько точность моделирования, сколько стабильность и простота.
Производительность
Мэтт
С моей точки зрения наши честолюбивые замыслы в основном были реализованы. Основное отличие по сравнению со сборкой на десктопе состоит в том, что по мере добавления функций нам требовалось отслеживать производительность.
Большую часть времени, отведенного на проект, я посвятил добавлению интересных функций, которые, в конечном итоге, мне пришлось убрать или упростить в интересах стабильной работы приложения на различных устройствах.
Энтони
Основная оптимизация производительности в моих задачах свелась к правильному использованию анимаций Panda и Pixi. Запуск меньшего количества функций в обновленных функциях также улучшило положение дел.
Crosswalk выполняет нелегкий труд повышения частоты кадров в окончательной сборке. Это означает, что грамотно оптимизированное приложение в сочетании с Crosswalk может выполняться с частотой кадров, почти сравнимой с частотой кадров нативного приложения.
Тестирование
Мэтт
К счастью, тестировать сборки в XDK было действительно просто, так что я мог очень быстро проверять и многократно оптимизировать производительность.
Интересно было посмотреть, где и как можно использовать Javascript на мобильных устройствах, и в следующем проекте я буду тестировать разработку как можно раньше и чаще.
Энтони
Учитывая задачи разработки мобильных приложений и широту спектра доступных устройств, тестирование приложения на реальном устройстве имеет решающее значение для эффективности цикла разработки.
Сборка в Crosswalk с помощью Intel XDK занимает несколько минут, и после этого приложение можно сразу же отправить на различные устройства.
Эта функция, которая, безусловно, явилась одной из самых полезных, сильно помогла нам в создании Dev Story.