Девлог 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.

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

77
5 комментариев

PixelStreaming, при помощи которого есть возможность настроить плотное взаимодействие игры с веб-браузеромЗачем? У анрила есть html5 билд, где у ЖСа будет возможность взаимодействия с анрил-движком.

Ответить

Это разные вещи.

HTML5-билд — способ деплоя в html5, чтобы можно было запустить игру в клиентском браузере через web assembly со всеми соответствующими ограничениями или достоинствами: нагрузка на браузер клиента, ограниченная графика и необходимость иметь достаточную хорошую видеокарту для запуска игры. А еще уже не поддерживается Эпиками — скинули технологию на поддержку коммьюнити.

PixelStreaming — видеостриминг игры через WebRTC, где игра рендерится на серваке (или в облаке, сколько хочешь, столько запускай инстансов игры): клиенту не нужна хорошая видеокарта, только хорошая сеть, а нагрузка на клиентский браузер в пределах обычного использования WebRTC.

Для моего проекта больше подходит PixelStreaming — максимизация возможной аудитории за счет отсутствия требований по видеокарте, а недостатки PixelStreaming в виде сетевых задержек и артефактов нивелируются задумкой, что игрок всегда наблюдает за происходящим якобы через веб-камеру (зернистость на видео), то есть, любые реальные артефакты и задержки будут восприниматься вполне себе ожидаемо.

Плюс архитектурно стек через PixelStreaming удобнее для меня в разработке, так как мы четко разделяем проект на две части: игра и взаимодействие c игроком через внешние технологии: браузер клиента, docker, или с чем угодно, где есть возможность посылать HTTP-запросы, можно игру интегрировать хоть с Arduino.

2
Ответить