Создание внутрикорпоративной игры для менеджеров компании «Совкомбанк»
Геймификация — использование игровых механик в рабочих процессах для вовлечения, мотивации и развития персонала — показывает высокую эффективность: 87% сотрудников ощущают более тесную связь с компанией и 89% становятся продуктивнее, согласно исследованию TalentLMS.
Один из наших давних партнеров Совкомбанк обратился к нам с идеей разработки игры для своих сотрудников. Компания в целях увеличения прибыли стремилась привнести игровые механики в работу своих менеджеров, вовлечь их в соревнование и тем самым улучшить выполнение KPI.
Механика игры подразумевала большое количество анимированных элементов интерфейса, математическая модель содержала более 200 настраиваемых коэффициентов и формул. Это требовало обеспечить хорошие параметры быстродействия для пользовательской части и заложить корректную архитектуру для всего проекта в целом. В кейсе расскажем, какие решения мы применили для такого продукта.
Задача
Клиент решил создать игру в формате квеста. У каждого менеджера есть персонаж, который входит в определенный клан или альянс в соответствии с реальной структурой компании. Квесты назначаются руководителями подразделений. Они соответствуют рабочим задачам сотрудников. Также игроки могут участвовать в «боях» друг против друга, изменяя групповые рейтинги и свои собственные.
За выполнение заданий персонажи получают «золото», на которое могут купить игровые предметы — оружие, брони, артефакты и эликсир. Они влияют на показатели игрока в бою и определяют исход сражения. Игровое «золото» можно потратить и на неигровые предметы, например, с их помощью приобрести различную технику.
Реализация
На начальном этапе разработка шла параллельно с написанием логики игры, из-за чего было принято решение реализовывать фичи в несколько этапов. Первостепенно закладывалась MVP-версия, которую мы дорабатывали по мере появления новых вводных.
Автотесты для расчетных формул
На проекте мы работали совместно со специалистами Совкомбанка: они проводили расчеты по игровому балансу. Его задача — достижение равновесия между персонажами, плавности игрового процесса и оптимальной сложности прохождения. Для проверки корректности формул мы подключили автотесты. Так, при изменении математиками коэффициентов не нужно было участие QA-специалистов — автоматизация тестирования покрывала эту задачу.
Систематизация при разработке интерфейса
В играх процесс создания интерфейса, как правило, более трудоемкий, чем на сайтах или в других стандартных системах. Для того чтобы упростить разработку, мы применили систематический подход:
- на первом этапе выделили около 40 типовых элементов;
- на втором — классифицировали их в зависимости от функционала и сложности.
Затем при создании страниц и компонентов использовали эти готовые элементы и строили из них, как из кирпичиков, более сложные структуры. Это позволило нам кастомизировать визуальную составляющую игровой части, избежать переписывания базовых функций и эффективно реализовать повторное использование кода.
Оптимизация основных параметров загрузки
Мы стремились проработать архитектуру приложения таким образом, чтобы оптимизировать основные параметры загрузки и сделать игровой процесс комфортным для пользователя. Вся статичная информация загружается в начале игры и при необходимости кешируется, а при переходе между страницами обновляется только та часть, которая была изменена.
До кеширования данных при загрузке страницы мы получали в среднем 28 запросов и обрабатывали их около 8 секунд. С кешированием взаимодействие с сервером ускорилось – количество запросов сократилось до 12, их обработка стала занимать не более 3 секунд.
Администрирование
Мы разработали административную панель управления, которая позволяет создавать новые задания, менять базовые настройки и обновлять список товаров.
Результат
1. Разработали около 40 типовых компонентов интерфейса и 20 анимаций, что позволило значительно сократить время на создание новых страниц и новых элементов.
2. Спроектировали архитектуру JS-приложения, которая позволяет достаточно гибко реагировать на изменения данных и эффективно сохранять состояние игрового процесса без лишних запросов к бэку. Всего в системе 4 типа инициализации: при загрузке приложения, при загрузке страницы, при событии на странице, при внешнем событии на сервере (с использованием механизма сокетов). Благодаря этому мы оптимизировали основные параметры загрузки и ускорили взаимодействие с сервером. Каждый из указанных типов инициализации может быть использован на любой странице и в любом компоненте.
3. Разработали приятный и отзывчивый интерфейс.
- переходы между экранами оптимизированы по времени;
- при переходах используется анимация.
4. Реализовали панель администратора с функциями для добавления, удаления, редактирования элементов, создания таблиц.
5. Написано около 500 тест-кейсов, которые покрывают административную панель и пользовательскую часть.
Технологии
Laravel Framework, Vue.js, Nuxt.js, Mysql, Active Directory, JWT, Oracle, Swagger.