Идея игровой механики
У клиента уже был опыт реализации подобных проектов, поэтому повторение существующих решений не рассматривалось, нужно было предложить принципиально новый формат взаимодействия пользователя с игровым миром.
Провели серию рабочих сессий
Проанализировали ограничения предыдущих механик: разрывность сцен, экраны с переходами, потерю вовлечения между этапами. Это позволило нам прийти к новому решению игровой механики — бесшовное горизонтальное перемещение в формате интерактивной визуальной новеллы, где:
• Игровой мир представляет собой единое пространство без деления на отдельные экраны.
• Пользователь перемещается по локациям через горизонтальный скролл.
• Сцены, диалоги и игровые элементы интегрированы в поток и не требуют отдельных загрузок или переключений.
• Переходы между локациями происходят незаметно для пользователя.
Такая реализация позволила устранить разрывы в восприятии, повысить вовлечение и создать эффект непрерывного путешествия внутри игрового мира. На момент разработки подобный подход не использовался в предыдущих проектах клиента и стал ключевым отличием решения.
Придумали сюжетную линию
На этапе концепции мы проработали несколько вариантов сеттинга и историй. В результате совместно с заказчиком, вдохновленные фильмом «Дюна», выбрали направление пустынного фэнтези – мир песков, древних сил и скрытых артефактов. По сюжету игрок становится Избранным, которому предстоит пройти через локации этого мира, выполнить миссию и восстановить жизнь на планете, когда-то утратившей свой жизненный источник – Кристалл.
Разработали сценарий на 30 листов
В сценарии мы детально спроектировали:
• Путь игрока от начала до финала.
• Последовательность локаций и их роль в раскрытии сюжета.
• Персонажей и их функции в повествовании.
• Логику переходов между сценами.
• Точки интеграции игровых механик (мини-игр) в сценарий.
Отдельное внимание уделили тому, чтобы игровые задания не воспринимались как отдельные вставки, а органично продолжали историю и усиливали вовлечение.
Проработали 200 диалогов
К написанию диалогов перешли только после полной проработки сценария и всей логики игры. Это позволило встроить реплики в уже выверенную логику повествования.
Ключевые требования к диалогам:
• Простота и быстрая считываемость.
• Понятная передача смысла и навигации по игре.
• Сохранение темпа прохождения без перегрузки текстом.
Работа над текстом была тщательной: мы многократно переписывали, сокращали и уточняли реплики, выверяя каждую формулировку. Важно было сохранить смысл и логику истории, а также подготовить текст к другому этапу — озвучке, где речь должна звучать естественно и живо.
Разработали 10 уникальных локаций
Основная сложность заключалась в формате игры: локации должны были быть протяжёнными на несколько экранов и логично продолжаться за пределами видимой области монитора. Это требовало точной подгонки всех элементов и продуманной композиции без «разрывов» и визуальных несостыковок.
Каждая локация создавалась как сложная многослойная сцена
• Элементы генерировались и отбирались по частям – архитектура, окружение, детали.
• Далее вручную собирались в единую композицию.
• Выстраивалась перспектива и глубина сцены.
• Производилась точная стыковка элементов для бесшовного перехода
• Сцена приводилась к единому свету, цвету и стилю.
Основная работа над локациями сводилась к ручной проработке. Нейросети использовались как инструмент для генерации базовых элементов, но финальный результат формировался за счёт детальной сборки и доработки в графических редакторах – Иллюстраторе, Фотошопе, Фигме.
Сгенерировали для локаций более 6 000 изображений
Параллельно была проведена масштабная работа по настройке нейросетевых инструментов:
• Обучили и откалибровали модели под нужный стиль.
• Добились стабильной генерации без артефактов и «шума».
• Контролировали детализацию архитектуры и повторяемость визуального языка между сценами.
В результате были созданы локации с выраженной глубиной и перспективой, они вовлекают, побуждают рассматривать детали и создают пространство, в которое хочется «зайти».
Разработали 13 персонажей по прототипу реальных людей
В готовые локации интегрировали персонажей – наставника и девушек-хранительниц, которые сопровождают игрока, дают подсказки и ведут его по сюжету. Образы создавались на основе реальных прототипов, поэтому одной из задач было добиться максимального сходства при сохранении художественной выразительности.
Для каждого персонажа:
• Проработали внешность, пластику и позирование, одежду и стилистику костюмов, аксессуары.
• Дополнительно адаптировали под окружение: выравнивание по цвету и свету сцены, учёт фактур и материалов локации, интеграция в перспективу и глубину кадра.
Это позволило сделать персонажей частью среды, а не отдельными визуальными элементами.
Генерация изображений для героинь
С генерациями образов для девушек было не всё так просто. По задумке наряды должны были быть выразительными и местами достаточно откровенными, чтобы подчеркнуть красоту девушек и атмосферу мира.
Но ограничения нейросетей по генерации контента не всегда позволяли получать нужный результат целиком, поэтому:
• Нейросети использовались для генерации отдельных фрагментов.
• Далее элементы собирались по частям.
• Финальный образ дорабатывался вручную в Фотошопе, Фигме для достижения точности и качества.
За время работы над персонажами с помощью нейросетевых инструментов было сгенерировано более 5 000 изображений.
Разработали 6 мини-игр с разными игровыми механиками
Ключевая задача была в том, чтобы удержать баланс: с одной стороны — вовлечь игрока и разнообразить прохождение, с другой — не перегрузить его сложными механиками и не «сломать» темп истории. Поэтому мы сознательно выбрали простые и интуитивно понятные форматы: кликер, раннер, мемо, сортер и пазл — такие, в которые можно включиться за несколько секунд без обучения.
Мини-игры проектировались как часть нарратива:
• Каждая механика привязана к конкретной локации.
• Игровые действия логически продолжают сюжет.
• Вход в мини-игру и выход из неё происходят без разрывов в восприятии.
Для сохранения целостности мира каждая мини-игра:
• Наследует визуальный стиль локации.
• Использует элементы окружения (объекты, цвета, атмосфера).
• Адаптируется под общий свет, глубину и композицию сцены.
Мини-игры встроены в систему прогресса:
• За прохождение игрок получает осколки Кристалла.
• Каждый этап открывает новые локации.
• Механики поддерживают движение по сюжету и усиливают мотивацию к прохождению.
Озвучили 200 реплик диалогов и написали главный саундтрек к игре
Процесс озвучки персонажей требовал высокой точности:
• Необходимо было сохранить естественность речи (акценты, паузы, ударения).
• Избежать «синтетического» звучания.
• Адаптировать реплики под темп сцен и взаимодействие игрока.
Для этого:
• Короткие фразы разбивались на отдельные смысловые части.
• Каждая часть озвучивалась отдельно.
• Финальные реплики собирались вручную в цельные аудиодорожки.
Для персонажа-наставника реализовали отдельный подход
• Обучили голосовую модель на основе интервью реального человека.
• Добились уникального тембра и характерной интонации.
• Усилили узнаваемость и «живость» персонажа.
В рамках проекта:
• Записано и интегрировано более 200 реплик.
• Выстроена система подачи диалогов с учётом темпа игры и сценария.
• Обеспечена синхронизация речи с визуалом и интерфейсом.
Разработали музыкальное сопровождение и написали главный саундтрек к игре
Сначала определили общее музыкальное направление, которое поддерживает атмосферу мира и не перетягивает внимание на себя. Фоновую музыку для локаций создавали с помощью нейросетевых инструментов: добивались баланса между динамикой и ненавязчивостью, чтобы треки усиливали эмоции, но не мешали восприятию сюжета и игрового процесса.
В процессе работы над музыкой родилась идея сделать полноценный главный саундтрек к игре – отдельную композицию, которую заказчик сможет использовать в промо. Мы разработали его и в итоге даже встроили в саму игру: он звучит в начале и в финале.
Для мини-игр также разработано 6 разных музыкальных композиций:
• Динамичные треки – для активных механик.
• Более спокойные – для размеренных сценариев.
Вся музыка органично вписывается в игру – поддерживает атмосферу и ритм, не нарушает целостность восприятия.
Разработали 2 короткометражных видео – пролог и эпилог
Отдельной фишкой проекта стали видео-тизеры. Такого формата не было в предыдущих играх Технониколь, и задача стояла амбициозная: усилить погружение за счет роликов и добавить ощущение кинематографичности, не выбиваясь из общего стиля игры.
Мы подошли к этому как к полноценной продакшн-задаче
Для каждого видео разработали сценарий, прописали текст и покадрово разложили историю – с учётом ритма, смены планов, реплик и драматургии:
• Сначала сгенерировали базовые визуальные кадры с помощью нейросетевых инструментов.
• Вручную доработали цвет, свет, детали, композицию.
• Привели кадры к единому стилю и атмосфере.
• «Оживили» сцены с помощью нейросетевых инструментов.
Сборка и синхронизация
Ключевая сложность – интеграция всех элементов в единый видеоряд.
Необходимо было:
• Синхронизировать визуал, закадровый голос, субтитры и музыку.
• Выравнять темп и ритм сцен.
• Соблюсти читабельность субтитров и таймингов реплик.
• Поддержать согласованно эмоциональной динамики (музыка + визуал + голос).
В результате пролог и эпилог работают как полноценные короткометражные видео, которые задают тон в начале, погружают в мир и логично завершают весь игровой опыт, оставляя ощущение завершённой истории.
Техническая реализация проекта
Проект представляет собой большой интерактивный сайт с игровыми элементами, где техническая реализация стала фундаментом для качественного пользовательского опыта. Мы сознательно отошли от шаблонных решений в пользу гибридной архитектуры, которая сочетает надёжность статического фронтенда с гибкостью компонентного подхода – и всё это без ущерба для производительности.
Ядро сценария — чистый стек:
• Vanilla JavaScript (ES6+), CSS3 и семантический HTML5 — основа основного игрового сценария. Это позволило минимизировать накладные расходы, исключить зависимости от тяжёлых фреймворков и обеспечить максимальную предсказуемость выполнения кода.
• Gulp 5 в качестве сборщика: кастомизированный пайплайн для оптимизации ассетов, минификации, инлайнинга критических стилей и управления версиями ресурсов.
Для мини-игр интерактивные модули – там, где это действительно нужно:
• Мини-игры между локациями реализованы на Vue.js в изолированном режиме. Такой точечный подход позволил использовать реактивность и компонентную модель только в зонах высокой интерактивности, не перегружая основное приложение.
• Бесшовная интеграция Vue-виджетов в статическое ядро через продуманный API-слой и управление состоянием на уровне событий.
Производительность как основной приоритет
Учитывая насыщенность проекта графикой высокого разрешения, оптимизация стала не просто задачей, а философией разработки.
Стратегия работы с изображениями:
• Мультиформатная доставка: автоматическая генерация и сервинг изображений в форматах JPG / PNG / WebP / AVIF с фолбэком по поддержке браузером.
• Retina-поддержка: набор @2x-изображений для дисплеев с высокой плотностью пикселей без потери чёткости.
• Адаптивная загрузка: <picture> и srcset в сочетании с JS-детекцией возможностей устройства для выбора оптимального ресурса «на лету».
Анимации и интерфейс — максимум CSS, минимум JS:
• Все переходы, трансформации и визуальные эффекты реализованы на аппаратно-ускоренных CSS-свойствах (transform, opacity, will-change).
• JavaScript подключается только для сложной бизнес-логики и управления состоянием игры, что снижает нагрузку на главный поток и предотвращает «подвисания» при прокрутке и анимации.
• Использование CSS Containment и content-visibility для изоляции тяжёлых секций и ускорения перерисовки.
Интеллектуальная загрузка ресурсов:
• Реализовали многоуровневую систему предзагрузки и ленивой инициализации, которая обеспечивает быстрый отклик интерфейса при минимальном весе страницы.
• Ключевые принципы – приоритетная загрузка первого экрана с отложенной инициализацией второстепенных скриптов, постепенное обогащение интерфейса с учётом устройства и сети, фоновая предзагрузка следующих сцен без задержек и кэширование с версионированием для мгновенной повторной загрузки.
Модульность и поддерживаемость кода:
• Проект спроектирован с расчётом на долгосрочное развитие и командную работу: код разделён на независимые модули, благодаря чему изменения в одном месте не затрагивают остальную систему и не приводят к побочным эффектам.
Универсальная совместимость и деплой:
Одно из ключевых требований – проект должен работать везде, где есть браузер.
• Проект спроектирован как полностью статичное решение без серверных зависимостей – он запускается в любом современном браузере и может быть размещён на любом хостинге, поддерживающем отдачу статических файлов. Это обеспечивает максимальную универсальность и простоту деплоя.
• Функциональность адаптируется под возможности устройства и браузера: от современных десктопов до мобильных устройств с ограниченной производительностью.
• Отсутствие серверной логики снижает потенциальные риски, а весь код проходит оптимизацию и статическую проверку перед деплоем.
У нас получилась не просто игра в браузере. Этот проект – демонстрация того, как глубокая проработка архитектуры, фанатичная оптимизация и уважение к пользователю позволяют создать продукт, который:
• Работает плавно даже на слабых устройствах.
• Загружается мгновенно благодаря умной стратегии ресурсов.
• Легко поддерживается и масштабируется благодаря чистой структуре кода.
• Запускается где угодно — от локального сервера до простого хостинга.
• Сохраняет визуальное качество на любых экранах, включая 4K и Retina.
Более 50 000 человек уже прошли игру до конца
Мы разработали полноценный геймифицированный продукт, где сценарий, механика, визуал, звук и технологии работают как единая система. Геймифицированный сайт показал высокий уровень вовлечения пользователей. Более 50 000 человек прошли игру до конца, полностью завершили сюжетное путешествие и оставили свои контактные данные.
