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

Language:

English • Русский

Status:

Approved

Перейти на уровень выше

Обзор

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

Опции

Вы можете настроить редактор интерфейсов в Options (Опции). Для доступа к ним выберите Options (Опции) из панели инструментов или через Tools->Options (Инструменты -> Опции). Появится окно Options:

В свитке General (Общие) существуют 4 параметра:

Наименование свойства	Описание
Background Color (Цвет фона)	Позволяет вам установить цвет фона в рабочем окне. Вы можете либо выбрать величины RGBA (красный, зеленый, синий, альфа-канал) (каждый в диапазоне 0-255) или использовать цветовую палитру.
Grid Color (Цвет сетки)	Позволяет вам установить цвет сетки. Вы можете либо выбрать величины RGBA (красный, зеленый, синий, альфа-канал) (каждый в диапазоне 0-255) или использовать цветовую палитру.
Grid Step (Шаг сетки)	Определяет плотность сетки. Чем выше эта величина, тем больше расстояние между линиями сетки. Все ваши элементы управления привязаны к этим линиям.
Show Grid (Показать сетку)	Включение/Выключение индикации сетки.

Классы

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

• Control - Элементы управления
• Button - Кнопка
• CheckBox - Чек-бокс
• ComboBox - Поле со списком
• EditBox - Поле ввода
• ListBox - Список
• ScrollBar - Полоса прокрутки
• TabControl - Элемент управление закладками
• TextBox - Вывод текста
• VideoBox - Видео-проигрыватель

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

Каждый класс основан на классе Control (Элемент управления) и наследует его свойства. Свиток свойств фона:

Наименование свойства	Описание
BackColor (Цвет фона)	Дополнительный цвет, умножаемый на цвет текстуры. Если он установлен на значение "0 0 0 0", цвет текстуры не изменяется. Примечание: Если вы хотите изменить цвет, помните, что нужно изменить последнюю величину (alpha) на величину больше 0, иначе ваша текстура станет невидимой.
BackTexture (Текстура фона)	Здесь вы можете определить текстуру фона вашего элемента управления.
BackTextureCoord (Координаты текстуры фона)	Определяет сдвиг текстуры. Диапазон величин - от 0 до 1. Пример: У вас имеется текстура размером 50x50 пикселов, которая имеет два состояния кнопки - одно - на верхней половине и другое - на нижней половине текстуры. Для правильного назначения первой половины первому состоянию кнопки вам следует записать "0 0 1 0.5". Для второго состояния координаты должны быть "0 0.5 1 1". Если вы хотите инвертировать текстуру, введите координаты в обратном порядке.
BackTextureTile (Тайл текстуры фона)	Включает или выключает тайлинг текстуры.

Свиток свойств General (Общие):

Наименование свойства	Описание
ColorMultiplier (Множитель цвета)	Здесь вы можете изменить цвет элемента управления, включая текст, который он может содержать. Использует умножение цвета для блендинга.
CopyTextFromParent (Копировать текст с родительского элемента)	Установите в значение True, чтобы получить одинаковый текст по всех окнах для ввода текста, относящихся к данному элементу управления. Установите в значение False, если вы хотите использовать разный текст.
Enable (Активировать)	При установке в значение False данный элемент управления будет находиться в деактивированном состоянии и не будет реагировать на пользовательские команды.
MouseCover (Блокировка мыши)	Блокирует ввод с мыши для объектов, находящихся ниже активного окна.
Name (Имя)	Здесь вы можете присвоить уникальное имя вашему элементу управления.
Text (Текст)	Здесь вы можете ввести некий текст, который появится на элементе управления (если он имеет текстовое окно).
TopMost (Верхняя позиция)	При установке в значение True этот элемент управления остается в верхнем положении все время.
Visible (Видимость)	При установке в значение False элемент управления становится невидимым.

Свиток свойств Layout:

Наименование свойства	Описание
Anchor (Привязка)	Позволяет связать этот компонент с другим, раположенным рядом с ним. Вы можете выбрать положение привязки.
HorizontalAlign (Выравнивание по горизонтали)	Устанавливает горизонтальное выравнивание. Вы можете выбрать выравнивание Left (По левой границе), Center (По центру) или Right (Правой границе)
LockEditorResizing (Блокировка изменения размера редактора)	При установке в значение True изменение размеров блокируется и вы не сможете изменить размер этого компонента.
Position (Положение)	Позволяет позиционирование компонента. Имеют три опорные точки: родительскую, экранную и текстурную, по отношению к которым вы можете задать смещение.
Size (Размер)	Позволяет вам изменить размер компонента. Имеются три опорные точки: родительская, экранная и текстурная, по отношению к которым вы можете задать размер компонента.
SizeByBackTexture (Размер по текстуре фона)	Изменяет размер компонента по размеру текстуры фона.
VerticalAlign (Вертикальное выравнивание)	Устанавливает вертикальное выравнивание. Вы можете выбрать выравнивание Top (По верхней границе), Center (По центру) or Bottom (По нижней границе)

Кнопка

Кнопка может иметь 4 различных состояния: по умолчанию, выделенное, нажатое, активное или неактивное. Каждому из этих состояний вы можете назначить элемент управления (например, окно для ввода текста, таким образом, кнопка может иметь выведенный текст). Специальные свойства кнопки:

Наименование свойства	Описание
Active (Активное состояние)	При установке в значение True кнопка постоянно находится в активном состоянии.
ClickMask (Маска зоны щелчков)	Здесь вы можете выбрать черную и белую маску, которая определяет зону кнопки, выбираемую с помощью щелчка. Иногда это называют 'зоной попадания'.
SoundClick (Выбор звука)	Позволяет вам назначить звук, воспроизводимый при щелчке по кнопке.
SoundMouseIntoArea (Звук при вхождении курсора мыши в зону)	Позволяет вам назначить звук, воспроиводимый, если курсор мыши входит или выходит из зоны кнопки.

Чек-бокс

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

Свойства CheckBox:

Наименование свойства	Описание
Checked (Флажок установлен)	При установке в значение True, чек-бокс имеет флажок по умолчанию.

Поле со списком

ComboBox (Поле со списком) - это кнопка, которая может быть развернута до списка, из которого вы можете выбрать одно значение. Он не имеет специальных свойств и использует набор кнопок.

Поле ввода

Позволяет вам вводить текст в процессе работы. Специальные свойства EditBox (поле ввода):

Наименование свойства	Описание
MaxCharacterCount(Максимальное число знаков)	Определяет максимальное число знаков, которое может принять EditBox.

Список

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

Наименование свойства	Описание
ClipRectangleBorders (Отсечение по границам прямоугольника)	Позволяет вам присоединить текст к границам окна списка. Имеются в распоряжении три опорные точки: родительская, Экранная и текстурная и вы можете определить величины для границы.
SelectedIndex (Выбранный индекс)	Определяет, какое значение выбрано по умолчанию. Первое значение имеет нумерацию 0, пятое - 4 и т.д.

Полоса прокрутки

Имеет ползунок (кнопку), который используется для установки текущего значения элемента управления(которое представляет собой число из определенного диапазона значений). Может использоваться для прокрутки текста, который оказался слишком длинным и не помещается в окно или для регулирвки уровня звука. Специальные свойства ScrollBar:

Наименование свойства	Описание
Value (Значение)	Начальное значение полосы прокрутки. Оно зависит от того, какие значения заданы в поле ValueRange.
ValueRange (Диапазон величин)	Определяет минимальное или максимальное значение, которые может иметь полоса прокрутки.
Vertical (Вертикальная)	Переключает между вертикальным и горизонтальным типом полосы прокрутки. Установите в значение True для вертикального типа и в значение False для горизонтального.

Элемент управления закладками

Осуществляет управление несколькими закладками. Для их переключения обычно используются кнопки. Специальные свойства TabControl:

Наименование свойства	Описание
PageButtonsOffset (Сдвиг для кнопок)	Устанавливает сдвиг для кнопок, размещенных на этом элементе управления. Вы можете выбрать опорную точку из Родительской, Экранной или Teкстурной и установить значение сдвига.
PageButtonsPosition (Положение кнопок)	Устанавливает положение кнопки на элементе управления. Вы можете выбрать опорную точку из родительской, экранной или тeкстурной и установить значение положения.
SelectedIndex (Выбранная закладка)	Устанавливает, какая закладка выбрана по умолчанию. Введите 0 для первой закладки, 1 - для второй и т.д.

Окно ввода текста

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

Наименование свойства	Описание
AutoSize (Автоматический выбор размера)	При установке на True окно ввода текста имеет размер, соответствующий размеру текста, который оно содержит.
Font (Шрифт)	Выбирает шрифт, используемый для данного окна ввода текста. Вы можете выбрать из заранее компилированных шрифтов. См.более подробные инструкции в обзоре редактора шрифтов.
SupportLocalization (Поддержка локализации)	При установке значения True вы можете заменять текст в этом окне ввода текстом, переведенным на другой язык.
TextColor (Цвет текста)	Позволяет вам задать цвет текста внутри окна ввода текста. Вы можете ввести четыре величины из диапазона 0 - 255 (RGBA) или использовать палитру цветов.
TextHorizontalAlign(Выравнивание текста по горизонтали)	Здесь вы можете установить горизонтальное выравнивание текста в окне ввода текста. Выбрать из Left (По левому краю), Center (По центру) or Right (По правому краю).
TextOffset (Сдвиг текста)	Позволяет вам установить положение текста в окне ввода текста. Вы можете использовать Parent, Screen или Texture (родительскую, экранную или текстурную)опорную точку и установить сдвиг.
TextVerticalAlign (Выравнивание текста по вертикали)	Здесь вы можете установить вертикальное выравнивание текста в окне ввода текста. Выбрать из Top (По верхнему краю), Center (По центру) or Bottom (По нижнему краю).

Свиток свойств TextShadow (Тень текста):

Наименование свойства	Описание
Shadow (Тень)	Установить в значение True, если вы хотите иметь текст с тенью.
ShadowColor (Цвет тени)	Здесь вы можете настроить цвет тени. Ввести 4 величины из диапазона 0 - 255 (RGBA) или использовать цветовую палитру.
ShadowOffset (Сдвиг тени)	Позволяет вам позиционировать тень. Имеются три базовых точки: Parent, Screen и Texture(родительская, экранная, текстурная)и вы можете задать сдвиг.

Свиток WordWrap:

Наименование свойства	Описание
VerticalTextIndention (Отступы текста по вертикали)	Определяет промежутки между строками текста. Использовать небольшие величины (например, 0.02), в противном случае, промежутки будут очень большими.
WordWrap (Перенос слов)	При установке в значение False слова не переносятся. Если текст длиннее, чем ширина окна, в которое он вводится, он будет невидимым.

Окно видео

Позволяет воспроизводить видео. Специальные свойства VideoBox:

Наименование свойства	Описание
Filename (Имя файла)	Здесь можно задать видеофайл.
Loop (Непрерывное воспроизведение)	При установке в значение True воспроизведение видеофайла возобновится после окончания.
Pause (Пауза)	При установке в значение True воспроизведение видеофайла переходит в режим паузы.
Volume (Громкость)	Здесь можно управлять громкость звукового сопровождения видеофайла. При 0 звук выключается.

Готовые элементы управления из набора инструментальных средств разработки программ

Существует большое количество готовых элементов управления в папке /Data/Gui/Controls/. Здесь приводятся наиболее важные:

Имя файла	Базовый класс	Описание	Моментальный снимок экрана
DefaultButton.gui	Кнопка	При нажатии кнопки определяются следующие состояния: Default (иногда называемое RollOut), Over (или RollOver), Push (или Press), Active (активное), Disable (неактивное).
DefaultCheckBox.gui	CheckBox (Чек-бокс)	CheckBox работает почти также как и кнопка, но может иметь 2 вида - с проставленным флажком и без флажка. Он переключается из одного состояние в другое после ее нажатия.
DefaultComboBox.gui	ComboBox (Поле со списком)	ComboBox - список, разворачивающийся при щелчке мышью. После этого можно выбрать значение из списка.
DefaultControlBorder.gui	Control (Элемент управления)	Это - граница, в пределах которой содержится ряд элементов управления.
DefaultEditBox.gui	EditBox (Поле ввода)	Место для ввода текста. Содержит одну строку текста и не переносит ее.
WordWrapEditBox.gui	EditBox (Поле ввода)	Этот элемент управления может содержать многострочный текст, строки которого переносятся автоматически.
DefaultHScrollBar.gui	ScrollBar (полоса прокрутки)	Ползунок, позволяющий прокручивать окна. Прокрутка происходит слева направо.
DefaultVScrollBar.gui	ScrollBar (полоса прокрутки)	Ползунок, который позволяет вам прокручивать окна. Прокрутка происходит сверху вниз.
DefaultListBox.gui	ListBox (Окно списка)	Список выбираемых величин, из которого может быть выбрана одна в данный момент времени. В отличии от ComboBox, у ListBox все значения видимые.
DefaultCheckedListBox.gui	CheckBox (Чек-бокс)	Множество чек-боксов, позволяющих осуществлять множественный выбор.
DefaultWindow.gui	Control (Элемент управления)	Окно имеет заголовок и может содержать другие элементы управления.
DefaultWindowBorder.gui	Control (Элемент управления)	Граница, в пределах которой помещается группа окон.

Модели пользовательского интерфейса

Модель пользовательского интерфейса представляет собой, как правило, набор управляющих элементов. Обычно в качестве контейнера для всех других элементов - кнопок, полей ввода и т.д. используется DefaultWindow. Таким образом, последовательность выполняемых действий следующая: во-первых - создать шаблон управляющего элемента с необходимыми вам свойствами, затем - вставить образцы этого управляющего элемента в вашу модель пользовательского интерфейса, просто несколько изменив некоторые настройки элемента управления. Вы можете найти много примеров моделей пользовательского интерфейса в папке /Data/Gui.

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

Для создания новой модели пользовательского интерфейса, щелкнуть правой кнопкой мыши на папке в окне Resources (ресурсы) и выбрать New Resource (Новый ресурс).

Creating new Control.

Из появившегося окна выбрать UI Model (Модель пользовательского интерфейса). В следующем окне дайте ей имя и выберите базовую модель пользовательского интерфейса для вашего элемента управления.

Creating new Control.

Каждая модель пользовательского интерфейса наследует его свойства от любого элемента базового класса или от другой модели графического интерфейса (.gui файл). Вы можете выбрать один из основных шаблонов, но рекомендуется использовать уже существующий .gui-файл и лишь изменить его свойства. Вы сэкономите много времени. Щелкните Next для создания ресурса. Вы увидите, что он появился в окне Resources (Ресурсы). Чтобы его отредактировать, дважды щелкните по нему или щелкните по нему правой кнопкой мыши и выберите "Edit" (Редактирование). В окне Control Hierarchy (Иерархия элементов управления) в верхнем правом углу экрана Вы увидите структуру элемента управления - все элементы управления и их иерархию. Выберите элемент, щелкнув по небольшому чек-боксу, и Вы увидите его свойства.

Control окно Hierarchy.

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

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

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

Свойства Position и Size (Положение и размер)

Все элементы управления имеют раздел свойств Layout (Размещение), в котором вы найдете, кроме прочего, свойства Position и Size (Положение и размер). Необходимо упомянуть различные возможные установки для этого свойства и отдельно пояснить опорные типы - Screen, Parent и Texture (экранное, родительское и текстурное). Примечание: Необходимо учитывать вертикальное и горизонтальное выравнивание, так как они также влияют на положение.

Родительский объект

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

В этом элементе A является родительским объектом относительно элемента B, а элемент B - родительским относительно элемента C (хотя элемент A не является напрямую родительским относительно элемента C). Мы также можем сказать, что элемент B является дочерним по отношению к элементу A, а элемент C является дочерним по отношению к элементу B. Аналогично, элемент C не является напрямую дочерним по отношению к элементу A.

Теперь, если вы захотите установить размер или положение для элемента B, который связан с A, вам просто нужно установить Type (тип) на Parent (родительский) и задать значения X и Y. Например, у вас есть кнопка, но вы хотели бы иметь текст командной кнопки всегда ниже кнопки. Вы должны изменить Position (Положение) окна ввода текста кнопки и установить тип на Parent (Родительский) и ввести значение для Y больше, чем 0. Это значение задается не в пикселах, а является множителем размера родительского объекта. Таким образом, если вы хотите, чтобы окно ввода текста было ниже половины размера родительского объекта, вы должны ввести Y = 0.5.

Если вы установите родительскую опорную точку для корневого объекта (у которого нет родителя в текущей структуре), то на это сошлется объект, на который она помещена. Например - если вы создаете Button (Кнопку) с типом положения Parent (Родительcкий объект) и затем используете его в модели пользовательского интерфейса и помещаете его в каком-либо окне, положение кнопки будет определяться этим окном. В случае, если у кнопки нет другого объекта как родителя, ее родительским объектом будет "Screen"(Экран).

Экран

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

Текстура

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

Примечание: Текущий отображенный размер зависит от наличия свободного места в рабочем окне, таким образом, он не будет точно равняться 100 %. Все элементы имет свой соответствующий масштаб.

Урок - Окно меню

В этом разделе вы можете прочесть пошаговые инструкции о создании модели пользовательского интерфейса аналогично MainMenuWindow (Окно главного меню), которое можно найти в /Data/Gui/MainMenuWindow.gui

Текстуры

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

Для фона кнопки:

Для фона окна меню:

Для фона заголовка меню:

Для границы окна:

Поместите эти текстуры в папку /Data/Gui/Textures.

Граница окна

Во-первых, создадим нашу собственную границу для окон на основе существующего файла DefaultWindowBorder.gui, чтобы сэкономить некоторое время. Щелкнем правой кнопкой мыши по файлу DefaultWindowBorder.gui и выберем Copy (Копировать). Еще раз щелкнем правой кнопкой мыши и выберем Paste(Вставить). Появится файл по имени DefaultWindowBorder2.gui. Изменим это имя на, например, myWindowBorder.gui щелчком по правой кнопке мыши и выбрав, Rename (Переименовать). Дважды щелкнуть по этому ресурсу, чтобы запустить редактирование. В окне Control Hierarchy (Иерархия элементов управления) вы увидите, что граница состоит из 8 средств управления - по одному для каждого угла и стороны. Каждый элемент управления использует ту же самую текстуру (MenuWindowBorder.png по умолчанию), но с различным смещением. Теперь мы изменим эту текстуру на наше собственную (ui19.png). Поставим флажок на небольшом чек-бокс в окне Control Hierarchy. Теперь вы можете видеть его свойства. Найдите BackTexture (Текстура фона) в свитке "Background" (Фон) и нажмите значок Browse (Просмотр). В окне Choose Resource выберем вашу новую текстуру.

Повторим это для всех других 7 элементов управления. В данный момент нет необходимости изменять параметр BackTextureCoord, потому что наша новая текстура - также квадрат, и все координаты предыдущей текстуры будут соответствовать новой. Однако, вам может потребоваться переместить и немного изменить размеры каждого из тех восьми элементов управления так, чтобы наша граница, и ее тень были видны лучше. Чтобы масштабировать или переместить одиночный компонент, выберите его, пометив его в окне Control Hierarchy и как только вы начнете перемещать курсор мыши по выбранному компоненту в рабочем окне, ваш курсор изменится. Курсор с четырьмя стрелками указывает перемещение, курсор с двумя стрелками указывает на изменение размеров по вертикали или горизонтали. Помните, что сетка, даже если она не видима, зафиксирует на себе ваши компоненты. Измените разрешающую способность сетки в опциях в случае необходимости. В качестве альтернативы вы можете использовать свойства Layout (размещение)- Position и Size (Положение и Размер). Наша myWindowBorder должна выглядеть так:

myWindowBorder

Окно

Теперь, когда у нас есть граница окна, мы создадим наше собственное окно, у которого будет структура, аналогичная DefaultWindow.gui. Скопируем и вставим его аналогично тому, как мы делали с DefaultWindowBorder.gui. Назовите свое окно "myWindow" и дважды щелкните на этом ресурсе, чтобы запустить редактирование. Давайте взглянем на иерархию элементов управления. Это специальное окно использует компонент управления для фона окна с DefaultWindowBorder для его границы, а также компонент управления для фона заголовка окна и другой компонент DefaultWindowBorder для границы заголовка. Давайте выберем и удалим оба DefaultWindowBorders - здесь мы хотим использовать наши собственные myBorder-компоненты. Чтобы добавить компонент myWindowBorder, выберите myWindow.gui в иерархии элементов управления, щелкните правой кнопкой мыши по нему и выберите Create New Control (Создать новый элемент управления).

Adding myWindowBorder

Из окна New Control (Новый элемент управления) выбрать myWindowBorder.gui и щелкнуть OK

Adding myWindowBorder

Компонент появится в списке. В свойстве Anchor(Привязка) установить Left, Bottom, Top, Right (Слева, внизу, вверху, справа), таким образом граница будет изменяет размеры вместе с окном. Теперь выберите Control (Элемент управления), который создает фон заголовка окна и также добавьте к нему myWindowBorder. В свойстве Anchor, установите Слева, Справа. Вы вероятно должны будете изменить его размер таким образом, чтобы он соответствовал элементу управления. Также может перепутаться иерархия и некоторые элементы могут быть скрыты под другими средствами управления. Чтобы упорядочить компоненты, выберите их один за другим и либо переместите их назад или перенесите их к передней стороне (Вы найдете эти команды после правого щелчка по мыши, наведя курсор на выбранный компонент). Пока ваше окно myWindow и его иерархия должны выглядеть следующим образом:

myWindow

Теперь мы должны добавить TextBox (Окно для ввода текста), потому что предыдущее было удалено с заданной по умолчанию границей. Выберите границу заголовка окна, щелкните правой кнопкой мыши и создайте новый ресурс. На сей раз, выберите TextBox из папки основных шаблонов. Это добавит TextBox, который будет перемещаться вместе с границей. Вы можете добавить текст в TextBox, редактируя параметр Text в свитке General в окне Properties (Свойства), но лучше установить параметры CopyTextFromParent на True (вы также должны сделать это для myWindowBorder, который содержит TextBox, таким образом текст скопируется из с корневого элемента управления). Мы также хотим изменить фон для нашего окна и для его поля заголовка. Выберите соответствующий элемент управления и измените заданные по умолчанию текстуры на новые - это сделано тем же самым способом, поскольку Вы изменили текстуры для текстур myWindowBorder элементов управления. После этих изменений ваше законченное окно должно выглядеть так:

myWindow

Кнопка

Теперь давайте сделаем кнопку на базе DefaultButton.gui. Скопируйте и вставьте файл и переименуйте его в myButton.gui. Дважды щелкните на нем, чтобы перейти в Edit Mode (Режим Редактирования). В основной кнопке каждое состояние имеет различную текстуру. На сей раз мы будем использовать только одну текстуру для всех состояний и только изменим текст для каждого состояния, таким образом игрок получает некоторую обратную связь о выделенном или нажатом состоянии кнопки. Во-первых, удалите из каждого окна для ввода текста существующую BackTexture (Текстуру фона). Затем, выберите весь myButton.gui в Control Ierarchy (Иерархии элементов контроля) и назначьте ей новый файл BackTexture (Текстуры фона). Вот как кнопка выглядит теперь:

myButton

Затем, мы должны выбрать цвет текста, который будет отображен в каждом состоянии кнопки. Выберите TextBox (Окно для ввода текста) в иерархии элементов контроля и найдите свойство TextColor (Цвет текста) в окне Properties (Свойства). Выберите нужный цвет либо вводя значение RGBA или используя цветовую палитру.

Setting

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

Соединение всего этого

Оба компонента теперь готовы и мы можем перейти к созданию меню. Щелкните правой кнопкой мыши по окну Resources (Ресурсы) и создайте New Resource - UI Model(Новый ресурс - модель пользовательского интерфейса). Назовите его myMenu и назначьте myWindow как основную модель пользовательского интерфейса. Откройте в Edit Mode (Режиме редактирования). Выберите корневой элемент ("Gui\myMenu.gui") и найдите параметр Text в свитке General (Общие параметры) в окне Properties (Свойства). Введите здесь имя для своего окна - оно появится в заголовке. Измените размеры окна и сделайте его больше, таким образом оно может иметь другие элементы управления.

myMenu

Давайте добавим две кнопки - выберем окно, щелкнем правой кнопкой мыши и выберем Create New Control (Создать новый элемент управления). Из окна New Control (новый элемент управления)выберем myButton и щелкнем OK. Теперь вы можете где-нибудь разместить кнопку и изменить текст, отображенный на ней, редактируя параметр Text в окне Properties. Вы можете сделать "клон" этой кнопки, выбирая ее и удерживая клавишу Shift клавиатуры и перемещая курсор мыши. Клонированная кнопка будет выглядеть аналогично оригиналу, но Вы можете изменить ее свойства, что повлияет только на нее (не затронув оригинал). Напишите Exit (Выход) на одной из кнопок и Start на другой. Вы можете добавить TextBox (Окно для ввода текста) к своему меню и написать там некоторые команды или какой-либо элемент управления и использовать какую-либо графику как текстуру. Когда все будет готово, Вы можете проверить свою модель нажатием кнопки "Test" в нижней части окна Properties.

myMenu

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

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

Добавление кнопок

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

Adding кнопка для TabControl

Найдите элемент управления "Кнопка", который вы хотите использовать, и в окне Parent Control Slot (Сегмент родительского элемента управления) щелчком правой кнопки мыши выберите PageButton(Кнопка страницы). Это определяет стиль кнопки, которая будет использоваться для навигации между закладками. Каждый раз, когда вы добавляете новую страницу, кнопка для нее будет создана автоматически. Вы можете корректировать положение и смещение этих кнопок, вводя значения в свойства PageButtonOffset (сдвиг кнопки страницы) и PageButtonPosition (Положение кнопки страницы, см. таблицу свойств элемента управления закладками).

Добавление страниц

Чтобы добавить страницу к TabControl, снова выберите TabControl, и щелкните по Create New Control. Выберите .gui файл, который вы хотите добавить (или базовый класс) и на сей раз, в сегменте родительского элемента управления выберите Page0 (или любую другую страницу). Отметьте кнопку, которая появилась у имени страницы.

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

Tab

И вот как должно выглядеть окно Control Hierarchy:

Tab

Вы можете видеть, что TabControl является дочерним элементом окна. PageButton имеет файл myButton.gui для его использования в качестве шаблона, и затем здесь есть две страницы - "About us" и "Message". Для каждой из этих страниц есть образец созданной myButton, который позволяет переключаться между закладками. Все другие страницы (3 - 19) пусты (Нуль), потому что для них не были заданы элементы управления.

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