Документация/Статьи/Обзор редактора интерфейсов

From NeoAxis 3D Engine Wiki

Jump to: navigation, search
Перейти на уровень выше

Contents

Описание

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

Помимо описания редактора в данной статье представлено два урока:

Редактор в режиме тестирования пользовательского интерфейса

Классы

Движок имеет следующий набор основных классов для элементов пользовательских интерфейсов:

  • Control.png Control — Элемент управления
  • Button.png Button — Кнопка
  • CheckBox.png CheckBox — Флажок
  • ComboBox.png ComboBox — Поле выбора из списка
  • EditBox.png EditBox — Поле ввода
  • ListBox.png ListBox — Список
  • Control.png ProfilingToolWindow — окно инструмента профилирования
  • Control.png SceneBox — Контейнер сцены
  • ScrollBar.png ScrollBar — Полоса прокрутки
  • TabControl.png TabControl — Вкладка
  • TextBox.png TextBox — Надпись
  • VideoBox.png VideoBox — Видео-проигрыватель

Ниже приведено описание каждого класса.

Элемент управления (Control)

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

Настройки класса разбиты на три группы: Background (фон), General (основные) и Layout (расположение).

Свойство Описание
Background
BackColor Цвета фона. Дополнительный цвет, умножаемый на цвет текстуры. Если установлено значение "0 0 0 0", цвет текстуры не изменяется. Для изменения цвета текстуры элемента управления необходимо, чтобы значение альфа-канала (последнее число) было больше 0.
BackTexture Текстура фона.
BackTextureCoord Координаты текстуры фона. Определяет сдвиг текстуры. Диапазон величин — от 0 до 1. Значение задается в пропорциях текстуры.
BackTextureFiltering Включает/выключает фильтрацию фоновой текстуры. Предлагается выбирать между Point (точечной) и Linear (линейной) фильтрацией.
BackTextureTile Включает/выключает тайлинг фоновой текстуры.
General
ColorMultiplier Цвет элемента управления. Данный параметр отвечает также за цвет текста, если таковой имеется. Использует умножение цвета для смешивания.
CopyTextFromParent Включить/выключить копирование текста родительского элемента. Чтобы получить одинаковый текст по всех окнах для ввода текста, относящихся к данному элементу управления, нужно выбрать значение True. При значении False, будет использоваться разный текст.
Enable Включить/выключить элемент управления. При выборе значения False, данный элемент управления будет находиться в выключенном состоянии и не будет реагировать на пользовательские команды.
MouseCover Включить/выключить блокировку мыши. Если опция включена, то данные от мыши не доходят до объектов, находящихся ниже активного окна.
Name Уникальное имя элемента управления.
Text Текст, который отображается на элементе управления, если он имеет текстовое окно.
TopMost Включить/выключить верхнее положение для элемента управления. Если выбрано значение True, то данный элемент всегда находится поверх других элементов.
Visible Видимость. Если выбрано значение False, то элемент управления становится невидимым.
Layout
Anchor Привязка. Позволяет связать этот компонент с другим, расположенным рядом с ним. Можно выбрать одно или несколько положений привязки. Также можно оставить без привязки к другим.
HorizontalAlign Выравнивание по горизонтали. Можно выбрать выравнивание по левой границе (Left), по центру (Center) или по правой границе (Right).
LockEditorResizing Включить/выключить блокировку изменения размера в редакторе. При выборе значения True, нельзя будет изменить размер элемента в редакторе.
Position Позиция. Устанавливает положение объекта. Координаты могут указываться в пропорциях (от 0 до 1) относительно родительского элемента (Parent), экрана (Screen) или экрана, пропорционально разрешению (ScreenByResolution). Также можно задать координаты в абсолютных величинах, выбрав тип Pixel. Подробнее процесс настройки позиции описан в данном разделе.
Size Размер. Может указываться в пропорциях (от 0 до 1) относительно родительского элемента (Parent), экрана (Screen) или экрана, пропорционально разрешению (ScreenByResolution). Также можно задать размер в абсолютных величинах, выбрав тип Pixel. Подробнее процесс настройки размера описан в данном разделе.
VerticalAlign Вертикальное выравнивание. Можно выбрать выравнивание по верхней границе (Top), по центру (Center) или по нижней границе (Bottom).

Кнопка (Button)

Кнопка может иметь 5 различных состояний:

  • состояние по умолчанию (DefaultControl),
  • курсор над кнопкой (OverControl),
  • кнопка нажата (PushControl),
  • кнопка в активном состоянии (ActiveControl),
  • кнопка неактивна (DisableControl).

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

Специальные свойства кнопки находятся в свитке Button.

Свойство Описание
Button
Active Включить/выключить активное состояние кнопки. Если выбрано значение True, кнопка постоянно находится в активном состоянии.
ClickMask Маска зоны нажатия кнопки (зона попадания). Задается с помощью черно-белой текстуры. Применяется для кнопок непрямоугольной формы.
ClickMaskTextureCoord Текстурные координаты маски зоны щелчков. Задает смещение для текстуры в пропорциях.
SoundClick Звук, воспроизводимый при нажатии на кнопку.
SoundMouseOut Звук, воспроизводимый, когда курсор мыши был убран с кнопки (вышел из зоны нажатия).
SoundMouseOver Звук, воспроизводимый, когда курсор мыши наводится на кнопку (попадает в зону нажатия).

Флажок (CheckBox)

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

Свойства флажка находятся в свитке свойств Check Box.

Свойство Описание
Check Box
Checked Установить или снять флажок. Если выбрано значение True, по умолчанию чек-бокс будет находиться в состоянии установленного флажка.

Поле выбора из списка (ComboBox)

ComboBox — кнопка, которая может быть развернута до списка, в котором можно выбрать значение.

Свойства поля выбора находятся в свитке свойств Combo Box.

Свойство Описание
Combo Box
TextIfNoSelection Текст, который выводится, когда значение не выбрано из списка.

Поле ввода (EditBox)

EditBox позволяет вводить текст в процессе работы. К примеру, в приложении можно предложить пользователю ввести свое имя в такое поле.

Специальные свойства поля ввода находятся в свитке Edit Box.

Свойство Описание
Edit Box
MaxCharacterCount Максимальное число символов, которое может быть введено в поле ввода.

Список (ListBox)

ListBox содержит несколько значений, одно из которых может быть выбрано. В отличие от ComboBox, список постоянно отображает все значения.

Специальные свойства списка находятся в свитке List Box.

Свойство Описание
List Box
AlwaysShowScrollBar Включить/выключить постоянное отображение полосы прокрутки. Если выбрано значение True, то полоса прокрутки отображается постоянно. Если выбрано значение False, то полоса прокрутки отображается лишь в том случае, когда не все элементы помещаются в список.
ClipRectangleBorders Отсечение по границам прямоугольника. Позволяет присоединить текст к границам окна списка. Может указываться в пропорциях (от 0 до 1) относительно родительского элемента (Parent), экрана (Screen) или экрана, пропорционально разрешению (ScreenByResolution). Также можно задать отсечение в абсолютных величинах, выбрав тип Pixel.
HideSelectionWhenDisabled Включить/выключить отображение выбора, когда элемент выключен. Если выбрано значение True, то выбор не отображается, когда элемент выключен (т.е. свойство Enabled установлено в False).
SelectedIndex Индекс выбранного элемента. Определяет значение, выбранное по умолчанию. Нумерация начинается с нуля.

Окно инструмента профилирования (ProfilingToolWindow)

ProfilingToolWindow — это специальный класс для создания инструмента профилирования. Пример использования данного класса можно посмотреть в Game.exe, если в меню выбрать Profiling Tool.

ProfilingToolWindow не имеет специальных свойств для настройки.

Контейнер сцены (SceneBox)

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

Специальные свойства элемента разделены на категории Camera, Objects, RenderTarget и RenderingOptions.

Свойство Описание
Camera
CameraFixedUp Вектор, указывающий направление вверх камеры.
CameraFov Угол обзора камеры в градусах.
CameraLookAt Точка, на которую направлена камера.
CameraNearFarClipDistance Пара значений, определяющая расстояния до ближней и дальней плоскости отсечения. Те объекты, которые находятся до ближней плоскости или за дальней плоскостью, не рисуются.
CameraPosition Позиция камеры в пространстве.
Objects
Objects Список объектов сцены. Свойства объектов подробно описаны ниже.
ShowMainSceneObjects Включить/выключить отображение объектов основной сцены.
RenderTarget
AllowFXAACompositor Включить/выключить эффект пиксельного сглаживания.
AllowHDRCompositor Включить/выключить эффект расширенного цветового диапазона.
AutoMipmaps Включить/выключить режим генерации mipmap уровней для текстур.
AutoUpdate Включить/выключить автоматическое обновление сцены.
DetectResolutionOnScreen Включить/выключить режим автоматического подбора размера текстуры для того, чтобы отображать её на экране с попиксельной точностью.
Resolution Разрешение текстуры сцены в икселях.
UseHDRTexture Включить/выключить использование текстуры с расширенным цветовым диапазоном.
RenderingOptions
AmbientLight Цвет света окружения.
MaterialScheme Схема материалов при рендеринге сцены.
ShadowsEnabled Включить/выключить тени.

Свойства объектов сцены

У объектов сцены имеется две общих группы свойств: _General (общие) и Transform (трансформация).

Свойство Описание
_General
Name Имя объекта.
Visible Включить/выключить отображение объекта. Если выбрано значение True, то объект будет виден.
Transform
Position Позиция объекта на карте.
Rotation Поворот объекта. Углы поворота задаются в градусах.
Scale Масштабирование объекта.

Специальные свойства SceneBoxMesh (меша).

Свойство Описание
Mesh
CastDynamicShadows Включить/выключить отбрасывание теней от 3D модели.
MeshName Имя файла меша.
OverrideMaterial Переопределенный материал. Если материал выбран, то он присваивается мешу. Если материал не выбран, то используются материалы меша.

Специальные свойства SceneBoxParticle (системы частиц).

Свойство Описание
Particle
ParticleName Имя файла системы частиц.

Специальные свойства SceneBoxLight (источника света).

Свойство Описание
Misc
AttenuationFar Максимальная дальность действия источника. Используется только для Spot и Point источников света.
AttenuationNear Дистанция, дальше которой действие источника будет затухать. Используется только для Spot и Point источников света.
AttenuationPower Сила затухания источника. Используется только для Spot и Point источников света.
CastShadows Включить/выключить генерирование теней от источника.
CustomShaderParameter Специальный параметр для разработчиков, который позволяет передать заданное значение в шейдер.
DiffuseColor Диффузный цвет источника света.
DiffusePower Яркость источника.
FFPAttenuationConstant Константный коэффициент затухания при рендеринге в режиме фиксированного конвейера (для очень старых видеокарт).
FFPAttenuationLinear Линейный коэффициент затухания при рендеринге в режиме фиксированного конвейера (для очень старых видеокарт).
FFPAttenuationQuadric Квадратичный коэффициент затухания при рендеринге в режиме фиксированного конвейера (для очень старых видеокарт).
LightType Тип источника. Поддерживается три типа источников света: прожектор (Spot), точечный источник света (Point), однонаправленный источник света (Directional).
SpecularColor Цвет бликов источника света.
SpecularPower Яркость бликов.
SpotlightFalloff Коэффициент затухания света от внутреннего к внешнему конусу. Чем выше значение, тем плавнее затухание. Параметр используется только для Spot источников.
SpotlightInnerAngle Угол внутреннего конуса. Параметр определяет насколько свет сконцентрирован у центра. Разница будет заметна только тогда, когда параметр SpotlightFalloff установлен выше минимального значения. Параметр используется только для Spot источников.
SpotlightOuterAngle Угол внешнего конуса источника. Параметр используется только для Spot источников.

Тип SceneBoxHelper (вспомогательный объект) не обладает специальными свойствами.

Полоса прокрутки (ScrollBar)

ScrollBar имеет ползунок (кнопку), который используется для установки текущего значения элемента управления. Значение представляет собой число из некоторого определенного диапазона значений. Полоса прокрутки может использоваться, к примеру, для прокрутки текста, который не помещается в окно, или для регулирования уровня звука.

Специальные свойства полосы прокрутки располагаются в категории Scroll Bar:

Свойство Описание
Scroll Bar
Value Начальное значение полосы прокрутки. Должно быть в диапазоне ValueRange.
ValueRange Минимальное и максимальное значения, которые может принимать полоса прокрутки.
Vertical Включить/выключить вертикальную ориентацию полосы прокрутки. Если выбрано значение True, то полоса прокрутки располагается вертикально. Если выбрано значение False, то полоса прокрутки располагается горизонтально.

Панель вкладок (TabControl)

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

Специальные свойства панели вкладок располагаются в категории Tab Control:

Свойство Описание
Tab Control
PageButtonsOffset Смещение кнопок, размещенных на данном элементе управления. Смещение может указываться в пропорциях (от 0 до 1) относительно родительского элемента (Parent), экрана (Screen) или экрана, пропорционально разрешению (ScreenByResolution). Также можно задать смещение в абсолютных величинах, выбрав тип Pixel.
PageButtonsPosition Позиция кнопок на элементе управления. Позиция может указываться в пропорциях (от 0 до 1) относительно родительского элемента (Parent), экрана (Screen) или экрана, пропорционально разрешению (ScreenByResolution). Также можно задать позицию в абсолютных величинах, выбрав тип Pixel.
SelectedIndex Номер вкладки, выбранной по умолчанию. Отсчет вкладок ведется с нуля.

Надпись (TextBox)

TextBox может содержать однострочный или многострочный текст с возможностью переноса слов.

Специальные свойства надписи разбиты на категории Text Box, Text Shadow, Word Wrap:

Свойство Описание
Text Box
AutoSize Включить/выключить автоматическое определение размеров элемента. Если выбрано значение True, то размер элемента будет соответствовать размеру текста, содержащемуся в элементе.
ClipRectangle Параметр позволяет отрезать по сторонам элемент при отрисовке.
Font Шрифт, используемый для отображения текста. Можно выбирать из заранее подготовленных шрифтов. Подробные инструкции находятся в обзоре редактора шрифтов.
SupportLocalization Включить/выключить поддержку локализации. Если выбрано значение True, то текст надписи может быть заменен на переведенный.
TextColor Цвет текста.
TextHorizontalAlign Выравнивание текста по горизонтали. Предлагается выбрать одно из следующих значений: Left (по левому краю), Center (по центру) или Right (по правому краю).
TextOffset Смещение текста. Смещение может указываться в разных величинах: Parent (в пропорциях относительно родительского элемента); Screen (в пропорциях экрана); ScreenByResolution (пропорционально разрешению экрана); Pixel (в пикселях на экране).
TextVerticalAlign Выравнивание текста по вертикали. Предлагается выбрать одно из следующих значений: Top (по верхнему краю), Center (по центру) или Bottom (по нижнему краю).
Text Shadow
Shadow Включить/выключить тень от текста. Если выбрано значение True, то текст будет отображаться с тенью.
ShadowColor Цвет тени от текста.
ShadowOffset Смещение тени. Смещение может указываться в разных величинах: Parent (в пропорциях относительно родительского элемента); Screen (в пропорциях экрана); ScreenByResolution (пропорционально разрешению экрана); Pixel (в пикселях на экране).
Word Wrap
AlignByWidth Включить/выключить выравнивание текста по ширине.
VerticalTextIndention Отступы текста по вертикали. Определяет промежутки между строками текста.
WordWrap Включить/выключить перенос слов.

Видео-проигрыватель (VideoBox)

VideoBox позволяет воспроизводить видео.

Специальные свойства элемента находятся в категории Video:

Свойство Описание
Video
Filename Имя видео-файла.
Loop Включить/выключить непрерывное проигрывание. Если выбрано значение True, то после окончания проигрывания видео воспроизведение автоматически начнется заново.
Pause Пауза. Если выбрано значение True, проигрыватель переходит в режим паузы.
Volume Громкость звукового сопровождения видео.

Готовые элементы управления из SDK

В движке имеется большое количество готовых элементов управления. Найти их можно в папке Data\GUI\Controls. Ниже описаны наиболее важные из них.

Имя файла Базовый класс Описание Внешний вид
DefaultButton.gui Кнопка Кнопка, в зависимости от действий пользователя, может находиться в следующих состояниях: Default (по умолчанию), Over (под курсором), Push (нажата), Active (активна), Disable (выключена).
GuiEditor 002.jpg
DefaultCheckBox.gui Поле флажка Поле флажка работает почти также как и кнопка, но может менять свой вид между двумя вариантами: с флажком или без флажка. Флажок переключается из одного состояния в другое после нажатия на кнопку.
GuiEditor 003.jpg
DefaultCheckedListBox.gui Список флажков Группа полей с флажком, позволяющих осуществлять множественный выбор.
GuiEditor 004.jpg
DefaultComboBox.gui ComboBox (Поле выбора из списка) ComboBox — список, выпадающий при щелчке мыши, из которого выбирается одно значение.
GuiEditor 005.jpg
DefaultEditBox.gui EditBox (Поле ввода) Поле, куда пользователь может вводить текст. Содержит одну строку текста и не переносит ее.
GuiEditor 006.jpg
DefaultEditBox_WordWrap.gui EditBox (Поле ввода) Поле для ввода текста, которое может содержать многострочный текст, строки которого переносятся автоматически.
GuiEditor 007.jpg
DefaultHScrollBar.gui ScrollBar (Полоса прокрутки) Полоса прокрутки, позволяющая прокручивать содержимое окон, а также регулировать значения каких-либо величин из указанного диапазона. Прокрутка происходит в горизонтальной плоскости.
GuiEditor 008.jpg
DefaultListBox.gui ListBox (Окно списка) Список значений, из которого может быть выбрано одно значение. В отличие от ComboBox, ListBox постоянно отображает все доступные значения.
GuiEditor 009.jpg
DefaultVScrollBar.gui ScrollBar (полоса прокрутки) Полоса прокрутки, позволяющая прокручивать содержимое окон, а также регулировать значения каких-либо величин из указанного диапазона. Прокрутка происходит в вертикальной плоскости.
GuiEditor 010.jpg
DefaultWindow.gui Control (Элемент управления) Окно имеет заголовок и может содержать другие элементы управления.
GuiEditor 011.jpg
SamallCheckBox.gui CheckBox (Флажок) Маленькое поле с флажком. Уменьшенный в размерах аналог DefaultCheckBox.gui.
GuiEditor 012.jpg

GUI-файлы

Файлы с расширением .gui являются контейнерами для хранения пользовательских интерфейсов и элементов управления. GUI-файл можно компоновать из других GUI-файлов. Зачастую, в основе пользовательского интерфейса используется DefaultWindow (стандартное окно). Множество примеров GUI-файлов можно найти в папке "Data\GUI".

Создание GUI-файла

Для создания нового GUI-файла, нужно щелкнуть правой кнопкой мыши на папке в окне Resources редактора и выбрать пункт New, а в нем подпункт Graphic User Interface.

GuiEditor 013.jpg

В появившемся окне следует указать имя GUI-файла, базовый класс или GUI-файл и нажать кнопку Next (вперед). Пользовательский интерфейс или элемент управления наследует свойства базового класса или другого GUI-файла. Выбирая готовый шаблон и настраивая его параметры, можно сэкономить время.

GuiEditor 014.jpg

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

В окне Control Hierarchy (иерархия элементов управления) отображается структура элемента управления — все элементы управления и их иерархия. В этом окне можно выбрать элемент, чтобы посмотреть или изменить его свойства в окне Properties.

GuiEditor 015.jpg

Чтобы добавить элемент управления, нужно выделить элемент, в котором будет находиться новый, и нажат правой кнопкой мыши в рабочей области окна. В появившемся контекстном меню следует выбрать пункт Create New Control (создать новый элемент управления). Ту же операцию можно проделать в окне Control Hierarchy.

GuiEditor 016.jpg

Затем в окне New Control (новый элемент управления) необходимо выбрать класс или GUI-фай, который будет добавлен, и нажать на кнопку OK. По завершению редактирования GUI-файла его следует сохранить. Для этого служит кнопка Save в главной панели.

GuiEditor 017.jpg

Свойства Position и Size

Все элементы управления имеют раздел свойств Layout (размещение), в котором находятся свойства Position (положение) и Size (размер). Значения могут указываться в разных величинах: Parent (в пропорциях относительно родительского элемента); Screen (в пропорциях экрана); ScreenByResolution (пропорционально разрешению экрана); Pixel (в пикселях на экране). Также, необходимо учитывать вертикальное и горизонтальное выравнивание элемента, так как они влияют на положение.

Parent (В пропорциях относительно родительского элемента)

Этот тип использует в качестве опорного объекта родительский элемент, т.е. элемент, к которому принадлежит данный. В окне Control Hierarchy наглядно показано, какой элемент является родительским по отношению к текущему.

GuiEditor 018.jpg

В примере выше элемент A является родительским объектом относительно элемента B, а элемент B — родительским относительно элемента C.

Если выбран тип опорного объекта Parent, то значения задаются в пропорциях родительского объекта. К примеру, чтобы объект имел ширину вдвое меньше, чем его родитель, значение должно быть равно 0.5.

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

Screen (в пропорциях экрана)

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

В данном случае, значения также задаются в пропорциях. Верхний левый угол имеет координаты (0, 0), а нижний правый угол — (1, 1). К примеру, если установить положение объекта на (Screen 0.5 0.5), то его верхний левый угол будет расположен точно в центре экрана.

ScreenByResolution (пропорционально разрешению экрана)

В этом типе значения положения или размера задаются в виртуальных точках. Высота экрана всегда равна 768 виртуальных пикселов. Ширина экрана зависит от размера окна, но коэффициент пропорциональности всегда 1:1.

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

Pixel (в пикселях на экране)

В этом типе позиция и размер элементов задаются в пикселях.

Настройки

Получить доступ к настройкам редактора интерфейсов можно, открыв окно Options (настройки) из главной панели или через меню Tools -> Options. В появившемся окне необходимо выбрать вкладку GUI.

User Interface Editor Options window.

Настройки редактора интерфейсов разбиты на две группы: General (основные) и Test Mode (режим тестирования).

Свойство Описание
General
Background Color Цвет фона в рабочем окне.
Grid Color Цвет сетки.
Grid Step Шаг сетки. Чем выше эта величина, тем больше расстояние между линиями сетки. Все элементы управления привязаны к этим линиям.
Show Grid Включить/выключить отображение сетки. Если выбрано значение True, то сетка отображается.
Test Mode
Scaling In Test Mode Включить/выключить растягивание элементов в режиме тестирования.

Урок — Создание меню

В этом уроке мы научимся создавать GUI-файлы аналогичные MainMenuWindow.gui (окно главного меню), который можно найти в папке Data\GUI. Наше меню будет содержать заголовок, текст, кнопки для выхода и запуска игры, а также изображение.

Создание GUI-файла

Начнем урок с создания GUI-файла нашего меню. Для этого щелкнем правой кнопкой по папке GUI в окне Resources, в контекстном меню выберем пункт New, а в нем подпункт Graphic User Interface.

GuiEditor 020.jpg

В появившемся окне укажем имя нашего GUI-файла, пусть это будет Menu. Далее выберем базовый GUI-файл для меню. Т.к. нам необходимо создать окно с заголовком, в качестве базового элемента удобно использовать DefaultWindow.gui (стандартное окно). Чтобы завершить создание GUI-файла меню, нажмем на кнопку Next.

GuiEditor 021.jpg

Настройка окна

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

GuiEditor 022.jpg

Теперь нам предстоит поменять несколько параметров окна. Для этого выделим его, нажав на него в рабочей области или установив флажок напротив элемента GUI\Menu.gui в окне Control Hierarchy.

GuiEditor 023.jpg

Укажем заголовок (Menu) нашего окна в поле Text в окне Properties. А также установим размер окна равным 480 на 400 виртуальных пикселей, оставив ScaleByResolution в качестве опорного элемента.

Подробно свойства Position и Size, а также об использовании опорных элементов, описаны в этом разделе.
Окно с заголовком

Добавление элементов

Приступим к наполнению окна элементами.

Чтобы добавить элемент в окно, выделим его в окне Control Hierarchy и нажмем на нем правой кнопкой мыши для вызова контекстного меню. Те же действия можно проделать в рабочей области. Затем в контекстном меню выберем пункт Create New Control.

GuiEditor 025.jpg

Начнем мы с добавления в окно надписи. Для этого в окне New Control (новый элемент) выберем класс TextBox (текстовое поле). Найти его можно в группе Classes.

GuiEditor 026.jpg

Надпись добавлена и выделена в окне иерархии элементов, поэтому мы можем сразу же приступить к ее настройке. Нам нужно изменить размер надписи, на более приемлемый (по умолчанию надпись занимает всё пространство окна). В поле Size (размер) выберем опорный элемент ScaleByResolution и введем значение (480 30). Переместить надпись можно с помощью мыши, сдвинув ее под заголовок таким образом, чтобы значение свойства Position (положение) стало равным (ScaleByResolution 0 40). Наконец, в поле Text введем текст нашей надписи: "Press "Start" to run the game" (нажмите "Старт", чтобы запустить игру).

Надпись под заголовком

На следующем шаге добавим в окно изображение. Снова выделим окно, нажмем на него правой кнопкой мыши, выберем в контекстном меню пункт Create New Control. В появившемся окне New Control выберем класс Control (элемент управления). После того как элемент добавлен, в свойствах выберем поле BackTexture (фоновая текстура) и нажмем на кнопку "..." напротив него.

GuiEditor 028.jpg

В открывшемся окне выбора ресурса, укажем текстуру. Выберем файл NeoAxis_256x256.png, расположенный в директории GUI\Textures.

GuiEditor 029.jpg

Теперь нам осталось изменить размещение изображения. Во-первых, укажем размер элемента — (ScaleByResolution 256 256). Во-вторых, выровняем изображение по центру окна. Для этого у свойств HorizontalAlign и VerticalAlign выставим значение Center.

Изображение по центру окна

Добавим две кнопки в окно. Проделаем те же операции, что и для добавления надписи или изображения. В окне New Control выберем файл DefaultButton.gui (стандартная кнопка), находящийся в папке "Data\GUI\Controls". Расположим кнопки внизу окна, перемещая их мышью в рабочей области. В свойствах укажем значения поля Text: у одной из кнопок это будет Start (старт) и Exit (выход) — у другой.

Две кнопки внизу окна

После того как создание окна завершено, сохраним наш GUI-файл. Для этого нажмем кнопку с изображением дискеты в главной панели или выберем пункт Save в меню File.

Тестирование

Посмотреть на то, как выглядит пользовательский интерфейс, можно непосредственно в редакторе ресурсов. Для этого нажмем кнопку Test под окном Properties.

Переход в режим тестирования пользовательского интерфейса

Для завершения режима тестирования и возвращения в режим редактирования, нажмем кнопку Stop.

Режим тестирования пользовательского интерфейса

Заключение

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

Урок — Элемент управления вкладками

В этом уроке мы научимся работать с элементом управления страницами-вкладками — TabControl. Примером использования элемента управления вкладками является окно настроек Game.exe. Страница или вкладка элемента представляет собой иерархию из любых элементов управления.

Вкладка Video окна настроек Game.exe
Вкладка Controls окна настроек Game.exe

Создание окна с элементом управления вкладками

Приступим к созданию GUI-файла с элементом управления вкладками. Нажмем правой кнопкой мыши на папке GUI в редакторе ресурсов и выберем в контекстном меню пункт New -> Graphic User Interface.

GuiEditor 036.jpg

В появившемся окне укажем имя GUI-файла: SampleTabControlWindow. Чтобы разместить наш будущий элемент управления вкладками в окне, выберем тип базового объекта: DefaultWindow.gui. После этого нажмем кнопку Next.

GuiEditor 037.jpg

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

GuiEditor 038.jpg

В стандартом окне, который мы указали в качестве базового объекта, разместим наш элемент управления вкладками. Но сначала подготовим окно. Выделим его в окне Control Hierarchy или в рабочей области и настроим несколько параметров. Во-первых, сменим заголовок (поле Text) на "Sample Tab Control Window". Во-вторых, изменим размер окна (поле Size) на (ScaleByResolution 600 410).

Окно для элемента управления вкладками

Теперь добавим элемент управления вкладками в окно. Нажмем правой кнопкой на окно в рабочей области или в окне Control Hierarchy. В появившемся контекстном меню выберем пункт Create New Control. В окне New Control укажем класс TabControl в группе Classes и нажмем кнопку OK. Выделим элемент управления вкладками и разместим его во внутренней части окна. Элемент управления вкладками создан, но в нем не хватает страниц и кнопок для их переключения.

Пустой элемент управления вкладками

Создание страниц

Теперь создадим две вкладки. На первой разместим форму для отправки сообщений, а на второй — изображение. Обе вкладки будут базироваться на обычном элементе управления (Control).

Добавим первую вкладку. Для этого выделим элемент управления вкладками, нажмем на него правой кнопкой мыши и в контекстном меню выберем пункт Create New Control. В окне New Control укажем класс элемента — Control из группы Classes, а в списке Parent Control Slot выберем Page 0 (0-я страница) и нажмем на кнопку OK.

GuiEditor 041.jpg

В свойствах страницы укажем размер — (ScaleByResolution 356 356). Затем разместим вкладку в правой части окна (место слева нам понадобится для кнопок, переключающих страницы). Кроме того, в поле текст введем заголовок для вкладки — Feedback. В дальнейшем заголовок будет использован для надписей на кнопках переключения вкладок.

Пустая вкладка

Наполним вкладку следующими элементами:

  • надпись (класс TextBox) с текстом "Message:", выравненным по левому краю (свойство TextHorizontalAlign со значением Left) и размером (ScaleByResolution 340 30),
  • текстовое поле с переносом текста (файл DefaultEditBox_WordWrap.gui), с текстом "Your text here..." (ваш текст здесь) и размером (ScaleByResolution 340 230),
  • кнопка (файл DefaultButton.gui), с текстом Send (отправить) и размером (ScaleByResolution 340 30).

Для добавления элементов каждый раз нам придется выделять элемент, выступающий в роли 0-й вкладки, вызывать контекстное меню и нажимать на кнопку Create New Control. Разместим элементы как показано на изображении ниже.

GuiEditor 043.jpg

Снова выделим элемент управления вкладками и добавим новую страницу. В окне New Control снова нужно выбрать класс Control, а в списке Parent Control Slot на этот раз указать Page 1. Новая вкладка будет иметь тот же размер, что и первая — (ScaleByResolution 356 356), и располагаться на том же месте. В отличие от предыдущей страницы, у Page 1 укажем фоновую текстуру. Для этого выделим вкладку и нажмем на кнопку "..." напротив поля BackTexture.

GuiEditor 044.jpg

В появившемся окне выбора ресурса, выберем файл NeoAxis_256x256.png, расположенный в директории "Data\GUI\Textures.

GuiEditor 045.jpg

Также введем текст в соответствующее поле. Пусть вкладка называется Logo.

Вкладка с изображением

В режиме редактирования, чтобы переключаться между вкладками, необходимо вводить номер вкладки (начиная с 0) в поле SelectedIndex (выбранный индекс) элемента управления вкладками. В готовом приложении можно переключаться между вкладками из кода. Также можно воспользоваться стандартным способом: настроить кнопки переключения между вкладками в редакторе ресурсов.

Создание кнопок

Стандартные кнопки переключения элемента управления вкладками настраиваются следующим образом:

  • указывается элемент-шаблон кнопки,
  • указывается положение кнопок и отступ между ними,
  • для заголовка кнопки служит текст вкладки.

Настроим стандартные кнопки переключения. В качестве шаблона будем использовать стандартную кнопку. Выделим элемент управления вкладками и добавим к нему новый элемент. В окне New Control укажем файл DefaultButton.gui, а в списке ParentSlotControl выберем PageButton (кнопка для страниц).

GuiEditor 047.jpg

Теперь расставим кнопки в левой части окна. Для этого выделим элемент управления вкладками. Укажем сначала положение кнопок переключения (свойство PageButtonsPosition) — (ScaleByResolution 10 20). А затем установим промежуток между кнопками (свойство PageButtonsOffset) равным (ScaleByResolution 0 40).

Элемент управления вкладками с кнопками переключения

Завершение создания окна с элементом управления вкладками

После того, как вкладки созданы и наполнены элементами, а кнопки переключения заняли своё место в окне, необходимо сохранить GUI-Файл. Для этого нажмем кнопку с изображением дискеты в главной панели или воспользуемся меню File -> Save.

Тестирование

Посмотреть элемент управления вкладками в действии можно сразу в редакторе. Для этого нажмем на кнопку Test под окном свойств.

Запуск режима тестирования

Переключение вкладок с помощью стандартных кнопок работает и в режиме тестирования. Чтобы перейти на вторую вкладку (Page 1), нажмем на кнопку Logo.

Переключения вкладок

Для возвращения режим редактирования нажмем на кнопку Stop под окном свойств.

Завершение режима тестирования

Заключение

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