На протяжении трех лет мы в команде разрабатываем онлайн-игру для самих себя. Сначала, во времена ковида, она отчасти заменила нам офлайн-корпоративы, а сейчас, уже став традицией, дополняет живые встречи. Начинали с простенькой настолки в вебе с картой и кубиками, а сейчас делаем кастомную изометрическую 3D-игру с видом сверху на ThreeJS. В этой статье я поделюсь процессом эволюции игры с точки зрения разработки и геймдизайна, а также расскажу о задумке, мотивации и ресурсах на разработку и о том, как побудить коллег общаться друг с другом, работая из разных точек мира и разных таймзон.

Меня зовут Артемий, я фронтенд-разработчик, занимаюсь всякого рода импровизациями. Если нужно построить что-то экспериментальное в короткий срок — это ко мне.

Зачем мы это начали

2020 год, ковид, локдаун, ограничения на проведение офлайн-мероприятий. Компании во всем мире организуют удаленную работу, в опустевших офисах черствеют печеньки, а люди учатся работать, не отвлекаясь на домашних. Уверены, все вы прекрасно помните это время и свои ощущения.

Но когда стало ясно, что жизнь на планете не будет уничтожена вирусом из Ухани, а рабочие процессы встали на новые рельсы, возник следующий вопрос, который мы задали себе в тот момент. Работать на удаленке мы научились, а как нам удаленно отдыхать и общаться? Как развивать корпоративную культуру без живого общения на веселых корпоративах с баром, чилл-зонами, рок-концертами и всем тем, к чему мы привыкли? Онлайн-игра стала для нас ответом на этот вопрос.

Веб-настолка

Самым логичным способом для нас написать игру была веб-разработка — по долгу службы у нас в команде много веб-разработчиков. Фронтенд писали на React, бэкенд на Node.js. Для настолки с бросками кубиков такой стек годится.

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

Хозяйке на заметку: если накосячить на этапе проектирования карты, можно поломать весь игровой процесс. Поэтому мы тщательно продумывали, какие клетки будут двигать игрока вперед, а какие откидывать назад, так чтобы игрок не попал в петлю с постоянными ходами вперед-назад или непроходимыми заданиями. Грубо говоря, если игрок попадает на клетку, которая возвращает его на 5 ходов назад, там не должно быть клетки, которая вернет его обратно на 5 ходов вперед. Кажется очевидным ровно до того момента, как начинаешь перепроверять проект карты целиком на предмет таких вот подлянок.

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

Ах да, первую версию игры мы разработали и запустили за 2 недели. Просто в тот момент мы были крайне спонтанными, что захотелось сделать свою игру к Новому Году. Обошлось даже без серьезных багов, но больше мы так не торопились.

Следующую версию игры мы релизнули летом. В летней версии по небезызвестным причинам концепция поменялась на релокацию, и игроки перемещались по разным странам. Помимо того, что мы перерисовали карту, также добавили миниигры и «PVP-механику»: шахматы, камень-ножницы-бумага и даже Го (игра, а не язык программирования). Любой игрок мог бросить вызов другому игроку, и у того было право принять его или отказаться. Играли на деньги, точнее на внутреннюю валюту, которую потом обменивали на мерч, карточки в Золотое Яблоко и всякие подписки вроде TG Premium, фильмов и музыки.

Собственная «метавселенная»

Шел 2021 год. Тогда техногики только ожидали выхода AR-гарнитуры Apple, а Марк Цукерберг отчаянно грезил метавсленными, чем у одних вызывал восторженный энтузиазм, а у других — скептические насмешки. Под эти мемы о «метавёрсе» нам пришла идея разработать свою метавселенную дома. 

Шутки шутками, а концепция отлично билась с нашим желанием «заходить в игру в любое время, чтобы там всегда было что поделать», так что мы ухватились за эту идею. А раз назвался метаверсом — полезай в 3D.

Исследование 3D

Зачем изобретать велосипед, подумали мы, и начали с поиска готовых решений. Но скоро выяснилось, что все они либо очень дорогие (в районе 50-60к долларов), либо никак не кастомизируются. Но чаще всего и то, и другое одновременно. Ситуацию с готовыми лучше всего описал мой менеджер. 

Одним из многообещающих готовых решений стал thirdroom.io: открытый исходный код, встроенный аудио- и текстовый чат, поддержка серверной физики, и, что немаловажно, знакомый нам стек.

Но главным минусом в техническом плане стала слишком сложная архитектура — весь нетворкинг работал через Matrix (распределенная mesh-сеть) и требовал NATS, что делало использование вместе с Docker и nginx невероятно проблематичным.

Также я рассматривал Mozilla Hubs, но в связи с отсутствием многих встроенных возможностей, например создания заскриптованных объектов, от этого варианта тоже отказался ещё на этапе совместного демо-созвона.

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

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

В то же время запустился изометрический Плюс Сити, так что и у нас все сомнения отпали — раз им можно, то и мы двигаемся дальше. Дело оставалось за малым — выбрать стек. 

В качестве системы рендеринга я выбрал Three.js и его React-обертку Three Fiber. “Easy to learn - hard to master” — именно так я бы описал путь обучения. Первую демку я собрал буквально за один вечер.

В роли модели физического мира выступала библиотека Rapier, которую мы выбрали за довольно прозрачные концепты. Также из преимуществ пакет поставляется в виде WASM, что выражается в большом приросте производительности относительно аналогичных решений на JS.

В качестве сетевых библиотек мы вабрыли geckos.io для общения по UDP через WebRTC для быстрого обмена пакетами. В них мы передаём текущее состояние мира. А для событий, в получении которых мы должны убедиться, выбрали socket.io — одну из самых популярных библиотек для общения по WebSocket для Node.js.

Разработку самого 3D-экспириенса мы вели волнами, и каждый раз зачатки метавселенной разительно менялись. Первым делом добавили базовое отображение персонажа и его движение. После этого порядок был такой:

• поэксперементировали с инстансингом;

• после, начали работать над пост-процессингом;

• поработали над коллайдерами и связанными событиями;

• интегрировали видео-материал;

• сделали пространственное аудио и систему привязки событий к анимациям.

Далее завезли поиск маршрутов, который позволил управлять роботом не только клавиатурой, но и мышью.

Создали систему маркеров — они показывают направление к предмету на карте.

Не обошлось и без экспериментов. Мы пробовали использовать рендеринг через WebWorker с помощью react-three-offscreen — это должно было помочь разгрузить UI-поток. Но из-за того что библиотека до сих пор находится в экспериментальной стадии, количество проблем совместимости заставило нас отказаться от этой затеи. 

Ещё мы попробовали отрендерить игру через WebGPU. Результат на скрине, и, как видите, не слишком удачный. WebGPU, увы, пока не поддерживает пост-процессинг.

Зато на удивление, неткод на Node.js не оказался узким горлышком проекта и без труда справлялся с 80+ человек в одной сессии.

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

Ресурсы на разработку

Самую первую версию веб-настолки нам удалось создать за 2 недели, но если решите повторить, так спешить не советуем — это жестко. Хотя, несмотря на сжатые сроки, после релиза моим коллегам, не участвующим в разработке, даже не удалось ничего взломать!

К слову об участниках проекта. С самого начала в небольшую геймдев-студию вошли:

• человек-оркестр: менеджер проекта, дизайнер, аналитик и арт-дир в одном лице;

• иллюстратор, который рисовал карту;

• бэкенд-разработчик в моем лице;

• 3 фронтендера;

• тестировщик;

• 2 контентщика, которые придумывали задания и генерировали идеи, как сделать коммуникацию сотрудников эффективнее и веселее.

Когда поняли, что игра зашла, на разработку следующих версий команду мы уже расширили и стали закладывать адекватное время на разработку. Сейчас ресурсы на 3D-игру выглядят так.

Постоянная команда:

• Менеджмент проекта, дизайн, 3D-моделинг, анализ и арт-дирекшн в лице одного человека;

• Главный по разработке, отвечающий одновременно за фронтенд и бэкенд (мама, я в телевизоре);

• 1 фронтенд-разработчик;

• 1 бэкенд-разработчик;

• 1 QA-инженер.

Временная команда — те, кого периодически привлекаем:

• 1,5 дизайнера;

• 1,5 3D-моделлера;

• еще 2 фронтенд-разработчика;

• бэкенд-разработчик;

• QA-инженер.

Ну и это еще не все. Периодически в создании игры нам помогали и другие ребята на отдельных задачах: по дизайну, брейнштормам, копирайтингу, разработке и 3D-моделированию. Имена всех причастных увековечены в титрах к игре, а эта статья — еще один повод выразить всем благодарность, уверены, многие из команды ее прочитают.

Оно того стоило?

Да.

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

Во-вторых, мы начали делать 3D не только по воле прихоти (хотя не без этого, ладно). Игра стала нашим внутренним полигоном для экспериментов. Разрабатывая её, мы всё глубже погружаемся в ThreeJS, понимаем, на что технология способна, и получаем навыки, которые затем применяем в коммерческих проектах. Многоходовочка!

Сейчас поиграть в такую игру можно только, если вы сотрудник Мерка. Тем временем мы продолжаем её улучшать: придумываем новые локации, задания, расширяем карту и готовим следующие ивенты, и вместе с этим изучаем новые возможности 3D в вебе.

Если вам понравился описанный здесь процесс разработки и внутренняя кухня, подписывайтесь на телеграм-канал Merk/Daily — там ежедневно пишем о важных событиях в мире IT, разработке приложений и приглашаем сотрудников повести канал от первого лица. Я туда тоже пишу, например, вот отсюда начинается серия постов о создании игры, которые легли в основу этой статьи. Ну и комментарии пишите, буду рад пообщаться и ответить на вопросы по игре.