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

Для начала разберемся, что такое вообще интерфейс в игре и с чем его едят.

Игровой интерфейс (UI — User Interface) — это все элементы на экране, которые позволяют игроку взаимодействовать с игровым миром, получать информацию и управлять своим персонажем или процессом. Это посредник между игроком и игрой.

Проще говоря, это все кнопки, меню, шкалы, карты, цифры и иконки, которые вы видите во время игры.

Хорошо, а зачем вообще нужен игровой интерфейс? Его ключевые цели можно разбить на 4 пункта:

1. Предоставление информации: Сообщать игроку vital info (критически важную информацию) о состоянии его персонажа, цели, окружении и ресурсах.
2. Обеспечение взаимодействия: Давать игроку инструменты для управления игрой (кнопки, меню, полосы прогресса).
3. Улучшение immersion (погружения): Хороший интерфейс, особенно диегетический, не вырывает игрока из атмосферы, а наоборот, усиливает ее.
4. Эстетика и стиль: Интерфейс — это часть художественного оформления игры. Он должен соответствовать ее сеттингу и настроению (научная фантастика, фэнтези, ретро).

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

Для отображения интерфейса будем использовать отдельный объект, для удобства.

Создадим объект oUI в папке "объекты".

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

Добавим событие "Изобразить GUI", то есть изобразить "Graphical User Interface" - графический интерфейс пользователя.

Это событие предназначено строго для отрисовки элементов графического интерфейса пользователя (GUI), которые должны быть зафиксированы на экране и не зависеть от перемещений игровой камеры и преобразований игрового мира.

Это мощный инструмент для создания HUD (Heads-Up Display), меню, кнопок и любого другого статичного UI, который игрок видит во время геймплея.

Допустим, мы хотим вот такой результат:

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

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

Для начала напишем как раз эти две строчки:

draw_set_font(название шрифта) позволяет присвоить нижестоящему коду, который создает текст, нужный шрифт(размер и внешний вид символом)

draw_set_color(название цвета или его индекс) позволяет присвоить нижестоящему коду, который создает текст, нужный цвет.

Название шрифта пусть будет fText, а цвет можно выбрать любой из предложенных. Начинается название цвета на "c_".

А если захочется выбрать любой цвет, то можно воспользоваться его кодом RGB, например: draw_set_color(#E5E0A0);

Теперь только нужно создать этот самый шрифт fText, потому что сейчас его нет.

Естественно, в папке "Шрифты" создается "Шрифт".

Перед нами появляется вот такое окно:

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

Протестировать внешний вид шрифта можно справа.

Важно! Изначально шрифт будет работать только для английского языка, русский шрифт шрифт не поддерживает, но что делать, если нужен русский?

Нажимаем "Добавить новый диапазон" и появляется это окно, куда мы вводит диапазон русского алфавита: (1040-1103)

Нажимаем "Добавить диапазон", чтобы подтвердить.

Теперь шрифт поддерживает еще и русские символы (кроме букв ё).

Вернемся в объект oUI:

Добавим две строчки:

draw_sprite() - отрисовывает выбранный спрайт и его кадр в определенных координатах. Отрисуем спрайт жизни, в моем случае - это лицо героя.

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

GMLdraw_sprite(sLife,0,room_width/2-160,room_height/2-100);
draw_text(room_width/2-160+10,room_height/2-112,"x "+string(global.playerLifes));

Ниже добавим монеты

draw_sprite(sCoin,0,room_width/2-160,room_height/2-100+15);

draw_text(room_width/2-160+10,room_height/2-112+15,"x "+string(global.money));

И рамку для активных предметов:

draw_sprite(sItemsFrame,0,room_width/2-155,room_height/2-118);

Ниже можем сразу добавить отображение локации:

GMLif room = rForest1 draw_text(430,309,string("1-1"));
if room = rForest2 draw_text(430,309,string("1-2"));
if room = rForest3 draw_text(430,309,string("1-3"));

Вот так и получается:

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

Вот такая у меня подсказка вышла, добавим ее на слой тайлов или ассетов.

Сам слой назову "Tutor".

Теперь мы добавим в oUI событие "Создать" переменную:

GMLtimer = 0; 

Добавим событие "шаг" и напишем:

GMLif timer < 300 timer++;

А в событии "draw gui" допишем:

GMLif room == rForest1 and timer >= 300 layer_set_visible("Tutor", false);

Эта строчка кода, если мы находимся в первой комнате и таймер дошел до 300 кадров (5 секунд), то сделает слой "Tutor" невидимым.

И помни, разработчик!

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

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

Примеры ХОРОШЕГО интерфейса:

• The Witcher 3: Минималистичный HUD, который скрывается в exploration-режиме. Четкие иконки статусов. Квестовый журнал в виде стильного дневника, который вписан в сеттинг.
• Dead Space: Эталон диегетического интерфейса. Вся информация (здоровье, стамина, патроны) является частью костюма главного героя и его оружия. Полное погружение.
• Overwatch / Apex Legends: Невероятно четкая и читаемая визуальная обратная связь. По звуку и иконкам вы сразу понимаете, что происходит: вас лечат, вас хотят ультовать, противник использует ту или иную способность.

Примеры ПЛОХОГО интерфейса:

• Assassin's Creed Unity (на launch): Полный хаос в меню. Запутанная навигация, непонятные иконки, постоянные лаги и подтормаживания при переключении разделов. Эталон того, как не надо делать UI.
• Многие мобильные F2P-игры: Классический пример "информационного шума". Десятки мигающих красных точек, всплывающих окон, рекламных баннеров и предложений купить что-то. Цель — не помочь игроку, а выжать из него деньги.
• Старые RPG (например, первые части The Elder Scrolls): Огромные, громоздкие, неудобные меню инвентаря, через которые приходится продираться, как через джунгли.

Главный итог

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

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

Увидимся на следующих занятиях по разработке рогалика!

Всем peace!

Статью подготовил Oliver Orangers специально для ims.

Ссылка на vk: https://vk.com/oliora

Ссылка на telegram: https://t.me/oliver_orangers