На чём делать HTML5 игры?

С уходом Flash из браузеров необходимость делать браузерные игры на чём-то другом возросла чуть больше чем полностью. В технологиях альтернативы нет, она одна — HTML5 технология.

И для того чтобы начать делать HTML5 игры, хорошо бы сначала выбрать средство для этого, благо что выбор в HTML5 движках и фреймворках для игр имеется)

Сначала рассмотрим HTML5 движки и фреймворки хорошо подходящие для создания 2D игр, а потом рассмотрим для 3D.

Стоит рассказать про технологии рендера HTML5, их две: canvas и WebGL. Суть разницы: canvas — это для отображения 2D и работает без проблем практически во всех браузерах, а WebGL — это для рендера 3D и может работать не во всех браузерах.

Для HTML5 2D пару лет назад было очень важно чтобы движок умел рендерить в canvas, а не только в WebGL, т.к. порталы игр брали игры только на canvas. Но сейчас ситуация меняется и WebGL становится более обыденным и показателем большой скорости рендера в сравнение с canvas. Но если вы делаете 2D HTML5 игру, то на всякий случай она должна уметь рендериться в canvas — вдруг спонсор не захочет WebGL.

На просторах инета я нашёл вот такую таблицу популярности HTML5 2D движков: https://html5gameengine.com

Коротко рассмотрю топ из этой таблицы в своём порядке)

Основной фишкой PixiJS является скорость рендера. Авторы утверждают, что на данный момент это самый быстрый движок рендеринга 2D. В основном используется WebGL рендер везде где это возможно и лишь для старых браузеров автоматически включается рендер в canvas.

На оф. сайте есть кучка примеров и документация.

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

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

Если же вы хотите, чтобы такие базовые вещи были уже сразу из коробки, то прошу к ознакомлению с Phaser-ом.

Phaser — HTML5 игровой движок с открытым исходным кодом. Он хорошо поддерживается Ричардом Дэви и сообществом вокруг него. Для рендера используется PixiJS, так что он может рендерить в canvas или webGL по выбору и за скорость можно не беспокоиться.

Тонны примеров на оф. сайте, огромное комьюнити и отличный форум.

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

Есть готовые шаблоны в MS Visual Studio для новых проектов Phaser с использованием языка TypeScript.

Я выбрал этот движок после долгих раздумий между CreateJS, PixiJS и Phaser и остался доволен. После Haxe+OpenFL пришло приятное ощущение, что я занимаюсь разработкой игры, а не костылями для разработки игры) Я сразу решил использовать TypeScript и был приятно удивлён, что в MSVS есть готовые шаблоны проектов.

ImpactJS занимает топовые места рейтинга HTML5 Canvas Game Engine с самого 2010 года, когда он и появился на публике. Это игровой движок на JavaScript. Поставляется вместе с Ejecta Framework, который помогает публиковать игры на iOS и tvOS. Ejecta берет исходники в js и компилит его под OpenGL. По словам разработчиков игры не будут отличаться от нативных игр на Objective-C.

Особенностью является наличие родного редактора уровней, который называется Weltmeister. В нём можно определять и использовать игровые объекты, например враги, NPC, тригеры и т.п. вплоть до связывания их в логические цепи.

Но такие прелести уже не бесплатны, ImpactJS стоит $99 USD. Но, если всё взвесить, то я думаю эта сумма отобьётся и оправдается после 1-2 проданных игр.

Сам я опыта с импактом не имел, но на вид он мне нравится.

Преимуществом фреймворка CreateJS является то, что он достаточно унифицирован под браузеры и его поддерживают Adobe пр., т.е. это некая гарантия (наверно), что фреймворк будет обновляться и выдавать минимум багов в бразуерах. Хотя мы то с вами знаем, что поддержка Adobe ничего не значит)

Ну а если серьёзно, то фреймворк выглядит опрятным и я знаю минимум 2-х человек, которые его полюбили и не собираются перелазить на что-то даже более удобное, например на Phaser.

Беспрепятственное встраивание любого API, ads и пр.

Construct 2 logo Construct 2 знаменит тем, что даёт возможность что-то сделать не требуя от творца глубоких навыков программирования, а т.е. является именно конструктором, от этого и популярный.

Парадигма «конструктора без кода», например, мне, как программисту, не нравится, т.к. я могу не мало потерять в гибкости своей программы на разных этапах. Представьте, что вы делали игру месяц, идёт процесс продажи вы уже договорились со спонсором, нужно встроить его API в игру и тут вы понимаете, что фиг его знает как встроить API на js в этом конструкторе.

 

Теперь рассмотрим на чём можно делать HTML5 3D игры.

Unity 5 — один из лучших движков для создания 2D и 3D-игр так же поддерживает экспорт в HTML5 WebGL.

Я думаю будет не мало Unity WebGL игр на порталах, которые уже начали бодро закупать 3D WebGL. Вы можете попробовать демо-версию Unity WebGL здесь.

Стоимость: Бесплатная / Платная лицензии.

Unreal Engine 4 представляет собой набор интегрированных инструментов для разработчиков игр для разработки и создания игр, он так же, как и Unity, поддерживает экспорт в HTML5 WebGL начиная с версии 4.7.

Стоимость: Бесплатная / Платная лицензии.

Three.js — легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. Исходный код расположен в репозитории GitHub.
Babylon.js — легковесный кроссбраузерный JavaScript-фреймворк, использующий API WebGL для отображения 2D и 3D-графики в браузере без использования каких-либо сторонних плагинов и дополнений.

Babylon.js использует элемент HTML5 Canvas. Фреймворк распространяется под лицензией Apache 2. Исходный код расположен на GitHub.

Фреймворк был разработан Дэвидом Катушем (David Catuhe), Дэвидом Руссе (David Rousset), Пьером Ларард (Pierre Lagarde), и Мишель Руссо (Michel Rousseau), а также независимыми сторонними разработчиками.

На тему сравнения Three.js и Babylon.js есть не плохая статья на хабре: Игровой мир WebGL или Three.js vs Babylon.js.

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

Для себя я выбрал Phaser для создания 2D HTML5 игр. А для 3D HTML5 я бы взял Unity.