gilbertfrost

Исходный код проекта: GitHub

Что нужно делать в игре

Игра отдаёт дань уважения играм Exit 8 и серии Backrooms.

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

Затем начинаются следующие циклы. Комната выглядит почти так же, но в ней появляется изменение.

Задача игрока — заметить отличие и выбрать правильную дверь:

• «Есть аномалия»;

• «Аномалий нет».

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

Почему именно такой формат

В качестве визуального направления я выбрал мрачную low-poly графику с эффектом старых игр для PlayStation. Хотелось получить не реалистичный бар, а немного странное место, которое вызывает дискомфорт.

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

Что такое Three.js

Three.js — это JavaScript-библиотека для работы с 3D-графикой в браузере. Она использует WebGL и предоставляет базовые инструменты для создания сцен, камер, геометрии, материалов, текстур, освещения и загрузки 3D-моделей.

Важно, что Three.js — не игровой движок в привычном смысле. В ней нет готового редактора уровней, полноценной физики, системы персонажей, диалогов, сохранений и других игровых подсистем, которые обычно ассоциируются с Unity или Unreal Engine.

По сути, это набор инструментов для отображения 3D-графики и работы с ней. Поэтому в Taproom 8 мне пришлось самостоятельно собрать многие части игры: игровой цикл, загрузку уровня, управление игроком и камерой, столкновения, двери, систему раундов и аномалий, звук, интерфейс и интеграцию с Яндекс Играми.

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

Как устроена разработка

Стек получился немного необычным для игры:

• Vue 3 — меню, настройки и интерфейс;

• TypeScript — игровая логика и типы;

• Three.js — 3D-сцена, камера, модели и взаимодействия;

• Vite — сборка проекта;

• Pinia — состояние интерфейса;

• vue-i18n — русский и английский языки;

• Vitest — тестирование игровой логики.

Vue здесь не управляет каждым объектом в 3D-сцене. Я разделил приложение на два слоя.

Игровой движок отвечает за сцену, игрока, камеру, столкновения, двери, звук и раунды. Vue отвечает за экраны, HUD, меню, настройки и мобильные контролы.

Между ними используется типизированная шина событий. Например, UI не должен знать, как именно Three.js открывает дверь. Он отправляет событие «выбрать дверь», а игровой координатор уже решает, что делать с этим действием.

Такой подход оказался полезен, когда количество систем начало расти: меню, загрузка, звук, пауза и сам игровой цикл не превратились в один огромный компонент.

Аномалии сделаны как отдельная система

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

Сцена загружается из GLB-файла. Внутри неё есть специальные группы объектов, которые движок сканирует при загрузке. По имени объекта и суффиксу сложности он понимает, что с ним можно сделать.

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

Технически аномалия применяется только на время текущего цикла. После ответа игрока состояние объекта восстанавливается, а перед следующим раундом активируется новая аномалия.

Звук и управление

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

Самый неприятный этап — публикация

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

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

Интеграция с платформой включает уведомление о готовности игры, управление игровым состоянием при паузе, полноэкранную и rewarded-рекламу, а также задел под внутриигровые покупки.

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

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

Что получилось в итоге

На текущей версии в репозитории есть отдельный 3D-движок, UI на Vue, загрузка GLB-модели и текстур, PS1-рендеринг, мобильное управление, звук, локализация, интеграция с платформой и система аномалий.

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

Главным результатом для меня стал опыт создания полноценного игрового проекта поверх Three.js: с собственной архитектурой, игровым циклом, системой аномалий, интерфейсом, звуком, оптимизацией и публикацией.