Многочлен: UI/UX приколы

Про то, как форма прогрессбара может существенно повлиять на игровой процесс. И прочие особенности национального проектирования UI/UX в этом проекте.

UI и UX проектирование никогда не делается в отрыве от геймдизайна. Хотя может быть и делается, но тогда точно получается какая-то хрень. Так что прежде чем разбирать UI/UX решения, поймём какие задачи нужно было ими решать. А для этого, НАКОНЕЦ-ТО погрузимся немного в будущий игровой процесс Многочлена.

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

Это вам не соцсеть, где кнопку прожал и готово. Здесь нужна тактика, двухлетняя военная подготовка, интеллект, и умение мыслить наперёд =)

Для того, чтобы подружиться с NPC игроку следует просто двигаться рядом с ним, чтобы получилось практически параллельное движение.

Ок, для начала попытаемся понять что такое параллельное движение. Я принял для этого выполнение двух условий:

За пересечение следа NPC игрок будет получать штраф. Какой именно, я пока умолчу, чтобы не травмировать нежные умы будущих игроков =)

А теперь самое время напомнить для тех, кто знает... Или время шок-контента для тех, кто не знает:

При решении своей задачи я выбрал следующие инструменты для отображения фидбека игроку:

Разбираемся по порядку, т.е. начнём со следа. Я довольно много времени экспериментировал с его отображением - делал и тёмными пятнами и точками (типа от ног). Здесь важно сделать так, чтобы след не сильно бросался в глаза, но был достаточно заметным, чтобы игрок без проблем избегал пересечение с ним. В итоге я пришёл к такому варианту:

Очень долго подбирал то, как след будет исчезать - сделал отдельную анимацию. Для NPC пришлось увеличить след, т.к. иначе он смотрится очень куцо.

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

Отображение ограничительного круга я прикрепил к NPC, сделал пунктиром и поместил "на пол", то есть над землёй, но под объекты, для которых считается динамическая сортировка. Размер круга подбирал так, чтобы у игрока был небольшой челлендж при вербовке компаньонов. Возможно я этот круг увеличу, когда сделаю более сложные траектории движения NPC, а возможно, он будет регулироваться выбором сложности игры.

Из всего арсенала моего оружия массового фидбека наибольшие проблемы возникли со шкалой прогресса. Я сходу сделал её прямоугольной - это самое привычное для восприятия отображение прогресса. Те самые best practices, и шаблоны восприятия, ага =)

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

Довольно долго(полгода) я смотрел на этот прогрессбар с немым упрёком, пока в один прекрасный день, неделю назад, меня не посетила мысль сделать прогресс-бар вокруг ограничительного круга, простите за тавтологию.

В ходе экспериментов я понял, что его достаточно отображать так же "на полу", и перекрытие игроком, другими персонажами или окружением не страшно. И вышло вот что:

Кардинальное изменение ощущений.

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

Я решил усилить эмоциональный отклик, при помощи анимации внедрения заполненной шкалы прогрессбара внутрь ограничительного круга - это его окрашивает и создаёт свой "островок", по которому игрок может перемещаться как бы присматриваясь к NPC и решая стоит ли с ним дружить. Стоит игроку выйти из круга и NPC отправляется дальше по своим делам.

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

Есть ещё один важный момент.

Остановка NPC - вроде бы малозначительная, но тоже очень важная деталь при проектировании опыта игрока. Чтобы понять разницу предлагаю посмотреть как это выглядит без остановки:

А выглядит это так, как будто NPC на самом деле насрать на игрока - он продолжает двигаться дальше, не обращая на потуши зелёной сопли наладить контакт. И раздражает это знатно, т.к. требуется дополнительное когнитивное усилие, чтобы отловить момент заполнения шкалы и вовремя нажать на кнопку до вылета ГГ из ограничительного круга.

Вот с такими вещами приходится иметь дело, когда хочешь сделать что-то хорошее для игрока. Казалось бы, всего лишь форма прогрессбара и какая-то остановка NPC =)

Теперь более детально посмотрим на игровой интерфейс.

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

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

А ещё я ценю, когда интерфейс понятен без текстов и всячески стремлюсь к этому. В идеале игра вообще должна быть без текстов как по мне. Существует довольно много жестов и символов обихода, которыми можно донести информацию до любого игрока. Общение между персонажами я хочу сделать в виде эмоциональных баблов. И экономия на локализациях =)

Далее хочу обратить внимание на композицию.

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

Поэтому я расположил интерфейс по центру, выкинув всё лишнее, что можно показывать по ходу дела. А это информация о компаньонах. За что отвечает как раз нижняя шкала, которая является шкалой внимания.

Каждый компаньон потребляет внимание. Причём в разных взаимоотношениях разное количество.

Вот и тут примерно так же. Чем сильнее отношения - тем более сильные компаньоны, тем больше внимания они потребляют.

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

Когда игрок обзаводится компаньоном, над шкалой внимания появляется пиктограмка.

Для каждого вида компаньона эта пиктограмка имеет разную форму, и окрашена в цвет отношений. Синий - приятель. Жёлтый - друг. Красный - любовник. Зелёный - партнёр. Под иконкой показывается здоровье компаньона сердечками. Да, оно показывается и на игровом поле, но опять же, чтобы не захламлять интерфейс - только во время того как кто-то получает урон. Внизу экрана мелкими сердечками это нужно чисто для справки в мирное время чтобы оценить жизнеспособность своего "войска".

Посмотрим на прогрессию интерфейса на практике в этом довольно длинном видео:

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

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

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

Ещё один момент, на который хочется обратить внимание - это отработка граничных случаев.

Отвечая, минимальный интерфейс я уже показывал выше. Максимальное количество компаньонов будет ограничиваться балансом. Если не получится - буду думать над скролом или группировкой однотипных юнитов. А на последний вопрос у меня даже есть готовый видео-ответ:

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

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

#личныйопыт #девлог #будетполезно #screenshotsaturday