Выбор игрового движка

Всем доброго времени суток!

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

Почему так?

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

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

Для механики размещения волн противников необходимо отображать новый кусок арены. Это делается очень просто: создаём карту нужного размера, размещаем противников и показываем игроку на панели сбоку. Технически отображение на панели идёт за счёт рендера в узле вида с другой камеры. Представьте, что вместо зеркала заднего вида в машине, у Вас мониторы, а позади установлены камеры, которые транслируют Вам картинку. И вот на этом пункте «завал» у движка. Функционал есть, но в версии 4 его сломали.

Размытие

При изменении размера окна (переключения в полноэкранный режим и обратно) изображение с камеры искажается (используется SubViewport). Для отладки я добавил текст к объектам (узел Label3D) и он теперь не читаемый. Модели тоже размываются. Возможно, есть ещё сценарии, при котором это будет происходить. Тоже самое происходит в демке движка, которые демонстрирует функционал.

Стандартная демка с добавленным Label3D

И я говорю, что это сломали, потому что в версии 3 игрового движка таких проблем нет (там узел называется Viewport). Ещё я наслушался о других ошибках в 4 версии в последнее время.

Требования к инструменту

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

• Мне нужны 3D-возможности. И не просто развивающиеся, а готовые.
• HTML5-сборка для мобильных браузеров: она необходима как способ демонстрации в первую очередь. Можно показать игроку страницу и сказать «Скачай, попробуй! Нет, нет, никаких вирусов…». Сколько людей это сделают? Даже если человек захочет, он может этот пост/страницу увидеть в дороге и просто забыть потом это сделать. А тут запустил и попробовал сразу. Не говоря уже о том, что игра вообще может быть браузерной и работать откуда угодно. Конечно, магазины приоритетнее, но кто знает, как всё обернется.
• Доступность информации и сообщество. Тут пояснения излишни, за исключением текущей ситуации, когда уже нельзя просто так связаться с разработчиками движка на их Discord-сервере. Да, да, есть пока решения этой проблемы, но всё может быть.
• Офлайн режим. Некоторые движки требуют работу в онлайн-редакторе или регистрацию аккаунта и его проверки при запуске IDE. Это субъективно неудобно.

Дополнительные плюсы:

• Наличие редактора. Удобный редактор может значительно ускорить разработку игры. Всё зависит от игры. Если делать платформер или TDS, где нужно «рисовать» карты, окружение, то редактор нужен. Если это головоломка, арены, то всё это генерируется кодом с указанными параметрами. Тут можно и самому редактор сделать.
• Открытый исходный код. Иногда быстрее и удобнее «вживую» разобраться с кодом, чем искать ответы в документации, интернете.

Что есть?

Пробегусь по тем инструментам, о которых знаю и сложилось мнение.

• Unity, Unreal Engine: Для моих небольших задач они слишком громоздкие. Как говорится, «Стрелять по воробьям из пушки».
• Cocos — это давно существующий движок, который изначально был исключительно под 2D (я его давно уже щупал). Сейчас у него своя IDE (Cocos Creator) с 3D возможностями. Он популярен в веб-проектах и в мобильных играх (ссылка на ролики с демонстрацией игр). Когда я им интересовался, то понял, что не все функции реализованы стабильно, документации/материалов мало. Мой подход (поставил, запустил демку, собрал, протестировал) часто приводит к ошибкам на каком-то этапе. Что не очень хорошо, для доступного инструмента. Слежу за ним одним глазом. Там необходимо заводить учетную запись, в офлайне работать можно, но есть определенные ограничения.

Cocos Creator

• GDevelop 5 — это конструктор игр с визуальным программированием (бесплатный аналог Construct). Я делал на нём проект «Новогодняя открытка». А теперь там появилось расширение, которое позволяет создавать 3D игры. Он использует Three.js, библиотеку для рендера в браузере. Редактор ещё не приспособлен для удобной работы с ним. Приходится использовать визуальное программирование, чтобы пробиться и писать на JavaScript, и это довольно утомительно. В итоге получается комбинация технологий, где за 3D отвечает Three.js, а поверх него (скорее всего вторым canvas’ом на странице) идёт уже давно используемый Pixi.js. Всем новичкам я советую этот инструмент для начала, сам тоже для простых 2D игр использовал бы.

GDevelop 5

• Pixi3D — это рендер для популярной 2D библиотеки Pixi.js. Он полностью интегрируется с ней и позволяет использовать 3D-графику. Есть документация и примеры. Более того, я уже использовал его при создании клона игры Stack. Бутерброд у меня получился: я использовал движок Ct.js, который построен на Pixi.js, и подключал туда Pixi3D. И информации по этой библиотеке немного. Спросить можно у разработчика на Github, но очень медленно, или где-нибудь на Discord-сервере или форуме, что тоже не быстро. Я не уверен, поддерживает ли он рендер в текстуру. Поэтому не подходит.
• Rogue Engine — игровой движок, основанный на Three.js. Есть редактор в стиле Unity. Есть даже свой сайт, где можно выкладывать игры (вот ссылка на примеры игр авторов движка). При первом запуске движка требуется регистрация, но потом можно работать в офлайне, вроде. Сообщество есть только на Discord-сервере, что сейчас не очень удобно. Текущая версия движка 0.6.4, что говорит о продолжающейся разработке. У него закрыт исходный код, так что самому поправить или посмотреть не удастся. Ещё одна особенность: UI создаётся с использованием HTML/CSS, это целое поле для изучения, чтобы, например, сделать инвентарь. Интересный экземпляр, буду следить.

Rogue Engine

Теперь рассмотрим три самых популярных и известных 3D-игровых движка для веба.

• PlayCanvas — игровой движок с IDE аля Unity. Но доступен только онлайн-редактор. В бесплатном пакете у Вас есть 1 Гб места для проектов у них в облаке и урезаны ещё плюшки. Есть версия Standalone на github — это сам движок, его исполняемая часть. То есть, можно взять сам движок и без редактора писать код и делать игры. Примеры есть, можно посмотреть их тут: примеры. Форум живой, Discord-сервер тоже, но всё больше ориентировано на разработку с использованием редактора.

Например, в «кодовой» версии нельзя как-то организовать сцены. Есть главная, а функции для переключения ждут, что ты передашь им «адрес» файла с другой сценой, подразумевая, что ты сделал её в редакторе и она сохранилась в файле. То есть необходимо самому реализовывать менеджер сцен с использованием узлов (добавляя и удаляя их).

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

Меня это слегка удивило. Сам шаблон подразумевает, что компонент — это данные. Ты указываешь в какую сторону и с какой скоростью надо двигать сущность, а определённая система это исполняет. Но тут у тебя скрипт и он просто исполняется системой (список всех систем можно посмотреть, это контролируется кодом). Таким образом, порядок выполнения скриптов не совпадает с тем, что обещает шаблон ECS: скрипты всех сущностей выполняются в порядке их создания.

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

Интересный, очень интересный вариант, но не поймал я волну этого движка.

PlayCanvas

• Babylon.js — игровой движок от Microsoft. Открытый исходный код, разработчики, которым платят зарплату за развитие данного инструмента. Можно при запуске проекта включить инспектор (на картинке ниже), будто у Вас полноценный редактор и там править сцену (с сохранением результатов есть тонкости). Я его использовал, когда разрабатывал на конкурс игру «Вернуться» (потратив несколько дней, я переключился на Godot, чтобы успеть в сроки). В движке реализовано много функций «из коробки», есть много примеров, документация (хотя она не очень логичная), и активное сообщество (форум живее, чем Discord-сервер). Движок своеобразный, к нему нужно привыкнуть. Расскажу на примере простой анимации (Tween). Как мы хотим указать анимацию: указываем начальное значение (или используется текущее), конечное значение, время длительности, настройки. Типа такого (Tween.js):

// Create a new tween that modifies 'coords'.
const tween = new Tween(coords, false) 
	.to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
	.easing(Easing.Quadratic.InOut) // Use an easing function to make the animation smooth.
	.onUpdate(() => {
		// Called after tween.js updates 'coords'.
		box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
	})
	.start() // Start the tween immediately.

или (Godot Engine):

var tween = get_tree().create_tween()
tween.tween_property($Sprite, "modulate", Color.RED, 1).set_trans(Tween.TRANS_SINE)
tween.tween_property($Sprite, "scale", Vector2(), 1).set_trans(Tween.TRANS_BOUNCE)
tween.tween_callback($Sprite.queue_free)

В Babylon.js по-другому:

const frameRate = 10;
const xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const keyFrames = []; 
keyFrames.push({
    frame: 0,
    value: 2
});

keyFrames.push({
   frame: frameRate,
   value: -2
});

keyFrames.push({
   frame: 2 * frameRate,
   value: 2
});

xSlide.setKeys(keyFrames);
box.animations.push(xSlide);
scene.beginAnimation(box, 0, 2 * frameRate, true);

В этом примере мы создаем анимацию движения объекта по оси X, для этого добавляем ключевые кадры. При этом время для каждого ключевого кадра указываем не непосредственно время, а умножая количество кадров на время. Затем добавляем эти кадры и запускаем анимацию. Также указываем частоту кадров, с которой анимация должна проигрываться. Ссылки на этот пример и описание. И бывают моменты, когда организация не очень интуитивна. Данный вариант является более гибким, но непривычный.

Есть у них некий редактор — это тормозная и не работающая ерунда.

Babylon.js — Inspector

• Three.js — это кросс браузерная библиотека, используемая для создания и отображения анимированной компьютерной 3D графики в веб-приложениях. Она является библиотекой, а не игровым движком. Поэтому в ней нет встроенных функций для систем частиц, UI и т. п. Библиотека очень популярная, с кучей примеров, уроков (мне кажется, если все уроки по движка сложить вместе, то всё равно будет меньше, чем для Three.js). Документация и API мной воспринимаются легко. Минусы понятны: многое нужно сделать самому.

Мой выбор

Я остановился на библиотеке Three.js. У меня сложилось представление о том, какой должна быть архитектура игры, и множество библиотек, написанных на JavaScript/TypeScript, мне помогут. Они универсальны и могут использоваться для разных задач. У Three.js много доступного материала для изучения, много примеров, и за счет архитектуры их легко понять.

Например, я уже часто использую библиотеку Tween.js для простых анимаций, которая включена в PlayCanvas. Miniplex поможет с ECS шаблоном. Точнее, он поможет с хранением данных об объектах и доступом к ним. Мне не нужно создавать массивы, хранить ссылки на объекты или проходить по дереву сцены. Достаточно отправить запрос в «хранилище» и получить нужные объекты, как в системе управления базами данных. Для работы со звуком планирую использовать библиотеку howler.js. Для алгоритма поиска пути есть интересная библиотека Grid Engine.

Для платформ ПК, смартфонов существуют технологии «обёртки» (Tauri, Neutralinojs, Electron, Cordova, Capacitor). Они позволяют получить исполняемый файл для нужной операционной системы и предоставляют API для работы с ней.

Вот такие рассуждения и выводы у меня получились. Это мое субъективное мнение. Интересно, что Вы думаете по этому поводу. Спасибо, что дочитали до конца!
Удачи! =)