Cave: Система пользовательского интерфейса (Game UI)

В этом уроке вы научитесь настраивать визуальное оформление элементов интерфейса в Cave Engine.

Мы рассмотрим, как изменять свойства стиля, такие как цвета, прозрачность, изображения, размытие, а также как создавать новые UI Styles для вашего проекта.

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

1. UI Style

По умолчанию, когда вы создаете UI Element Default в Cave Engine, он уже имеет назначенный UI Style.

Этот стиль называется Default Style.

Этот стиль отвечает за определение начального внешнего вида элемента интерфейса.

Вы можете найти его в папке Interface в Content Browser.

Это означает, что любое изменение, внесенное в Default Style, автоматически повлияет на все элементы интерфейса, которые используют этот стиль через свойство Style Override.

Из-за этого хорошей практикой является сохранение Default Style в качестве стиля интерфейса по умолчанию в Cave Engine и создание нового UI Style для ваших собственных настроек проекта.

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

Выберите UI Element и в свойстве Style Override замените Default Style на новый UI Style, который мы только что создали.

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

Чтобы отредактировать стиль, нажмите на иконку карандаша рядом с полем UI Style.

Вы также можете выбрать файл стиля напрямую в Content Browser, чтобы открыть редактор стиля.

2. Настройка

В редакторе UI Style вы можете настраивать визуальные свойства элемента.

Опция 9-Slice Scaling позволяет изменять размер элемента интерфейса без искажения его границ и углов.

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

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

Без 9-Slice Scaling изменение размера кнопки или панели может исказить всё изображение и деформировать углы. С 9-Slice Scaling элемент может увеличиваться или уменьшаться, сохраняя при этом чистоту границ.

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

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

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

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

Тем же самым настройки также могут быть применены к состояниям Hover и Click элемента интерфейса.

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

Например, кнопка может иметь один цвет, когда она не активна, стать ярче, когда мышь наводится на неё, и измениться снова при нажатии.

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

На данный момент вы теперь понимаете, как UI Styles управляют внешним видом элементов интерфейса в Cave Engine.

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