VK video не встроилось, поэтому ссылкой смотреть на вк-видева

Поиграться с демкой можно здесь: https://ubgamez.ru/graph2d/

В середине 90-х и начале 2000-х у многих из нас дома стояли пузатые ЭЛТ-мониторы с Windows 95/98 или голым MS-DOS. И среди сотен игр были те самые особенные шедевры, музыка из которых въедалась в память навсегда:

• Xixit (1995) — медитативная головоломка, чей глубокий, меланхоличный и невероятно атмосферный саундтрек затягивал так, что игру не хотелось выключать часами.

• Mine Bombers 3.1 (1995) — финский хит, за которым мы с друзьями устраивали ожесточенные баталии на одной клавиатуре. Взрывы динамита в темных шахтах гремели под бешеный, зажигательный драйв трекерных мелодий.

• А чуть позже — музыка из кейгенов и кряктро от культовых демогрупп (Razor 1911, Fairlight, Paradox), где авторы умудрялись упаковывать полноценные симфонии в файлы размером 20–50 килобайт!

Это была трекерная музыка (MOD, XM, IT, S3M). В ней не было записанного аудио: файл содержал крошечные кусочки сэмплов и таблицу шестнадцатеричных нот, которые компьютер синтезировал в реальном времени.

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

Недавно этот проект наконец ожил: https://tracker.snakelair.ru/.

Что умеет плеер?

Вместо того чтобы просто проигрывать скучные MP3-записи, мы сделали полноценный трекерный синтезатор на базе WebAssembly (LibOpenMPT):

1. Честный синтез на лету: Браузер сам воспроизводит сэмплы и ноты оригинальных модулей.

2. 1300+ легендарных треков: От саундтреков Xixit и Mine Bombers до культовых Unreal Super Hero 3, Space Debris и хитов Jesper Kyd.

3. Интерактивный микшер: Можно заглушить или послушать соло любой инструмент трека (бас, лид, ударные).

4. Управление скоростью: Вы можете плавно ускорять или замедлять трек от 40 до 300 BPM без искажения высоты голоса инструментов.

5. Демосцена 60 FPS: 5 процедурных 3D-миров (неоновый Synthwave ландшафт, кибер-туннели), живой осциллограф, матрица нот FastTracker II и падающий «водопад» нот.

6. 🌱 Эко-режим: Если вкладку свернуть, плеер автоматически усыпляет графику и играет музыку в фоне с нулевой нагрузкой на процессор.

Как проект удалось собрать без бесконечных месяцев разработки

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

• Проверил и вычистил базу из 1300+ файлов, устранил дубликаты и вытащил оригинальные имена авторов.

• Нашел просадки производительности в графике и переписал рендеринг матрицы нот на быстрый 2D Canvas (стабильные 60 кадров в секунду).

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

Где послушать и понастальгировать?

Плеер полностью бесплатный, без рекламы и регистрации:
👉 https://tracker.snakelair.ru/

Что включить первым делом:

• Unreal Super Hero 3 (Kenet & Rez — гимн демосцены)

• Space Debris (Markus Schneider / Captain)

• Stardust Memories (Jesper Kyd)

• Desert Dawn (Purple Motion / Future Crew)

• Темы из Mine Bombers и Xixit

А какие трекерные мелодии или DOS-игры 90-х больше всего запомнились вам? Делитесь в комментариях!

Исходный код проекта: 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: с собственной архитектурой, игровым циклом, системой аномалий, интерфейсом, звуком, оптимизацией и публикацией.

Отдельная механика - САМОСБОР. Это не катсцена, а событие, которое ломает нормальную прогулку: двери герметизируются, туман идет по щелям, монстры становятся активнее, а привычный маршрут перестает быть надежным. Иногда правильное решение - не геройствовать, а бросить часть плана и искать выход.

Сейчас в билде уже есть:

- подготовка перед вылазкой;

- бой, торговля, инвентарь и квесты;

- фракции, репутация и A-Life NPC;

- ручные и процедурные этажи;

- САМОСБОР-события;

- карта, слухи, контракты и браузерные сохранения;

- запуск прямо в браузере без установки.

Делается на TypeScript/Vite, WebGL/canvas и процедурных ассетах. Без Unity/Godot, без импортированных UI-фреймворков и без ассет-паков: текстуры, спрайты и звук генерируются внутри проекта.

Страница игры на itch.io: https://tenevik.itch.io/gigahrush

Я не прошу плюсов, рейтинга или продвижения. Мне полезнее конкретный фидбек:

1. Где в первые 5-10 минут непонятно, что делать?

2. Читается ли интерфейс, инвентарь, торговля и карта в браузере?

3. Достаточно ли очевидно, что брать перед вылазкой?

4. САМОСБОР ощущается опасностью или пока шумом на фоне?

5. В какой момент хочется закрыть вкладку?

6. Если билд долго грузится или уходит в темный экран, какой браузер/устройство и сколько ждали?

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

Контент-нота: это не NSFW, но это survival horror с боем, кровью, трупами, сиренами, монстрами и тревожными событиями.