Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

UX-дизайнер World of Tanks Алексей Астапов написал для DTF колонку, в которой подробно рассказал о разработке ежегодного ивента «Новогоднее наступление» в игре.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Вступление

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

Задача

Задизайнить «Новогоднее наступление» 2020-го с учётом новых геймдизайнерских вводных:

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

Начало

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

Да, мы запускаем новогодний ивент уже четвёртый раз, и большая часть нашей аудитории давно знакома с основными механиками. В этом постоянстве есть своя прелесть: наряжать ёлку, расставлять пандовиков, развешивать гирлянды — вот это вот всё… Очень круто, когда игровое событие становится чем-то традиционным, вроде новогодней рекламы Coca Cola или просмотра «Иронии судьбы».

Но давайте представим себе игрока, который приходит в насыщенное разнообразными механиками событие. Даже если часть из них ему знакома, человеку нужно время для того, чтобы понять, как работают новые/изменённые механики, время, чтобы заработать ивентовые бонусы, роняя на клаву праздничный оливье, время, чтобы сходить с друзьями в баню и время, чтобы поднять бокальчик Абрау-Дюрсо за здоровье UX-отдела, закусив это дело бутером с икоркой. А ещё хотелось бы успеть насладиться заработанными в ивенте бонусами.

С чего лучше начать проектирование важного ивента? Как принимать обоснованные проектировочные решения? Как донести гейм-дизайнеру, что кое-что можно сделать проще?

Как это было в 2019-м

Чтобы понять, что улучшить в интерфейсах НГ 2020, можно проанализировать интерфейс «Новогоднего наступления 2019», результаты тестирования в UX-лаборатории, отзывы игроков.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Ангар. Всё хорошо и привычно. Точка входа в покупку коробок на своём месте, но уже отъела кусок карусели. Виджет-вход в новогодний интерфейс сияет сверху.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

В случае с ёлкой слоты выстраиваются более-менее организованно, потому что объект имеет ось симметрии.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Иногда поповер перекрывает часть слотов.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Когда объект кастомизации несимметричен, слоты хаотично разбегаются по экрану.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Старый добрый коллайдер с изображением серии из 10-ти уже созданных украшений. Её часто использовали для демонстрации количества повторок, генерируемых коллайдером.

Если подойти к вопросу организации более системно: общий подход к НГ интерфейсу прошлых лет — это линейный доступ в интерфейсные узлы с общей разводной страницы.

Например, вы решили из альбома коллекций перейти в коллайдер:

  1. В альбоме коллекций нажимаете назад.
  2. Возвращаетесь в экран кастомизации ёлки, нажимаете на коллайдер.

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

Структура навигации «Новогоднего наступления 2020»

Здесь можно ознакомиться с механиками «Новогоднего наступления 2020»

Для себя в начале проекта я сформулировал несколько принципов.

Контент первичен и на нём должен быть основной акцент. Интерфейс вторичен.

Интерфейс должен дружить с контентом 3D-сцены. Следует избегать странных перекрытий 3D-сцены UI, не использовать на экране для UI больше места, чем следует, по возможности избегать жесткого виньетирования (затемнение по краям экрана для отделения UI-слоя от контента).

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

Один из первых скетчей для НГ 2020. Количество пунктов в главном меню сделали чётным, чтобы получить симметричную композицию и поместить виджет в центр. Проблема со слотами всё ещё актуальна
Один из первых скетчей для НГ 2020. Количество пунктов в главном меню сделали чётным, чтобы получить симметричную композицию и поместить виджет в центр. Проблема со слотами всё ещё актуальна
​Слотики выстроили внизу в ряд, знакомый паттерн из ангара
​Слотики выстроили внизу в ряд, знакомый паттерн из ангара

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

Первый скетч — как пристрелочный выстрел. Это материал для начала конструктивной беседы с геймдизайнерами о том, как что может выглядеть и работать. Реакция на скетч была разной: «Где коллайдер?!», «Почему убрали красивенькие скеморфичные иконки и снежинку?».

​Главный виджет Атмосферы праздника. Именно с него начался дизайн «Новогоднего наступления 2020»
​Главный виджет Атмосферы праздника. Именно с него начался дизайн «Новогоднего наступления 2020»

В главном виджете одним мерещились сметанные логотипы, другие видели схожесть с оформлением названий старых фильмов. Третьи с ностальгией вспоминали WORD ART.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

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

Занятно: в некоторых локализациях «Атмосфера праздника» — это одно слово. Для них дописал слово «уровень». А вот иероглифы не трогал, они сами по себе достаточно графичны.

Концепцию дизайна и виджет одобрили. Правда спустя пару, тройку, или четвёрку итераций.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

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

Новый годный коллайдер 3.0

Коллайдер претерпел значительный редизайн по следующим причинам:

  • новая механика крафта украшений без повторок;
  • новая механика крафта больших украшений;
  • крафт большего количества типов украшений. Было 11 стало 13;
  • Четвёртый год выпускаем ивент, а коллайдер всё такой же.

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

​Один из любимых вариантов. Справа от телека — очередь созданных украшений. В колбе происходит создание украшения. По трубке по идее должны были бы подаваться осколки.
​Один из любимых вариантов. Справа от телека — очередь созданных украшений. В колбе происходит создание украшения. По трубке по идее должны были бы подаваться осколки.

Шёл июль, где-то по радио рекламировали горящие туры на Сицилию. В августе в офисе стали мелькать неприятно загорелые люди. А мы с Егором Блинцовым всё ещё искали правильное решение для коллайдера. В ходе сего занимательного процесса мы пришли к следующим мыслям:

Модульность коллайдера — здорово. Каждая новая механика становится отдельным модулем. Это хорошо и для расширяемости на 2021 год.

Кнопка перехода к осколкам как часть коллайдера не нужна. Баланс и переход к осколкам уже есть в главном меню.

Монитор подсказывает игрокам, что вообще происходит.

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

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Псс... Не хотите немножко формул?

Отдельного внимания заслуживает чашечка справа от коллайдера. Для меня это один из важных элементов дизайна. Возможно, важнее самого коллайдера! Шутка.

В 2017 году я был в Женеве, где расположен тот самый настоящий адронный коллайдер. Думалось, что в CERN должны доставлять как минимум на Тысячелетнем Соколе, но пришлось добираться на обычном трамвайчике под номером 18. Из удивительного в нём была только цена за проезд. А вот экскурсия по ЦЕРНу мало того что бесплатна, так ещё и весьма занимательна.

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

Талисманы, которые стали снегурочками

В начале разработки мы привыкли называть Снегурочек талисманами, потому что Снегурочка — персонаж, знакомый только для RU-региона. Но потом решили не гневить перед праздником Дедушку Мороза и вернули им честное имя. И даже локализировали. Пусть все знают, кто такая Снегурочка. Тем более, вышли они у нас замечательные.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Правда, в начале разработки снегурочки выглядели как-то так.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

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

  • долгое время отсутствовали 3D-модели, что не давало выставить камеры и сверстать UI;
  • взаимодействие с персонажами предполагает множество анимаций;
  • в дополнение к анимациям необходимо было сделать эффекты.
Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Обоснование флоу с выбором снегурок именно в 3D-сцене далось нелегко. Боялись, что на минимальных системных требованиях (МСТ) они будут выглядеть плохо.

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

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Были опасения, что 3D-модель снегурки на хорошем приближении понизит атмосферу праздника у игрока до -5 уровня. Но этого, надеюсь, не произойдёт.

​

Но мы всех победили благодаря нашей отличной команде 3D-аниматоров. Ребята поддержали флоу с выбором в 3D-сцене и самоотверженно бомбили анимации с фантастической скоростью. Круто же, когда рядом есть люди, горящие идеей.

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

Новогодняя техника

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

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Техника устанавливается в слот и в течение некоторого времени заменить эту технику нельзя.

Когда наступает похмелье UX-дизайнера и как сделать из игрового ивента «Иронию судьбы» — опыт авторов World of Tanks

Что такое постивентовый период

Мы называем его похмельем и головной болью UX-дизайнера. Это дополнительные пару недель, в течение которых продолжают действовать кредитный бонус и бонус новогодней техники. Но! Весь остальной UI Нового года становится недоступным. Ивент типа прекратился, но не до конца.

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

Спасибо

За окном декабрь 2019 года. НГ ушел в релиз и продлится до 14 января — можно немного выдохнуть и сказать огромное спасибо нашей команде разработки за отличнейший ивент!

Всех с наступающим!

5959
27 комментариев

Комментарий недоступен

22
Ответить

Комментарий недоступен

10
Ответить

Достаточно буквально пары минут, чтобы во всём разобраться,

Не согласен. Я прекратил играть на моменте разделения веток ИС-7го и в следующий раз запустил уже на вводе Чехов и я ничего не понял, что произошло в ангаре. Куча вкладок, какие-то кнопочки, рейтинги, ЛБЗ, слоты непонятные.

Ответить