Рубрикатор:
- Введение - Как наш мозг считывает информацию с экрана? - Яркий дизайн иконок - Как сделать интерфейс читаемым? - Выводы - Список источников
Введение
Интерфейс в 2D играх с top-down камерой играет ключевую роль в восприятии игрового процесса, так как он должен одновременно быть информативным, ненавязчивым и органично встроенным в визуальное окружение. В таких играх, как 20 Minutes Till Dawn, Soul Knight и Enter the Gungeon, интерфейс становится частью художественного языка игры и напрямую влияет на удобство взаимодействия игрока с миром. UI дизайн данных проектах читаем как во время динамичных сражений, так и во время отдыха в лобби.
Цель данной аналитической записки — определить принципы удобного, понятного и визуально уместного интерфейса в 2D top-down играх, который я смогу интегрировать в мой проект.
Также моей целью является создание «чек-листа» хорошего интерфейса и создание универсального UI шаблона, который будет читаем и во время сражений, и во время спокойных сцен.
Как наш мозг считывает информацию с экрана?
В первую очередь стоит разобраться, как устроены интерфейсы в 2D рогаликах, в каких частях экрана располагается важная игровая информация и как я могу это использовать. Начнем с игры Enter The Gungeon.
Все важные элементы интерфейса расположены по углам экрана. Так как человеческий глаз читает информацию слева направо, самые важные показатели (жизни и деньги), расположены в верхнем левом углу. Следом идет карта, насколько заряжена способность и сколько патронов осталось в оружии. То есть наш взгляд идет от самой полезной информации до наименее значительной.
О чем должен знать игрок в моей игре в первую очередь?
1. В каком состоянии шкала настроения хозяина? 2. Сколько у домового монет? 3. Сколько времени осталось до конца? 4. Какие у домового есть способности? 5. Где находится поломка?
Соответственно, в моей игре эта информация также будет располагаться слева направо. Подобное расположение поможет игроку быстро ориентироваться в управлении, так как он интуитивно будет видеть всю необходимую информацию. В верхнем левом углу будет круглая шкала с ярко-красным «настроением» хозяина, которое все время будет убавляться. Чуть ниже будет счетчик монет. В верхний правый угол отправится таймер в виде песочных часов, рядом с которым будет вестись обратный отсчет до утра. В нижнем левом углу будет располагаться импровизированный компас, указывающий, в какой стороне находится поломка или грязь, а в нижнем правом углу будет клавиша выбора способностей. Сами же способности будут активироваться на клавишу Е.
Яркий дизайн иконок
Также меня вдохновил интерфейс выбора оружия в Enter The Gungeon. Он расположен в нижнем правом углу и благодаря нажатию клавиши помогает быстро выбрать нужную пушку. Так как в моей игре домовой обладает различными способностями (например, превращаться в различных животных), в моей игре можно сделать похожий интерфейс, только на этот раз при нажатии правой кнопки мыши игрок будет открывать меню, где будет доступен выбор конкретных способностей для домового (например, в какое именно животное ему превратиться). Такое решение также добавит азарта, так как игрок может загореться желанием собрать все способности, чтобы при нажатии клавиши внизу у него вылезал БОЛЬШОЙ список способностей.
Меню способностей можно сделать на весь экран в виде карточек с иллюстрацией и краткой справкой об их действии. Нечто подобное можно наблюдать в игре Soul Knight и 20 Minutes Till Dawn во время выбора улучшений. Я больше склоняюсь к варианту из Soul Knight, так как в ней карточки более читаемые, яркие и красочные.
Как сделать интерфейс читаемым?
Теперь рассмотрим контрастность интерфейса. Для этого посмотрим на другие игры-референсы. Игры, использованные в аналитической записке, используют недиегетический интерфейс Soul Knight, будучи мобильной игрой, использует в качестве UI — элементов серые круглые кнопки, которые выбиваются из общего пиксельного стиля игры. Однако, сделано это было для того, чтобы игрок мог попасть пальцами в кнопки и без труда использовал джойстик.
В моей игре, по крайней мере в версии для ПК, таких элементов не будет. Но мое внимание привлекла шкала здоровья, брони и маны в верхнем левом углу. Она выделяется на светлом фоне, так как обрамлена контрастным коричневым цветом. Благодаря такому решению все показатели видно как на светлых, так и на темных картах. Также можно стилизовать рамку под деревянную плиту или, например, гусли, на которых будет отображаться настроение хозяина. Например посередине, где располагается круглый рисунок, можно изобразить утекающее настроение. Таким образом мы получим контрастную шкалу, которая будет связана с древнерусским фольклором.
В игре 20 Minutes Till Dawn игроку постоянно нужно знать, сколько у него осталось времени до рассвета. Именно поэтому цифры сделаны большими и яркими. Так как в моей игре время также играет важную роль, мне тоже стоит сделать таймер большим и контрастным.
Также в игре от flanne есть интересное визуальное решение: вокруг персонажа есть поле видимости, которое постепенно угасает. Ближе к краям экрана игрок почти ничего не видит, только яркие глаза монстров, плывущих на нас из темноты. Подобное решение стоит применить и в моей игре, так как во-первых это поможет выделить главного героя на общем фоне, а во-вторых повысит контрастность между светлым центром экрана и темными краями. Следовательно, части интерфейса будут светлыми, чтобы игрок легко их считывал.
Оформление познавательных элементов
Немаловажную роль в моем проекте играет познавательная составляющая: после пройденных ночей игрок будет открывать былички и короткие рассказы о домовом, тем самым открывая для себя интересные факты и документальные записи об этом существе.
Я долго думал, как правильно оформить энциклопедические вставки таким образом, чтобы они выглядели атмосферно и красиво, чтобы игрок чувствовал неподдельный интерес к появляющимся запискам. Ответ пришел из Enter The Gungeon. В рогалике немаловажную роль играет Патрономикон — книга, содержащая информацию об оружии, персонажах и противниках. Я понял, что книга — это хороший способ не только скомпоновать былички в одном месте, но и добавить туда важную информацию о противниках, персонажах, предметах и артефактах.
Книга будет также разделена на цветные абзацы, в каждом из которых игрок найдет для себя полезную информацию как о внутриигровых предметах и героях, так и о быличках, энциклопедических справках и прочей познавательной информации о домовых.
Исходя из информации и советов, выделенных в результате аналитической записки, могу предположить, что интерфейс моей игры будет выглядеть примерно как на рисунке 12. В левом верхнем углу — постоянно убывающее настроение хозяина, правее — время, оставшееся до рассвета, в нижнем левом углу — компас, показывающий, где есть поломки в доме, и, наконец, кнопка способности, которую игрок может настраивать. Как мне кажется, интерфейс вполне читаем, и при должной доработке будет исправно выполнять свои функции и будет полезен игрокам.
Выводы
В заключение я могу вынести несколько правил для построения хорошего UI интерфейса в 2D top-down играх:
1. Важная информация должна быть расположена от левого верхнего к правому нижнему углу экрана по полезности для игрока
2. Иконки должны быть контрастными и хорошо читаемыми
3. Иконки должны соответствовать стилю игры и не выбиваться
4. Важные показатели должно быть хорошо видно в любых ситуациях: и спокойных, и напряженных
Список источников
Enter the Gungeon [Электронный ресурс]: компьютерная игра / Dodge Roll (разработчик); Devolver Digital (издатель). — Электрон. дан. — Остин, 2016. — Режим доступа: https://store.steampowered.com/app/311690/Enter_the_Gungeon/ — Загл. с экрана. — Дата обращения: 15.05.2026.
Soul Knight [Электронный ресурс]: компьютерная игра / ChillyRoom (разработчик и издатель). — Электрон. дан. — Шэньчжэнь, 2017. — Режим доступа: https://play.google.com/store/apps/details?id=com.ChillyRoom.DungeonShooter . — Загл. с экрана. — Дата обращения: 15.05.2026.
20 Minutes Till Dawn [Электронный ресурс]: компьютерная игра / flanne (разработчик и издатель). — Электрон. дан. — 2023. — Режим доступа: [https://store.steampowered.com/app/1966900/20_Minutes_Till_Dawn/]. — Загл. с экрана. — Дата обращения: 20.02.2026.
