Разработка иммерсивного геймифицированного сайта для ТЕХНОНИКОЛЬ

Разработать геймифицированный сайт, который станет центральным элементом маркетинговой кампании ежегодного проекта «Календарь ТЕХНОНИКОЛЬ».

Важно было не просто создать интерактивный продукт, а:


— сформировать полноценное игровое приключение с высоким уровнем вовлечения;

— органично встроить механику получения календаря как финальную награду;

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

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

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

С точки зрения архитектуры мы сознательно отказались от шаблонных решений и реализовали гибридный подход:

— статический фронтенд для скорости и стабильности;


— компонентная структура (в том числе на Vue.js для мини-игр) для гибкости и управляемости логики;


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

Что было реализовано:

— разработали оригинальную механику бесшовного перемещения;


— придумали сюжет и мифологию мира;


— спроектировали структуру и логику прохождения;


— написали сценарий и более 200 диалогов;


— создали 10 полноценных локаций с глубокой проработкой;


— разработали 13 персонажей на основе реальных прототипов;


— реализовали 6 мини-игр разных жанров (кликер, раннер, мемо, сортер, пазл);


— реализовали озвучку персонажей;


— разработали музыкальное сопровождение для локаций и мини-игр;


— создали главный саундтрек для использования в игре и промо;


— создали два кинематографичных тизера (пролог и эпилог), усиливающих погружение и завершающих историю.

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

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

Провели серию рабочих сессий.

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

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

— пользователь перемещается по локациям через горизонтальный скролл;

— сцены, диалоги и игровые элементы интегрированы в поток и не требуют отдельных загрузок или переключений;

— переходы между локациями происходят незаметно для пользователя.

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

Придумали сюжетную линию.

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

Разработали сценарий на 30 листов.

В сценарии мы детально спроектировали:

— путь игрока от начала до финала;

— последовательность локаций и их роль в раскрытии сюжета;

— персонажей и их функции в повествовании;

— логику переходов между сценами;

— точки интеграции игровых механик (мини-игр) в сценарий.

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

Проработали 200 диалогов.

К написанию диалогов перешли только после полной проработки сценария и всей логики игры. Это позволило встроить реплики в уже выверенную логику повествования.

Ключевые требования к диалогам:

— простота и быстрая считываемость;

— понятная передача смысла и навигации по игре;

— сохранение темпа прохождения без перегрузки текстом.

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

Основная сложность заключалась в формате игры: локации должны были быть протяжёнными на несколько экранов и логично продолжаться за пределами видимой области монитора. Это требовало точной подгонки всех элементов и продуманной композиции без «разрывов» и визуальных несостыковок.

Поэтому каждая локация создавалась как сложная многослойная сцена:

— элементы генерировались и отбирались по частям (архитектура, окружение, детали);

— далее вручную собирались в единую композицию;

— выстраивалась перспектива и глубина сцены;

— производилась точная стыковка элементов для бесшовного перехода;

— сцена приводилась к единому свету, цвету и стилю.

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

Сгенерировали для локаций более 6 000 изображений.

Параллельно была проведена масштабная работа по настройке нейросетевых инструментов:

— обучили и откалибровали модели под нужный стиль;

— добились стабильной генерации без артефактов и «шума»;

— контролировали детализацию архитектуры и повторяемость визуального языка между сценами.

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

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

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

Для каждого персонажа проработали:

— Внешность.

— Пластику и позирование.

— Одежду и стилистику костюмов.

— Аксессуары.

Дополнительно адаптировали под окружение:

— Выравнивали по цвету и свету сцены.

— Учитывали фактуры и материалы локаций.

— Интегрировали в перспективу и глубину кадра.

Это позволило сделать персонажей частью среды, а не отдельными визуальными элементами.

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

— нейросети использовались для поиска базовых вариантов;

— далее элементы собирались по частям;

— финальный образ дорабатывался вручную в Фотошопе для достижения точности и качества.


За время работы над персонажами с помощью нейросетевых инструментов было сгенерировано более 5 000 изображений. 

Ключевая задача была в том, чтобы удержать баланс: с одной стороны — вовлечь игрока и разнообразить прохождение, с другой — не перегрузить его сложными механиками и не «сломать» темп истории. Поэтому мы сознательно выбрали простые и интуитивно понятные форматы: кликер, раннер, мемо, сортер и пазл — такие, в которые можно включиться за несколько секунд без обучения. 

Мини-игры не рассматривались как отдельные блоки — они проектировались как часть нарратива:

— каждая механика привязана к конкретной локации;

— игровые действия логически продолжают сюжет;

— вход в мини-игру и выход из неё происходят без разрывов в восприятии.

Для сохранения целостности мира каждая мини-игра:

— наследует визуальный стиль локации;

— использует элементы окружения (объекты, цвета, атмосфера);

— адаптируется под общий свет, глубину и композицию сцены.

Мини-игры встроены в систему прогресса:

— за прохождение игрок получает осколки Кристалла;

— каждый этап открывает новые локации;

— механики поддерживают движение по сюжету и усиливают мотивацию к прохождению.

Особое внимание уделили озвучке персонажей. Процесс озвучки требовал высокой точности:

— необходимо было сохранить естественность речи (акценты, паузы, ударения);

— избежать «синтетического» звучания;

— адаптировать реплики под темп сцен и взаимодействие игрока.

Для этого:

— даже короткие фразы разбивались на отдельные смысловые части;

— каждая часть озвучивалась отдельно;

— финальные реплики собирались вручную в цельные аудиодорожки.

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

Для персонажа-наставника реализовали отдельный подход:

— обучили голосовую модель на основе интервью реального человека;

— добились уникального тембра и характерной интонации;

— усилили узнаваемость и «живость» персонажа.

В рамках проекта:

— записано и интегрировано более 200 реплик;

— выстроена система подачи диалогов с учётом темпа игры и сценария;

— обеспечена синхронизация речи с визуалом и интерфейсом.

Разработали музыкальное сопровождение и написали главный саундтрек к игре.

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

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

Для мини-игр также разработано 6 разных музыкальных композиций:

— динамичные треки — для активных механик;

— более спокойные — для размеренных сценариев;

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

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

Мы подошли к этому как к полноценной продакшн-задаче. Для каждого видео разработали сценарий, прописали текст и покадрово разложили историю — с учётом ритма, смены планов, реплик и драматургии:

— сначала сгенерировали базовые визуальные кадры с помощью нейросетевых инструментов;

— вручную доработали цвет, свет, детали, композицию;

— привели кадры к единому стилю и атмосфере;

— «оживили» сцены с помощью нейросетевых инструментов.

Ключевая сложность — интеграция всех элементов в единый видеоряд. Необходимо было:

— синхронизировать визуал, закадровый голос, субтитры и музыку;

— выравнять темп и ритм сцен;

— соблюсти читабельность субтитров и таймингов реплик;

— поддержать согласованно эмоциональной динамики (музыка + визуал + голос).

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

Ядро сценария — чистый стек:

— Vanilla JavaScript (ES6+), CSS3 и семантический HTML5 — основа игрового сценария. Это позволило минимизировать накладные расходы, исключить зависимости от тяжёлых фреймворков и обеспечить максимальную предсказуемость выполнения кода.

— Gulp 5 в качестве сборщика: кастомизированный пайплайн для оптимизации ассетов, минификации, инлайнинга критических стилей и управления версиями ресурсов.

Для мини-игр интерактивные модули – там, где это действительно нужно:

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

— Бесшовная интеграция Vue-виджетов в статическое ядро через продуманный API-слой и управление состоянием на уровне событий.

Производительность как основной приоритет.

Учитывая насыщенность проекта графикой высокого разрешения, оптимизация стала не просто задачей, а философией разработки.

Стратегия работы с изображениями:

— Мультиформатная доставка: автоматическая генерация и сервинг изображений в форматах JPG / PNG / WebP / AVIF с фолбэком по поддержке браузером.

— Retina-поддержка: набор @2x-изображений для дисплеев с высокой плотностью пикселей без потери чёткости.

— Адаптивная загрузка: и srcset в сочетании с JS-детекцией возможностей устройства для выбора оптимального ресурса «на лету».

Анимации и интерфейс — максимум CSS, минимум JS:

— Все переходы, трансформации и визуальные эффекты реализованы на аппаратно-ускоренных CSS-свойствах (transform, opacity, will-change).

— JavaScript подключается только для сложной бизнес-логики и управления состоянием игры, что снижает нагрузку на главный поток и предотвращает «подвисания» при прокрутке и анимации.

— Использование CSS Containment и content-visibility для изоляции тяжёлых секций и ускорения перерисовки.

Интеллектуальная загрузка ресурсов:

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

— Ключевые принципы — приоритетная загрузка первого экрана с отложенной инициализацией второстепенных скриптов, постепенное обогащение интерфейса с учётом устройства и сети, фоновая предзагрузка следующих сцен без задержек и кэширование с версионированием для мгновенной повторной загрузки.

Модульность и поддерживаемость кода:

— Проект спроектирован с расчётом на долгосрочное развитие и командную работу: код разделён на независимые модули, благодаря чему изменения в одном месте не затрагивают остальную систему и не приводят к побочным эффектам.

Универсальная совместимость и деплой:

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

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

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

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

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

— работает плавно даже на слабых устройствах;

— загружается мгновенно благодаря умной стратегии ресурсов;

— легко поддерживается и масштабируется благодаря чистой структуре кода;

— запускается где угодно — от локального сервера до простого хостинга;

— сохраняет визуальное качество на любых экранах, включая 4K и Retina.

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