Введение в элементы пользовательского интерфейса

Lesson 1 of 6 • 10 XP

Keep your place in this quest

Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.

На этом уроке мы впервые взглянем на различные типы UI Elements, доступных в Cave Engine для создания пользовательских интерфейсов.

UI Elements используются для создания всего, что игрок видит сверху на игровом мире, например, меню, кнопок, HUD, индикаторов здоровья, счетчиков предметов, экранов настроек, диалоговых окон и других элементов интерфейса.

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

1. Создание нового UI Element

Чтобы создать новый UI Element, щелкните правой кнопкой мыши внутри Scene Graph и выберите пункт Interface.

В этом меню вы найдете элементы интерфейса, предоставленные Cave Engine.

image.png

UI Element Default

image.png

Создает стандартный UI Element Cave Engine.

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

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

Например, вы можете создать один стандартный UI Element, чтобы представить панель меню, а затем добавить кнопки, тексты и иконки в качестве его дочерних элементов.

Текст

image.png

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

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

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

Кнопка

image.png

Создает UI кнопку, уже настроенную с компонентом текста.

Кнопки являются интерактивными UI Elements. Они могут реагировать на разные состояния, такие как:

  • Normal, когда кнопка неактивна.
  • Hover, когда курсор мыши над кнопкой.
  • Click, когда кнопка нажата.

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

Это делает элемент Button одним из самых важных компонентов UI при создании меню и интерактивных интерфейсов.

UI Toolkit

image.png

В опции UI Toolkit Cave Engine предоставляет UI Elements, ориентированные на пользовательский ввод и взаимодействие.

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

  • Input Slider

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

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

  • Input Number

Создает числовое поле ввода, которое можно настроить, перемещая мышь или редактируя значение напрямую.

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

  • Input Text

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

Это полезно для имен игроков, имен сохранений, полей поиска, описаний, сообщений чата или любого другого текстового ввода.

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

image.png

С этими опциями вы можете выбрать наиболее подходящий UI Element для типа интерфейса, который вы хотите создать.

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

В этом Quest мы начнем с первого варианта, UI Element Default, который будет служить базой для следующих уроков.

image.png