Задача. Заказчику нужен был micro-learning: подача сложных научных концепций в игровой форме, чтобы материал усваивался легко и не превращался в текстовую лекцию. При этом — без долгой и дорогой разработки: требовался инструмент, на котором можно быстро собрать MVP, выкатить в продакшен и проверить гипотезы A/B-тестами.
Почему ванильный JavaScript. Движок должен был легко обслуживаться, не тянуть за собой ворох зависимостей и работать в браузере на любом устройстве — вплоть до самого слабого. Отказ от фреймворка дал именно это: нет этапа сборки и связанных с ним проблем, правки выкатываются сразу, баг чинится и уходит в прод за минуты.
Графика. Чтобы не раздувать бюджет на производство визуального контента, остановились на 2D и 2.5D — 2D с параллаксом и лёгкими для отрисовки эффектами. Картинка при этом не проиграла. Пайплайн изготовления и подготовки ассетов выстроил привлечённый на проект generalist.
Редакторы. С ним же мы прорабатывали, как должны работать сцены, переходы, повествовательная часть и экранные эффекты. Так движок оброс не только фичами, но и собственными инструментами: редактором ассетов, редактором сцен и редактором логики.
Визуальные эффекты
-
Переходы между сценами
Шторы-wipe, slide, zoom-удар, fade-обморок, iris-диафрагма — с настройкой цвета, длительности и точки фокуса.
-
Движение камеры
«Дыхание» кадра, дрожание ручной камеры, покачивание при ходьбе, медленный зум-луп, левитация объектов.
-
Атмосферные частицы
Дождь, снег, туман, пыль, листья, мерцающие звёзды — поверх любого фона.
-
Световые overlay-слои
Второй слой над фоном: мигание лампы, пульсация godrays, искрение проводки.
-
Процедурное свечение
Живое свечение зажжённых ламп частицами и halo с подсветкой всей сцены — без пре-рендера.
-
Удары и вспышки
Тряска картинки, белая вспышка, покадровая анимация фона — для акцентов и драматических моментов.
Игровые механики
Движок модульный: интерактивные механики подключаются под сценарий и задачи заказчика. В том числе:
-
Диалоги и ветвления
Реплики говорящих, баблы, выборы в разных стилях, развилки сюжета.
-
Флаги и концовки
Поднятие флагов, условные переходы и разные концовки в зависимости от выборов игрока.
-
Инвентарь и предметы
Сбор, хранение и использование предметов по ходу истории.
-
Интерактивные мини-игры
Расстановка предметов по зонам, сборка электрических цепей проводами, набор нужной комбинации значений.
-
Управление звуком
Фоновая среда, музыка и эффекты на независимых шинах с плавными переходами и приглушением.
-
Сохранение прогресса
Сохранение и загрузка состояния игры на нужных точках истории.
-
Достижения и таймеры
Награды за действия игрока и испытания на время внутри сцен.
-
Карта и характеристики
Навигация по локациям и RPG-характеристики героя, влияющие на сюжет.
Технологии
- JavaScript
- HTML5 Canvas
- CSS3
- YAML
- Web Audio API
- nginx