Застосовуємо патерн MVC при розробці HTML5-ігри на Construct 2



попередній статті ми розповіли про створення програми для вивчення англійських ідіом, в процесі якого ми прийняли рішення змінити формат програми і розвернутися в інший бік. Ми вирішили застосувати наші міркування про онлайн-освіта і додати набагато більше ігровий складової. Постало питання про інструмент для розробки гри.

Цією статтею ми відкриваємо цикл постів про розробку першої гри для нашої освітньої платформи 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-ігор і двигунів, що запускаються як в браузерах, так і у вигляді рідних додатків. Залишайтеся з нами, скоро ми анонсуємо першу версію гри.

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

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

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.