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

На этом уроке мы научимся, как работает система родительских и дочерних объектов Cave Engine.

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

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

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

1. Создание элементов UI Toolkit

В дополнение к созданному ранее UI Element Default, добавьте три дополнительных интерфейсных элемента с помощью UI Toolkit:

• Input Slider
• Input Number
• Input Text

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

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

2. Тестирование элементов UI Toolkit

Прежде чем тестировать элементы, созданные с помощью UI Toolkit, если вы используете шаблон игры от третьего лица Cave Engine, отключите Player и Vehicle в сцене.

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

С курсором, свободным от управления, вы сможете правильно взаимодействовать с элементами интерфейса, такими как Input Slider, Input Number и Input Text, что позволит вам протестировать все их функции без помех.

Запустите игру, нажав F5.

Во время выполнения вы сможете взаимодействовать с созданными элементами.

Input Slider и Input Number позволяют изменять их значения с помощью взаимодействия мыши, в то время как Input Text позволяет вводить текст непосредственно в интерфейс.

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

Например:

• Input Slider отлично подходит для настроек, таких как громкость или яркость
• Input Number полезен для точных числовых значений
• Input Text полезен, когда игроку нужно вводить информацию

3. Иерархия

Теперь давайте посмотрим, как работает иерархия между UI Elements.

Выберите UI Element Default и в панели свойств отрегулируйте его значения Scale.

Изменяя эти значения, вы можете увеличить или уменьшить размер элемента.

Чтобы создать родительско-дочерние отношения между Entities, щелкните и перетащите UI Element, который хотите сделать дочерним, и отпустите его на UI Element Default, который станет родительским объектом.

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

После создания этого родительско-дочернего отношения дочерний элемент автоматически последует за преобразованиями родительского элемента.

Это означает, что изменения, такие как позиция, масштаб и видимость, применяемые к UI Element Default, также повлияют на все его дочерние элементы.

Это чрезвычайно полезно при создании меню и панелей интерфейса.

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

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

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

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