История для зумеров: жизнь Петра I в мобильной игре

Рассказываем и показываем, как мы сделали образовательную веб-игру по истории жизни Петра I

В декабре 2021 года прошел культурно-образовательный хакатон «История будущего». Внутри хакатона команды креативных молодых людей соревновались за возможность воплотить в жизнь культурный проект.

По итогам защиты лучшим признали концепт команды «Петриада». Команда студентов разработала концепт веб-игры по истории жизни Петра I. Миссия проекта — сделать изучение истории более увлекательным и современным с помощью привычной и понятной подросткам формы — игры. За помощью с разработкой победители обратились в Molinos, а мы с энтузиазмом влились в проект.

«Петриада» — визуальная новелла, сюжет которой строится вокруг истории жизни Петра I с 1687 по 1704 год. Игра разделена на 5 глав, внутри которых: 18 игровых эпизодов, 4 мини-игры с 24 вариантами заданий. По сюжету игрок знакомится с хроникой жизни царя. За время царствования Петру неоднократно приходилось принимать сложные решения, от которых зависели судьбы людей и Российского государства.

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

Название «Петриада» отсылает к эпической поэме А. Н. Грузинцева. Она была написана в начале XIX века и воспевала деяния Петра I и его любовь к Отечеству; в свою очередь это аллюзия на древнегреческую поэму о взятии Трои — «Илиаду» и другие поэмы классического стиля.

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

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

Главный челлендж — уложиться в 4 месяца. Нужно успеть:

Команда хакатона тоже участвовала в процессе разработки. Ребята распределили между собой роли:

Дизайн

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

Для сравнения, в среднем разработка графики и интерфейсов даже для небольших игровых проектов занимает от 6 до 12 месяцев. Мы, согласно требованиям команды, уложились в 4 месяца.

Дизайн разделен на:

Конструктор

Технологическая начинка игры — универсальный внутренний конструктор на Unity.

Гравюра

Написание детекта позиций ластика над текстурой

Отдельно поговорим про мини-игры. Когда мы столкнулись с проблемой отображения и функционала игры “Гравюра” на устройствах под операционной системой IOS, мы решили обойти готовые решения стороной. Изначально прогресс проверялся подсчетом прозрачных пикселей в стираемой текстуре. Для того, чтобы проверять прогресс, сделали детект позиций ластика. Тестовые квадратики: черный - позиция пуста, зеленый - пользователь провёл в этом сегменте ластиком.

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

Пазлы и кроссворд

Для игр «пазлы» и «кроссворд» приобрели готовые плагины, которые кастомизировали под проект. Внутри был странный функционал крутящихся пазл, что в связке с unity webGL выглядело тормозяще, особенно на мобильных устройствах. Его пришлось перерабатывать.

Для каждого пазла подбирали конкретные корабли. Через эту игру пользователь знакомится с разными кораблями и их названиями. Пазлы разного уровня сложности начиная с 8 элементов и заканчивая 24.

Интеграция в телеграм бота

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

Поддержка браузеров
WebGL — технология, которую поддерживают не все браузеры. Из-за этого пришлось дополнительно проверять работоспособность сайта в разных браузерах.

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

А также:

Если вы хотите написать сторонние API для проекта, имейте в виду, что у вас просто может не быть возможности завернуть это API в сам проект Unity.

Если вы хотите собирать метрику, то для этого потребуется плагин, который пробросит показатели метрики в проект Unity. Либо, можно написать API для метрики, которое будет отслеживать нужные параметры и передавать их на бэкенд.

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

Чтение пикселей в текстурах не работает на IOS и IPadOS, есть открытая ошибка об этом с 2016 года (поправили для всего, но айфон всё равно ломается). Как это решили мы — определением позиции курсора.

Чтение байтов пикселей через GL не работает на веб. Разработчики Unity обещают правку через две версии от текущей (версия выходит раз в месяц, текущая вышла в конце октября).

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

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

Рекомендуем использовать последние версии браузеров Firefox и Chrome (для обоих 64-битные версии).

Project Manager: Тлусты Екатерина

Account manager: Кутилина Ольга

Директор по развитию: Татьяна Анашкина

Devops: Веренцов Михаил

Unity developer

Back-end developer: Макаров Александр

Design: Раменский Кирилл

Tester: Латипов Элвис

Если хотите проверить свои знания в истории, игра доступна по ссылке. Пишите свои вопросы в комментариях — мы обязательно ответим!