Меня зовут Настя Купцова, я UI-artist в компании Playrix. Сегодня, основываясь на своем опыте работы в мобильном геймдеве, я расскажу, почему UI даже одного события — это целая Вселенная в игре.

Что за событие “Реставрация комнат”

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

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

События с комнатами бывают разных тематик: Комната Жака — главного героя, Комната к Дню благодарения, Подводная комната Сандры и многие другие, находящиеся еще в процессе реализации. Каждая из них — уникальна, имеет свой стиль и настроение. Но есть у них и общее — при работе над игрой нам всегда важно создать понятный и интуитивно простой интерфейс с красивым визуалом.

Сюжет события

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

Для первого события было решено подготовить сразу двух новых персонажей — главных героев Жака и его жену Софию. Жак очень любит морскую жизнь и по совместительству является заядлым аквариумистом. Он давно мечтал перебраться поближе к морю, чтобы чаще заниматься любимым делом. И вот ему удалось найти подходящее жилье, но теперь нужна помощь с обустройством. Зная о том, каким прославленным аквариумистом является игрок, он решил, что никто другой не поможет ему лучше. Жак переезжает с женой, она и является вторым действующим героем. Сейчас мы, конечно, создаем и другие события, каждое со своим набором уникальных героев и комнат, но для примера хочется разобрать опыт именно первого такого ивента.

Структурно у события три нарративные части:

1. Завязка — знакомство с новыми героями. Объяснение, как герои нашли игрока и почему обратились с нему. Их обращение к игроку с просьбой о восстановлении комнаты.
2. Диалоги в ходе редизайна — короткие диалоги после некоторых действий, чтобы поддержать сюжет и сделать событие более интересным.
3. Завершение — завершающий комикс, в котором персонажи общаются друг с другом и благодарят игрока.

Разработка UI для комнат

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

В основании идей всегда было удержание фокуса внимания на важных составляющих интерфейса и управление поведением игрока при помощи цветовых приемов.

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

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

Основные требования при создании окон:

• Текст должен быть читабельным;
• Плашка под текстом должна помогать отделять текст от иллюстрации и концентрировать на нем внимание;
• Эмоция персонажа, его облик должны располагать к действию и контактировать с игроком.

Центральная часть окна отражает основной смысл окна и максимально доносит тему сообщения через иллюстрацию.

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

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

Уникальные окна

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

• Стартовое послание

По сути это окно-послание в виде письма, которое предлагает помочь персонажу и восстановить комнату. Мы решили затемнить общий экран, чтобы не отвлекать внимание на задний план игры, и показать письмо персонажа, где бы основное внимание притягивала фотография с разрушенной комнатой и обращение. Тут стоит отметить, что важную роль также играет расстановка приоритетов в окне: отсутствие лишней детализации, красочное послание и, конечно же, кнопка “Играть”. Впоследствии стартовые окна обрели уже совсем другой вид и стали меняться в зависимости от тематики комнаты, чтобы больше подчеркивать суть события.

• Окно скидки

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

• Полноэкранная выдача награды

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

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

Иконки для UI

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

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

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

В исходниках мы придерживались следующих принципов:

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

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

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

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

2021-04-27

благодарю за статью, было очень интересно!

2022-01-15

Бомбическая статья!