Unreal Developer про вспомогательные UI элементы для навигации и ориентации игрока

Всем привет! Меня зовут Артем Болюбаш, почти год я работаю на позиции Unreal Developer в Pingle Game Studio. Раньше я довольно плотно работал с UI и теперь хочу немного поделиться с миром о полученном опыте. В данном материале мы рассмотрим основные способы показать игроку, как можно добраться до цели. Статья будет полезна как геймдизайнерам, художникам и другим творческим IT профессиям, так и простым программистам, которые могут посмотреть «как это работает» в других играх.

Что такое стрелка для определения направления и когда она нужна?

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

Взаимодействия и функции стрелки

  • Стрелка может указывать только на одну цель;
  • Игрок может выбрать, на что указывает стрелка: цель задания, собственная метка, торговец и т.д.

Что такое компас?

Это элемент пользовательского интерфейса HUD. Позволяет ориентирование на местности путем указания на стороны света.

Типы компаса и различные подходы

Компас в виде линии: компас располагается вверху или внизу экрана и выглядит как полоса с пометками. Во время вращения игрока компас подстраивается под игрока. Как правило, такой вариант используют в шутерах.

Круговой компас: данный вид компаса работает точно так же, но выполнен в виде полукруга или круга.

Взаимодействия и функции компаса

  • Иконки с достопримечательностями : контрольные точки, здания, точки сохранения, торговцы и т.д.;
  • Ярлыки : могут быть прикреплены к достопримечательностям или указывать только название области,
  • Пользовательские точки интереса : Когда игрок хочет добраться до точки, где нету точки интереса, он может поставить свою и ориентироваться по ней;
  • Вращение : игрок может вращаться в соответствии с углом оси.

Что такое отображение точек интереса прямиком на худе?

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

Когда нужно отображать точки интереса прямиком на худе?

Данный подход будет полезен, когда нам нужно сохранить во время игры большое пространство от элементов HUD, т.е. будет полезна в играх, завязанных на action шутерах.

Что такое карта мира?

Карта мира — это элемент пользовательского интерфейса HUD, обычно вызывается после нажатия определенной кнопки и занимает весь экран. Она показывает абстрактный вид или точную копию игрового поля. Её основная цель — помочь игроку проложить маршрут из точки А в точку Б.

Когда нужна карта мира?

Обычно карта мира нужна, когда игрок ходит свободно по открытому или частично открытому миру. Карта мира нужна, когда игра имеет:

  • Большое игровое поле;
  • Игроку нужно добраться с одной точки на другую, при этом планируя свой маршрут, например, выполнить по пути квест или зачистить вражескую базу;
  • Есть много разных точек интереса и игрок может достигнуть их различными способами;
  • Игре нужны быстрые перемещения (не всегда, но с ней удобнее).

Типы карты мира и различные подходы

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

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

Взаимодействия и функции карты мира

  • Иконки с достопримечательностями: контрольные точки, здания, точки сохранения, торговцы и т. д.;
  • Ярлыки: могут быть прикреплены к достопримечательностям или указывать только название области;
  • Пользовательские точки интереса: Когда игрок хочет добраться до точки, где нет точки интереса, он может поставить свою и ориентироваться по ней;
  • Вращение: игрок может вращаться в соответствии с углом оси, представляющей высоту (обычно y или z);
  • Изменять масштаб: игрок может приближать и отдалять карту для удобства работы с ней;
  • Быстрые перемещения: через карту мира можно пропускать длинные поездки по миру, если игроку не по душе долго исследовать мир;
  • Всплывающие подсказки: Если удерживать курсор на каком-либо элементе карты, открывается панель с дополнительной информацией.

Основы в коде

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

Что такое миникарта?

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

Миникарта vs Карта

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

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

Когда нужна миникарта?

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

  • Игровое поле большое;
  • Есть несколько способов добраться до одного и того же пункта назначения (нет линейной игры);
  • Есть много разных достопримечательностей;
  • Вам необходимо знать позицию союзных и вражеских юнитов;
  • Игра требует macro management (RTS).

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

Типы миникарты и различные подходы

Мини-карты можно классифицировать по многим их атрибутам, таким как перспектива (ортогональная, изометрическая, трехмерная) или форма (прямоугольная, круглая), но два наиболее распространенных типа:

Весь мир: этот тип мини-карты функционирует как миниатюрная карта мира. Мы можем увидеть их в спортивных играх, гонках, MOBA или стратегиях.

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

Функции миникарты

  • Пределы и барьеры;
  • Игроки, враги и позиции союзников;
  • Иконки с достопримечательностями: контрольные точки, здания, точки сохранения, торговцы и т.д.;
  • Ярлыки: могут быть прикреплены к достопримечательностям или указывать только название области;
  • Периферийные стрелки: когда точка интереса не находится в области видимости, стрелка указывает в том направлении, где она окружает края миникарты;
  • Вращение: когда миникарта сфокусирована на игроке, она может вращаться в соответствии с углом оси, представляющей высоту (обычно y или z);
  • Автокарта: как и в игре The Binding of Isaac, миникарта автоматически создается рядом с созданием комнат.

Взаимодействия с миникартой

  • Навигация: переход к позиции одним щелчком мыши и / или рисованием пути (стратегии и MOBA-игры);
  • Оповещения: (также называемые Pings), например Target или Retreat (особенно в многопользовательских играх);
  • Всплывающие подсказки: Если удерживать курсор на каком-либо элементе мини-карты, открывается панель с дополнительной информацией;
  • Масштаб: Обычно это взаимодействие сопровождается двумя кнопками плюс и минус масштабирование или ползунок;
  • Перетаскивание мышью: изменение сегмента карты с помощью перетаскивания мышью;
  • Изменить режим вращения: позволяет переключаться между фиксированной картой на севере или вращением.

Где разместить миникарту? Разные подходы

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

Неуместная миникарта может не только привести к увеличению времени реакции, но и к ошибочным щелчкам и неправильному восприятию (в зависимости от того, где вы разместите другие элементы HUD). Поэтому нередко можно обнаружить, что в той же игре, выпущенной на Западе, миникарта или другие элементы HUD расположены иначе, чем, например, в Украине, Беларуси, или Китае, Японии и других странах Востока. В идеале мы бы дали возможность настроить его положение и размер, чтобы сделать игру более доступной для всех.

Кроме того, каждый жанр имеет разное расположение миникарты:

  • В играх MOBA мини-карта размещается исключительно внизу;
  • В стратегических играх используется в основном нижний левый угол, но в большинстве RTS используется верхний правый угол;
  • Игры MMORPG расположены исключительно справа и, в основном, наверху;
  • В гоночных играх используется преимущественно нижняя часть, как в GPS.
  • В играх FPS также используется в основном левый край для размещения мини-карты.

Реализация в Unreal

Все вышеперечисленное можно спокойно сделать в Unreal, но тут появляется вопрос: «как?». Для этого я сделал базовую реализацию всех методов, которую можно увидеть ниже. Все написано на blueprints и очень базово, если хотите перенести какой-то из способов в свой проект, то не забудьте привести ее в порядок, да никто вам не мешает перенести все это на С++. Для запуска проекта вам понадобиться UE5.


Ссылка на проект: drive.google.com/...​sgJjCbjILKVlR37-0NInhj1Dj

Полезные ссылки:

  1. Where Should We Place the Mini-Map? ( Gamasutra Blog )
  2. Video Game Mini-Maps Might Finally Be Going Away (Kotaku Article)
  3. Horizontal Attention Leans Left ( Nielsen Norman Group Article )
  4. Creating Isometric Worlds (game development)
  5. Game Design Affect Minimap Design — Black Ops 4 Minimap ( Dexerto Article )
  6. Following the Little Dotted Line ( Video )
  7. Theory about minimaps

Підписуйтеся на Telegram-канал @gamedev_dou, щоб не пропустити найважливіші статті і новини.

👍ПодобаєтьсяСподобалось6
До обраногоВ обраному3
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Підписатись на коментарі