Девлог web colobot на Unreal Engine
Хотелось поделиться "скриншотом" (в самом низу) и сумбурными мыслями из моего хобби-проекта. Проект вдохновлен космической игрой Colobot, в которой можно программировать роботов на Си-подобном языке.
Я хотел сделать свою версию игры, но с возможностью использовать реальные языки программирования, технологии и потенциально красивую картинку. Благо, как оказалось игровой движок Unreal Engine имеет такую технологию как PixelStreaming, при помощи которого есть возможность настроить плотное взаимодействие игры с веб-браузером через WebRTC: можно слышать и видеть саму игру (ещё взаимодействовать с игрой через клавиатуру и мышкой, но в моем проекте это не нужно).
Мой бекграунд
Веб-разработчик, в геймдеве и в Unreal Engine – 0 опыта.
Технологический стек
Web front: используется Vue 3, monaco (текстовый редактор из Visual Studio Code), xterm.js (для вывода результатов кода), webrtc.js, app.js (библиотеки с PixelStreaming, идущие с UnrealEngine).
Web backend: node.js (модифицированный скрипт из PixelStreaming), который соединяет видеопоток от PixelStreaming с клиентом через WebRTC, docker с ruby.
Backend: Unreal Engine, с обработкой команд через веб-сокеты и PixelStreaming.
MVP
Уровни с небольшими заданиями на программирование или администрирование (корректно настроить веб-сервер, к примеру) со сквозным сюжетом. Можно проект использовать для обучения человека какой-то технологии, построив соответствующее окружение для демонстрации преимуществ той самой технологии.
Сейчас есть только первое задание — перенести ящик на палетку, запрограммировав робота на языке Ruby.
Как это работает?
Когда пользователь нажимает кнопку Run, содержимое текстового редактора через HTTP отправляется в Docker-контейнер, где выполняется и формирует команды вида MoveToActor, DropToActor, GrabActor в JSON для Unreal Engine, который принимает эти команды и вызывает связанные блюпринты или код.
Что хочется добавить в ближайшее время?
- Менять вид камеры (с видеокамеры из лаборатории на вид из глаз робота) через кнопочки в веб-интерфейсе и через код.
- Удобный доступ к видеопотоку PixelStreaming через код, чтобы можно было натравить OpenCV.
- Новые уровни.
Простите за неуклюжие анимации, стандартные ассеты. В основном фокусировался на технической реализации — proof of concept.
Ну и чтобы не было скучно проходить миссии на программирование, набросал схематично простенький сюжетик.
PixelStreaming, при помощи которого есть возможность настроить плотное взаимодействие игры с веб-браузеромЗачем? У анрила есть html5 билд, где у ЖСа будет возможность взаимодействия с анрил-движком.
Это разные вещи.
HTML5-билд — способ деплоя в html5, чтобы можно было запустить игру в клиентском браузере через web assembly со всеми соответствующими ограничениями или достоинствами: нагрузка на браузер клиента, ограниченная графика и необходимость иметь достаточную хорошую видеокарту для запуска игры. А еще уже не поддерживается Эпиками — скинули технологию на поддержку коммьюнити.
PixelStreaming — видеостриминг игры через WebRTC, где игра рендерится на серваке (или в облаке, сколько хочешь, столько запускай инстансов игры): клиенту не нужна хорошая видеокарта, только хорошая сеть, а нагрузка на клиентский браузер в пределах обычного использования WebRTC.
Для моего проекта больше подходит PixelStreaming — максимизация возможной аудитории за счет отсутствия требований по видеокарте, а недостатки PixelStreaming в виде сетевых задержек и артефактов нивелируются задумкой, что игрок всегда наблюдает за происходящим якобы через веб-камеру (зернистость на видео), то есть, любые реальные артефакты и задержки будут восприниматься вполне себе ожидаемо.
Плюс архитектурно стек через PixelStreaming удобнее для меня в разработке, так как мы четко разделяем проект на две части: игра и взаимодействие c игроком через внешние технологии: браузер клиента, docker, или с чем угодно, где есть возможность посылать HTTP-запросы, можно игру интегрировать хоть с Arduino.