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

Этой статьей мы открываем цикл постов о разработке первой игры для нашей образовательной платформы Learzing. Первый «скриншот» из игры — выше, а скоро мы анонсируем первую версию игры.

Работая по методологии lean startup (подробнее о ней — в статьях о команде и бизнес-модели), нам необходимо регулярно проводить тестирование нашего продукта заинтересованными в нем пользователями и получать от них обратную связь. Проще всего проводить тестирование на веб-версии (не теряя при этом в кросс-платформенности), также нужно, чтобы игра работала на любом современном устройстве. Сочетание HTML5 + JavaScript отлично удовлетворяет этим требованиям.

Инструмент для разработки HTML5-игр Construct 2 казался отличным выбором при старте разработки новой игры. Огромное сообщество, активный форум, сборка игры для всевозможных платформ, JavaScript SDK со стабильным интерфейсом и достаточным набором функций, открытый код игрового движка, плагины от разработчиков Construct 2 (а также сообщества и разработчиков коммерческих плагинов), стабильность, регулярные бесплатные обновления и никакой подписки (~135 долларов за лицензию).

В топе HTML5-игровых движков Construct 2 занимает первое место. На сайте декларируется 1,5 миллиона скачиваний. Возможно, такая популярность связана не только с качеством движка, но и с повсеместным использованием WYSIWYG-редакторов. В них и кроется проблема, которую мы решаем в статье.

Визуальный язык программирования Construct 2

Пример кода на визуальном языке программирования Construct 2

Для описания логики игры в Construct 2 используется непривычный визуальный язык программирования. Начнем с того, как исполняется программа. Вспомним, что такое game loop pattern. Код, который мы «накидали» в редакторе, исполняется на каждой итерации цикла игры после этапа обработки пользовательского ввода. То есть на каждом шаге эмуляции игрового времени (и обсчета состояния объектов игры) движок Construct 2 исполняет все конструкции программы.

В языке есть переменные и константы, циклы и функции, реализованные через события, условные операторы и сами события, и даже области видимости переменных. Это почти что набор стандартного структурного ЯП. Си успешно применяется в разработке сложных проектов (таких как Linux kernel). Возможностей ЯП Construct 2 могло бы быть достаточно и для нашей игры, если бы не:

• Отсутствие структур (в терминах Си). Вы не можете объединить данные, чтобы описать какую-либо сущность, работаете только со строковыми и числовыми переменными.
• Громоздкий визуальный код.
• Слабая применимость устоявшихся практик из общепринятых ЯП — поддержка IDE, архитектурные шаблоны, модульность, рефакторинги и т. п.

Поэкспериментировав с ЯП Construct 2, мы поняли, что он удобен для разработки простых игр, но для сложных игр не подходит. Для разработки нам требовался гораздо более мощный язык. Мы все же решили использовать Construct 2 и нашли способ писать код на JavaScript с помощью плагинов к Construct 2.

Архитектура плагинов Construct 2

Архитектура плагинов Construct 2 на примере некоторых стандартных плагинов и их интерфейсов к визуальному ЯП

Базовый компонент времени исполнения Construct 2 игры представлен файлом c2runtime.js, который мы можем увидеть после сборки проекта. c2runtime занимается моделированием времени, расчетом collisions, созданием/уничтожением объектов, исполнением визуального кода игры, реализует интерфейсы JavaScript SDK и т. п.

JavaScript SDK определяет понятие плагина. Плагин — это, как не трудно догадаться, JavaScript-компонент, реализующий дополнительную функциональность, доступную из визуального кода Construct 2. Каждый плагин, кроме стандартного описания (имя, версия, URL сайта и т. д.), определяет набор предоставляемых им функций и событий. JavaScript-код плагина обрабатывает вызовы из визуального кода игры, а также имеет возможность посылать события в визуальный код.

В виде плагинов с открытым кодом реализованы даже базовые объекты Construct 2, такие как Sprite, Text и многие другие. С точки зрения архитектуры данный подход разработчиков выглядит грамотно. Компактное ядро, к которому подключаются плагины, каждый из которых реализует свою строго ограниченную функциональность, дополняющую функции ядра. Все взаимодействия с ядром выполняются через стандартный интерфейс JavaScript SDK.

Решаем проблему с помощью MVC

Паттерн MVC

Визуальный язык программирования Construct 2 плохо подходит для описания сложной логики. Но на нем можно было бы описать простую логику уровня view паттерна MVC, а всю сложную логику реализовать в JavaScript на уровнях model и controller.

Для начала выделим, какие сервисы необходимы уровню view для функционирования игры. Сервисы, написанные на JavaScript, содержат всю сложную логику и состояние. По MVC они становятся уровнем model. Далее создадим контроллеры, предоставляющие уровню view доступ к model. Интерфейсами к JavaScript-коду в Construct 2 являются плагины, поэтому каждый контроллер реализуется в виде плагина Construct 2. Таким образом, мы получаем все MVC-компоненты в Construct 2-игре и имеем возможность писать код произвольной сложности.

Сейчас наша игра содержит 15 плагинов Construct 2. Каждый из них предоставляет визуальной части игры набор сервисов. Например, плагин для записи игры, воспроизведения, работы с persistent storage, плагин учета прогресса игрока на уровне и т.д. Представленное решение проблемы с Construct 2 не выглядит простым. Но кроме возможности писать на JavaScript, мы получили бонусы подхода MVC: строгое отделение кода UI от основной логики и состояния приложения.

Итог

Примерно 70-80% кода нашего проекта находится на уровне модели и написано на кросс-платформенном JavaScript. При необходимости сменить игровой движок, нам понадобится переписать менее 30% кода продукта. При успешном развитии проекта есть вероятность, что он будет переписан на Unity, как на гораздо более взрослой и дорогой технологии.

Впереди вас ждет много интересного о технических аспектах разработки HTML5-игр и движков, запускаемых как в браузерах, так и в виде нативных приложений. Оставайтесь с нами, скоро мы анонсируем первую версию игры.

Опрос

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

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

Все статьи серии

1. Стартап шаг за шагом: будущее онлайн-образования
2. Стартап шаг за шагом: команда и менторы
3. Стартап шаг за шагом: первая бизнес-модель
4. Как мы делали образовательную платформу: первый дизайн, landing page и логотип
5. Как мы делали образовательную платформу: первое приложение
6. Делаем HTML5-квест: применяем паттерн MVC в Construct 2
7. Делаем HTML5-квест: создаём персонажа и базовую анимацию