В фундаменте GUI системы лежит кодовая база cocos2d-x. Это надёжный и развитый фреймворк для создания двухмерных игр, который был адаптирован для нужд создания пользовательского интерфейса. 

В Nau Engine интерфейс пользователя может быть полностью сконструирован не только через код, но и с использованием отдельного редактора. Для этого нужно сначала создать сцену интерфейса в виде ассета. Затем эти данные можно использовать, инициализировав их через код пользовательского компонента, что позволяетт загружать интерфейс в приложение во время его работы. Такой способ значительно упрощает конструирование интерфейса и позволяет работать над ним даже людям, не знакомым с программированием. 

Создание интерфейса в редакторе Nau состоит из следующих основных шагов:

1. Создайте новый UI ассет в браузере проекта

2. Откройте созданный ассет двойным кликом. Его данные отобразятся в окне Структур (Outliner).

3. Создайте новые элементы в структуре интерфейса. Организуйте UI элементы в иерархии сцены и настройте их параметры в Инспекторе. В окне Обозревателя (Viewport) можно видеть, как интерфейс будет выглядеть в игре.

4. Сохраните настроенный интерфейс.

5. Загрузите готовый интерфейс пользователя через скрипт.

Давайте рассмотрим подготовку интерфейса через редактор подробнее.

В папке проекта нужно создать новый файл GUI.

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

Откройте созданную сцену дважды кликнув по файлу. В окне Outliner появится содержимое загруженного интерфейса.

Интерфейс строится по стандартным принципам, принятым в индустрии. Сцена интерфейса опирается на иерархию узлов (элементов), которая представлена в виде дерева в окне Outliner (1). 

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

В окне Viewport (2) будут отображаться все элементы загруженной сцены интерфейса. Предварительный просмотр позволяет настроить интерфейс с возможностью оценить результат, близкий к итоговому. При тестировании возможно оценить вёрстку интерфейса при различных соотношениях сторон экрана, просто изменив размер окна Viewport.

Окно Inspector (3) позволяет настраивать параметры выделенных элементов. Набор параметров конкретного элемента зависит от его типа.

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

• Node (Базовый элемент) - базовый служебный элемент интерфейса. Может быть использован для организации иерархии элементов или группировки.

• Button (Кнопка) - элемент обеспечивает функциональность кнопки, взаимодействующей с указателем мыши. Поддерживает несколько состояний (таких как наведение, нажатие или активность) и переключение между ними.

• Draw (Фигура) - позволяет отобразить четырёхугольник (например, нарисовать квадрат или трапецию) без использования растровых изображений.

• Label (Надпись) - элемент для отображения текста.

• Layer (Слой) - позволяет объединить группу элементов в слой.

• Scroll (Список) - элемент, необходимый для реализации области прокрутки

• Sprite (Изображение) - элемент отображает указанное в параметрах изображение.

При выборе в Outliner элемента интерфейса в окне Inspector отображаются его параметры.

Все элементы обладают рядом параметров для их настройки в  редакторе GUI. Некоторые параметры имеются у всех элементов, тогда как другие характерны для конкретного типа.

Базовый элемент (Node)

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

Такие параметры, как положение, вращение, масштаб, якорь, имя и другие, позволяют настроить основные характеристики элемента. Для настройки будет полезен параметр отладочной визуализации (enableDebugDrawing), который позволяет отобразить техническую обводку элемента. Параметр «Видимость» (visible) позволяет показывать или скрывать элемент.

Изображение (Sprite)

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

Надпись (Label)

В элементе отображается текст, который задаётся в параметре text. Для текста можно выбрать шрифт в формате *.fnt. Также можно настроить вертикальное и горизонтальное выравнивание текста, указать, как переносить слова и символы, и ограничить текст размерами элемента.

Фигура (Draw)

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

Кнопка (Button)

Элемент интерфейса, реагирующий на нажатие. Для элемента можно задать текстуры для разных состояний кнопки (“Нормальная”, “Наведение”, “Нажатие”, “Деактивирована”). Для каждого состояния также можно настроить дополнительные параметры, такие как цветовой фильтр или масштаб.

Список (Scroll)

Позволяет создать прокручиваемый список элементов по вертикали или по горизонтали. Имеет дополнительные параметры для стилизации и оформления.

Слой (Layer)

Позволяет настраивать слои группы элементов и упростить управление блоками интерфейса.

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

Помните о основных этапах создания интерфейса пользователя:

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

2. Структура и навигация: разработайте интуитивно понятную структуру с меню, кнопками, индикаторами и таймерами для удобной навигации.

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

4. Элементы интерфейса: определите роль различных элементов. Меню можно скомпоновать из списков и групп кнопок. Каждая кнопка должна быть привязана к действию. Не забывайте об индикаторах состояния и обратной связи на взаимодействие с интерфейсом. Каждое успешное действие должно быть подкреплено реакцией со стороны игры (анимация или звук). Используйте графические и текстовые элементы для индикации реакции на взаимодействие.

5. Настройка элементов: Измените размеры, цвета, шрифты и параметры для гибкости под разные разрешения и соотношения сторон экрана .

6. Тестирование: Проведите тестирование на реальных пользователях для выявления узких мест и возможностей улучшения.

7. Улучшение: Регулярно анализируйте интерфейс и вносите изменения для повышения функциональности и привлекательности.

В Nau Engine система пользовательских интерфейсов отделена от системы компонентов игровых объектов. Благодаря этому пользовательский интерфейс может функционировать независимо от загруженных трёхмерных сцен, что позволяет свободно использовать его в любом месте, где это необходимо.

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