Разработка геймифицированного сайта для компании «Технониколь»

1. Вводная задача от заказчика, проблематика, цели

Корпорация ТЕХНОНИКОЛЬ – ведущий международный производитель надёжных и эффективных строительных материалов и систем.

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

ИДЕЯ ИГРОВОЙ МЕХАНИКИ

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

1) ПРОВЕЛИ СЕРИЮ РАБОЧИХ СЕССИЙ

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

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

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

2) ПРИДУМАЛИ СЮЖЕТНУЮ ЛИНИЮ

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

3) РАЗРАБОТАЛИ СЦЕНАРИЙ НА 30 ЛИСТОВ

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

• Путь игрока от начала до финала.
• Последовательность локаций и их роль в раскрытии сюжета.
• Персонажей и их функции в повествовании.
• Логику переходов между сценами.
• Точки интеграции игровых механик (мини-игр) в сценарий.

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

4) ПРОРАБОТАЛИ 200 ДИАЛОГОВ

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

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

• Простота и быстрая считываемость.
• Понятная передача смысла и навигации по игре.
• Сохранение темпа прохождения без перегрузки текстом.

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

5) РАЗРАБОТАЛИ 10 УНИКАЛЬНЫХ ЛОКАЦИЙ

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

Каждая локация создавалась как сложная многослойная сцена.

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

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

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

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

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

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

6) РАЗРАБОТАЛИ 13 ПЕРСОНАЖЕЙ ПО ПРОТОТИПУ РЕАЛЬНЫХ ЛЮДЕЙ

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

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

• Внешность.
• Пластику и позирование.
• Одежду и стилистику костюмов.
• Аксессуары.

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

• Выравнивание по цвету и свету сцены.
• Учёт фактур и материалов локации.
• Интеграция в перспективу и глубину кадра.

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

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

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


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

7) РАЗРАБОТАЛИ 6 МИНИ-ИГР С РАЗНЫМИ ИГРОВЫМИ МЕХАНИКАМИ

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

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

• Каждая механика привязана к конкретной локации.
• Игровые действия логически продолжают сюжет.
• Вход в мини-игру и выход из неё происходят без разрывов в восприятии.

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

• Наследует визуальный стиль локации.
• Использует элементы окружения (объекты, цвета, атмосфера).
• Адаптируется под общий свет, глубину и композицию сцены.

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

• За прохождение игрок получает осколки Кристалла.
• Каждый этап открывает новые локации.
• Механики поддерживают движение по сюжету и усиливают мотивацию к прохождению.

8) ОЗВУЧИЛИ 200 ДИАЛОГОВ И НАПИСАЛИ ГЛАВНЫЙ САУНДТРЕК К ИГРЕ

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

• Необходимо было сохранить естественность речи (акценты, паузы, ударения).
• Избежать «синтетического» звучания.
• Адаптировать реплики под темп сцен и взаимодействие игрока.

Для этого:

• Короткие фразы разбивались на отдельные смысловые части.
• Каждая часть озвучивалась отдельно.
• Финальные реплики собирались вручную в цельные аудиодорожки.

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

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

• Обучили голосовую модель на основе интервью реального человека.
• Добились уникального тембра и характерной интонации.
• Усилили узнаваемость и «живость» персонажа.

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

• Записано и интегрировано более 200 реплик.
• Выстроена система подачи диалогов с учётом темпа игры и сценария.
• Обеспечена синхронизация речи с визуалом и интерфейсом.

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

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

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

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

• Динамичные треки – для активных механик.
• Более спокойные – для размеренных сценариев.

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

9) РАЗРАБОТАЛИ 2 КОРОТКОМЕТРАЖНЫХ ВИДЕО — ПРОЛОГ И ЭПИЛОГ.

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

Мы подошли к этому как к полноценной продакшн-задаче.

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

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

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

• Синхронизировать визуал, закадровый голос, субтитры и музыку.
• Выравнять темп и ритм сцен.
• Соблюсти читабельность субтитров и таймингов реплик.
• Поддержать согласованно эмоциональной динамики (музыка + визуал + голос).

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

10) ТЕХНИЧЕСКАЯ РЕАЛИЗАЦИЯ ПРОЕКТА.

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

• 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 для изоляции тяжёлых секций и ускорения перерисовки.

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

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

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

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

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

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

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

Игорь Костромин

Руководитель студии, Веб-студия ONE PAGE

Мы не гнались за модными технологиями ради технологий.

Мы выбрали инструменты осознанно, и заставили их работать на результат. Это и есть инженерная культура в действии.

3. Результаты сотрудничества

БОЛЕЕ 50 000 ЧЕЛОВЕК УЖЕ ПРОШЛИ ИГРУ ДО КОНЦА

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отзыв от заказчика:

Харламова Надежда

Руководитель интернет-проектов, КЦ ППК «ТехноНИКОЛЬ»

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

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

Спасибо всей команде за профессионализм, креатив и партнёрский подход! Мы 100% готовы сотрудничать дальше и рекомендуем OnePage всем, кто хочет топовый результат. Вы — настоящие мастера своего дела!

Благодарственное письмо от компании «ТЕХНОНИКОЛЬ»

4. Заключение

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

• Удерживает баланс между вау-эффектом и реальным пользовательским опытом.
• Загружается мгновенно благодаря умной стратегии ресурсов.
• Легко поддерживается и масштабируется благодаря чистой структуре кода.
• Работает плавно даже на слабых устройствах.
• Запускается где угодно – от локального сервера до простого хостинга.
• Сохраняет визуальное качество на любых экранах, включая 4K и Retina.

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

Геймифицированный сайт для компании «Технониколь»