Souls, куда уже плавнее?

На этот раз речь пойдет о миленьком батлере: SOULS

Достойный представитель своего класса. И один из лучших в плане плавности и представления интерфейсных решений. Разработчики не ограничились 2D интерфейсом и полностью использовали 3D пространство, что сделало игру эффектной. Хотя под капотом используются простые решения, разработчики часто упускают эти детали, лишая игру интерактивности и плавности в пользу скорости разработки (хотя чаще это вызвано ленью и нежеланием эти детали прорабатывать). Также в игре присутствует качественный артдирекшен и множество моментов, которые можно внести в свою игру, если есть цель повысить ее качество.

Тут я не рассматриваю успешность или геймплей продукта, это блог о графике.

Трехмерное пространство как основа бесшовности.

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

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

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

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

Что полезного для нас:

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

Из лобби нам доступны основные элементы управления.

Вступление в бой:

Основная кнопка расположена под Главным героем (далее ГГ). При ее нажатии камера пролетает через ГГ и показывает место, находящееся в некотором удалении от персонажа. Здесь появляется весь сетап армии противника для следующего боя. В этом месте присутствуют все противники, которые будут на карте. Затем открывается окно конфигурации армии, а после - сам бой.

На изображении зеленым, логические переходы окна по кнопкам. Голубым, привязка к визуальным образам, траектория работы камеры и ее фокуса.

Что полезного для нас:

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

Реакция 3д фона на тапы игрока

В 3D сцене есть несколько объектов, которые игра показывает при тапах по кнопкам меню, формируя у игрока визуальный образ, соотносимый с функционалом меню.

• Сам ГГ при тапе на кнопку управления коллекцией чемпионов (призыв, прокачка и прочее).
• Толстый бородач-мастер, которого игра показывает при тапе на кнопку Предметов (крафт, усиление, перековка и т.п.).
• Женщина-шаман, тап на кнопке Мир (путешествия и прочее).

Эти персонажи поворачиваются и демонстрируют свои возможности: мастер вызывает верстак, ГГ вызывает камни призыва, Шаман открывает портал.

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

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

Птичка, которая сопровождает нас, вызывает меню моментальных подарков (по таймеру в 5 минут она нам что-то выдает).

Пример окна призыва, хотя понятие окно или экран здесь не проследить.

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

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

Что полезного для нас:

• Функционал меню полезно привязывать к уникальным, запоминающимся образам.
• Интерактивными элементами полезно делать не только кнопки меню, но и 3D объекты в сцене.
• Если грамотно пользоваться приоритетами элементов меню, можно большую часть сделать ненавязчивой и отправить на активацию через интерактивные элементы. Не каждый функционал необходимо дублировать соответствующей кнопкой на главном меню, загромаждая и усложняя этим навигацию по нему.
• Любой внезапно появившийся элемент на экране привлечет внимание игрока, для переходов не должно быть ничего внезапного. Включить/выключить элемент - это тоже внезапно.

Режим путешествия:

Шаман открывает нам портал через который игрок успешно попадает к пещере.

Интерфейс снова всего лишь функциональное дополнение 3д обьектов на фоне.

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

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

Что полезного для нас:

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

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

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

Итоги:

• 3D в интерфейсе - это реальность, и это надо использовать. Если есть желание выпускать трендовый, свежий продукт, мастхэв в применении.
• В серьезных проектах использование 2D интерфейсов в отрыве от 3D графики - удел дешевых решений. Это работает, но выглядит устаревшим.
• Интерфейсы должны быть отзывчивыми, с интерактивностью. тотальные 2D интерфейсы - удел прототипов и инди-продуктов. Область игр, где на самом деле не хватает ресурсов.
• Современные тренды - не интерфейс управляет пространством, а пространство дополняется интерфейсом. Приоритет с окон надо снижать в пользу игрового пространства. И реально работать на то, как избавиться от окон, а не сделать их количество больше.
• Любую игру можно превратить в 2D интерфейс с табличками и кнопочками, также как любой загруженный 2D интерфейс можно превратить в интерактивное пространство. Правда, на это необходимо время и ресурсы.

https://t.me/ArtsFactory

Или спроси у меня как.