Розробка HTML5 ігор

У HTML5 ігри можна грати на смартфонах, комп’ютерах, браузерах, соціальних мережах і навіть месенджерах. Завдяки безлічі платформ для поширення вони набули великої популярності в порівнянні з застарілими флеш-іграми і зайняли окрему нішу в індустрії геймдева.

Ігри на HTML5 не обмежені у жанрах.

За допомогою стандартних технологій для Інтернету розробники можуть створювати не тільки казуальні проєкти, але також розраховані на багато користувачів РПГ і RPG, що також впливає на популярність цього напряму.

У цій статті говоримо про основні движки, бібліотеки та асети, які використовуються при створенні ігор на HTML5.

Створення браузерної гри може виконуватися за допомогою базових інструментів фронтенд-розробника: сторінка формується на HTML, у CSS описуються стилі, а мова JavaScript вибудовує всю логіку роботи програми. Але такий підхід нераціональний, оскільки забирає багато часу та ресурсів, які доцільніше перенаправити на маркетинг. Тому найчастіше для розробки використовуються движки та фреймворки, які містять готові інструменти для роботи з графікою, анімаціями, аудіо та іншими компонентами.

Ось деякі технології, які найчастіше використовуються для створення гри на HTML5.

Construct 2

Потужний фреймворк для розробки 2D-ігор. Він надає більше 20 плагінів та 70 ефектів для візуального оформлення, а також дає можливість настроювати фізику та управління об’єктами за лічені хвилини, навіть не вдаючись до програмування. Це суттєво прискорює процес продакшену гри та економить бюджет.

CreateJS

Набір з чотирьох опенсорс бібліотек для мови JavaScript, які можна використовувати разом або окремо, незалежно один від одного:

• EaselJS – для створення графіки та налаштування взаємодій з HTML5 Canvas.
• TweenJS – для роботи з анімаціями.
• SoundJS — для відтворення аудіо та створення звукових ефектів.
• PreloadJS – для попереднього завантаження ресурсів програми.

Phaser

Безкоштовний двигун з відкритим вихідним кодом, який дозволяє розробляти ігрові проєкти із застосуванням елемента Canvas та бібліотеки WebGL.

PlayCanvas

Популярний ігровий движок, який використовується в іграх таких компаній, як Nickelodeon, IGT та Zynga. Він може працювати з 2D та 3D-графікою, і ідеально підходить для створення HTML5 ігор. Основні переваги:

• Відкритий вихідний код.
• Підтримка браузерів на застарілих мобільних пристроях, наприклад iPhone 4S.
• Забезпечує високу швидкість завантаження за рахунок використання відкладеного завантаження другорядних ресурсів, функції об’єднання скриптів та інших можливостей.
• Містить безліч командних функцій, що спрощують взаємодію технічних фахівців, які задіяні у розробці проєкту.
• Є офіційна безкоштовна версія PlayCanvas для публічних проєктів.

PixiJS

Open Source двигун з потужним ком’юніті, який вкрай ефективний для рендерингу двовимірної графіки. До переваг технології можна віднести:

• високу швидкість роботи;
• мультиплатформенність;
• підтримку спрайт-аркушів;
• розпізнавання мультисервісного введення;
• інтуїтивно зрозумілий API;
• розширений рендеринг тексту.

Враппер – це оболонка, яка інкапсулює програмний продукт і робить його сумісним із різними операційними системами. За допомогою таких інструментів можна «перетворити» гру розроблену HTML5 на нативну для IOS та Android, та розмістити її у відповідних маркетах додатків.

Ось кілька прикладів врапперів, які можна використовувати:

• Ejecta – бібліотека, яка в минулому була частиною ігрового двигуна Impact, але в подальшому стала застосовуватися і в інших проєктах. Використовується для адаптації ігор HTML5 на iOS.
• PhoneGap — безкоштовний фреймворк, створений на основі Apache Cordova, який застосовується для перетворення JavaScript, HTML5 і CSS на додатки для мобільних операційних систем.

Браузерні HTML5-ігри дуже гнучкі з погляду поширення, і суттєво виграють у більшості інших проєктів. Розглянемо кілька основних підходів:

• Розміщення на веб-сайті. Ігри на HTML5 коректно працюють у браузерах різних пристроїв, завдяки чому їх можна публікувати безпосередньо на сайті компанії. Такий варіант буде особливо актуальним, якщо йдеться про промо-ігри, що використовуються для гейміфікації маркетингу та залучення клієнтів.
• Галереї ігор у соцмережах та месенджерах. Багато популярних компаній розвивають власні платформи для поширення HTML5-ігор. Наприклад, для розміщення проєкту у Facebook можна використовувати спеціальні плагіни або движок Cocos2d-X, а в месенджері Telegram публікація здійснюється за допомогою офіційного робота @BotFather.

• Публікація у маркетах додатків. Завдяки можливості розміщення в PlayMarket та AppStore, HTML5-проєкти можуть рекламуватись як звичайні ігри на смартфон.
• Розміщення спеціалізованих платформах. У мережі існує безліч майданчиків, які використовуються переважно для публікації та розповсюдження HTML5-ігор. Ось кілька найбільш популярних з них: html5games, kongregate, newgrounds.

Для максимальної популяризації проєкту можна використовувати не один, а відразу кілька способів розповсюдження, але при цьому важливо враховувати додаткове навантаження на маркетинг.

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

Компанія AVADA MEDIA допоможе вам втілити в життя проєкт будь-якої складності: починаючи з розробки концепції та нарисів перших прототипів, і закінчуючи розміщенням на релевантних платформах.