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

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

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

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

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

1. Разрешить наведение

Чтобы обнаружить, когда курсор мыши наведен на элемент UI, выберите нужный элемент UI и на вкладке Behaviour включите опцию Allow Hover.

На Preview вы можете визуализировать внешний вид элемента UI без необходимости запускать игру.

После включения Allow Hover переместите курсор мыши над областью предварительного просмотра, чтобы увидеть визуальные изменения между нормальным состоянием и состоянием наведения.

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

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

2. Разрешить клик

Включите опцию Allow Click, чтобы разрешить элементу UI обнаруживать, когда пользователь кликает на него.

Как и с Allow Hover, поведение Allow Click также можно протестировать напрямую в Preview.

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

3. Выполнение логики

Чтобы выполнить логику на основе взаимодействий с UI, нажмите на значок стрелки, расположенный слева от опций Allow Hover и Allow Click.

Здесь мы можем использовать Callbacks.

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

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

Чтобы протестировать Hover callbacks, давайте добавим простое сообщение печати в каждое событие.

В On Hover In Callback, который выполняется, как только курсор обнаружен над элементом UI, добавьте сообщение печати, чтобы подтвердить, что взаимодействие было обнаружено.

Затем, в On Hover Out Callback, который вызывается, когда курсор покидает элемент, добавьте еще одно сообщение печати, чтобы проверить, когда это событие выхода было обнаружено.

Таким образом, мы можем видеть в Консоли, когда курсор входит и покидает область элемента UI.

Теперь запустите игру и взаимодействуйте с элементом UI, перемещая курсор мыши над ним, а затем удаляя его.

Смотрите на Console, чтобы проверить, когда сообщения печати отображаются.

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

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

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

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

Теперь давайте добавим сообщения печати для проверки событий клика элемента UI.

В On Click In Callback добавьте сообщение печати, чтобы определить момент, когда клик по элементу зафиксирован.

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

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

Например, вы можете захотеть визуально нажать кнопку на Click In, но только подтвердить действие на Click Out.

Запустите игру и наблюдайте за Console, взаимодействуя с элементом.

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

На данном этапе вы уже знаете, как обнаруживать наиболее базовые взаимодействия с UI в Cave Engine.

Комбинируя Allow Hover, Allow Click и колбэки, вы можете начать создавать настоящие интерактивные интерфейсы, такие как кнопки, которые открывают меню, ползунки настроек, окна подтверждений, меню паузы и любые другие поведения UI, которые нужны вашей игре.