Игровой интерфейс¶

Редактор игровых интерфейсов (GUI Editor) в Nau Engine¶

Добро пожаловать в руководство по использованию Редактора игровых интерфейсов (GUI Editor) в Nau Engine! GUI Editor — это инструмент, позволяющий создавать и настраивать интерактивные элементы пользовательского интерфейса (UI) для ваших игр. Это руководство поможет вам освоить основные функции редактора и создать привлекательные и функциональные интерфейсы. Обратите внимание, что в бета-версии функциональность редактора пользовательских интерфейсов может быть ограничена.

Создание GUI-ассета и открытие редактора¶

Прежде чем начать работу с GUI Editor, необходимо создать GUI-ассет. GUI-ассет — это контейнер, хранящий все элементы пользовательского интерфейса. Создание ассета запускает редактор.

Для этого выполните следующие действия:

Откройте «Project Browser»: это главный менеджер файлов вашего проекта в Nau Engine.
Вызовите контекстное меню: щелкните правой кнопкой мыши в окне «Project Browser».
Выберите «Создать GUI-ассет»: в контекстном меню выберите пункт «Создать GUI-ассет».
Укажите имя: укажите имя для нового ассета.
Открытие ассета: после создания ассета GUI-ассета двойным кликом ЛКМ по созданному файлу можно открыть конструктор интерфейсов.
Создание интерфейса: создайте иерархию элементов и настройте их. После этого сохраните GUI ассет.
Подключение в игре: после настройки интерфейса, вы можете использовать ассет инициализировав его во время выполнения через программный код. UI

Обзор интерфейса GUI Editor¶

Интерфейс GUI Editor состоит из нескольких ключевых окон:

Структура сцены (Outliner): Отображает иерархическую структуру элементов UI. Здесь вы можете добавлять, переименовывать, перемещать и удалять элементы.

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

Поддерживает операции:

добавление элементов (кнопка «+ Add»),
удаление элементов,
фильтрация элементов по имени и типу.

Конструктор интерфейса (GUI Viewport): это холст, на котором вы создаете и размещаете элементы UI. В окне возможен предварительный просмотр всех настроенных параметров.

Инспектор элемента (Inspector): позволяет настраивать параметры выбранного элемента UI. Все изменения параметров отражаются на состоянии элементов в конструкторе интерфейса.

Настройка параметров GUI-элементов¶

GUI Editor позволяет настраивать параметры выбранного элемента UI. Эти параметры позволяют настроить внешний вид и поведение каждого элемента:

Node: это базовый тип элемента интерфейса. Все прочие типы элементов опираются на его функции и параметры. Настраивайте поворот, размер, масштаб и точку привязки.
Sprite (Изображение): позволяет отобразить нужное изображение, импортированное в проект. Выбирайте изображения из «Project Browser». Все базовые параметры также применяются к элементу.
Label (Текст): позволяет отображать текст с возможностью выбора шрифта. Вы можете использовать собственный шрифт в формате (.fnt). Текст может быть настроен как через редактор, так и изменён через программный код.
Draw (Фигура): позволяет визуализировать четырёх угольник с возможностью настройки положения каждого угла. Например, можно создать квадрат или трапецию. Для элемента не требуется текстура, а цвет может настраиваться как для заполнения, так и для обводки.
Button (Кнопка): настраивайте текст, изображение, состояния (normal, hover, pressed, disabled). Регистрация события нажатия происходит через программный код. Обратитесь к API системы, чтобы узнать подробнее.
Scroll (Скролл): позволяет создать прокручиваемую область (например, список). Настраивайте размер, видимость стрелок, картинку каретки, ориентацию, цвет полосы прокрутки и ползунка.
Layer (Слои): вы можете управлять видимостью слоев и их параметрами для организации блоков интерфейса.

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

Заключение¶

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

Простота. Меньшее количество элементов позволяет пользователю быстрее освоить интерфейс, а группировка и отделение различных функций позволит быстрее сориентироваться и легче запомнить, где находятся те или иные функции.
Наглядность. Чёткое визуальное выделение элементов по их назначению позволяет пользователю быстрее понять, что сделает элемент, даже без взаимодействия.
Оригинальность. Визуальная оригинальность интерфейса не должна идти в ущерб его читаемости. Шаблоны восприятия, которые есть у многих пользователей, так же важны, как и самовыражение автора.
Отзывчивость. Интерфейс всегда должен максимально реагировать на действия пользователя. Оптимизация и тестирование — важный этап. Протестируйте различные сценарии взаимодействия. Если какие-либо действия ведут к длительным вычислениям или загрузкам, всегда сообщайте пользователю о том, чем занята программа.
Обратная связь. Каждое действие пользователя должно откликаться в программе. Пользователь не должен гадать, нажал ли он кнопку и отреагировала ли игра на его действие. Используйте анимацию элементов и звуковые эффекты для подтверждения, что интерфейс функционирует верно.
Однозначность. Пользователь не должен сомневаться в действии того или иного элемента. Если какая-либо кнопка работает в зависимости от контекста, сообщите пользователю об этом через визуальные элементы (цвет, текст или любые другие способы).

GUI Editor в Nau Engine — это инструмент для создания пользовательских интерфейсов. Используйте это руководство, экспериментируйте и создавайте уникальные и запоминающиеся интерфейсы для ваших игр!