Окна - это базовые элементы графического интерфейса. Окно представляет собой прямоугольную область на экране, которая может содержать один и более других элементов управления (кнопок и т. д.), включая вложенные окна. Вы можете менять его внешний вид в соответствии с требованиями Вашей игры.
Окно задаётся путём написания простого текстового файла с расширением .window. Давайте рассмотрим пример такого файла. Сперва идёт заголовок файла, за которым следуют главные свойства окна. Существует большое количество свойств, все из которых Вам не обязательно задавать, большинство использует вполне приемлемые значения по умолчанию. В основном, Вам будет нужно изменить только уже заданные свойства, остальные можно проигнорировать.
WINDOW { NAME = "MyWindow" TEMPLATE = "templates\MyTemplate.window" ; позиция и размер X = 200 Y = 200 WIDTH = 240 HEIGHT = 150 ; состояние окна VISIBLE = TRUE DISABLED = FALSE ; заголовок TITLE = "My brand new window" TITLE_RECT { 5,5,235,45 } TITLE_ALIGN = left DRAG_RECT { 0,0,215,25 } ; фон BACK = "path\window.image" BACK_INACTIVE = "path\winow_inactive.image" IMAGE = "path\window.sprite" IMAGE_INACTIVE = "path\window_inactive.sprite" ; шрифты FONT = "fonts\outline_white.font" FONT_INACTIVE = "fonts\outline_gray.font" ; курсор CURSOR = "path\arrow.sprite" ; сценарий (скрипт) SCRIPT = "path\MyWindow.script" ; дополнительные свойства TRANSPARENT = FALSE MENU = FALSE IN_GAME = FALSE CLIP_CONTENTS = TRUE ; фоновый цвет FADE_COLOR { 255, 0, 0 } FADE_ALPHA = 255 PAUSE_MUSIC = TRUE }
Описание:
После объявления свойств окна идут свойства элементов управления, которые будут размещены в нём. В следующем примере мы разместим в нашем окне кнопку. Описания свойств элементов управления будут рассмотрены далее. Помните, что окно может также содержать другое окно.
BUTTON { NAME = "MyButton" TEXT = "Button" X = 40 Y = 100 WIDTH = 70 HEIGHT = 30 }
В качестве примера готовых окно посмотрите проект WME demo. Несколько файлов окон лежат в папке interface\system. Вам не придётся писать такие файлы с нуля, в программе ProjectMan доступны готовые шаблоны (подробнее).
См. также: Программирование окон. Справочная информация
Кнопки могут иметь самое различное представление. Они могут быть изображениями или простыми прямоугольниками с текстовыми метками, или же комбинацией этих двух вариантов.
Определение кнопки всегда является частью файла окна (.window). Давайте рассмотрим пример кнопки.
BUTTON { NAME = "MyButton" TEMPLATE = "templates\MyTemplate.button" ; позиция и размер (относительно позиции окна) X = 100 Y = 100 WIDTH = 200 HEIGHT = 50 ; состояние кнопки VISIBLE = TRUE DISABLED = FALSE PRESSED = FALSE FOCUSABLE = FALSE ; текст TEXT = "My brand new button" TEXT_ALIGN = "center" ; фон BACK = "path\button.image" BACK_DISABLE = "path\button_disable.image" BACK_FOCUS = "path\button_focus.image" BACK_HOVER = "path\button_hover.image" BACK_PRESS = "path\button_press.image" IMAGE = "path\button.sprite" IMAGE_DISABLE = "path\button_disable.sprite" IMAGE_FOCUS = "path\button_focus.sprite" IMAGE_HOVER = "path\button_hover.sprite" IMAGE_PRESS = "path\button_press.sprite" CENTER_IMAGE = TRUE ; шрифты FONT = "fonts\outline_white.font" FONT_DISABLE = "fonts\outline_gray.font" FONT_FOCUS = "fonts\outline_white.font" FONT_HOVER = "fonts\outline_red.font" FONT_PRESS = "fonts\outline_red.font" ; сценарий SCRIPT = "path\MyButton.script" ; курсор CURSOR = "path\arrow.sprite" ; дополнительные свойства PARENT_NOTIFY = TRUE PIXEL_PERFECT = TRUE }
Описание:
Для примера см. проект WME demo. Готовые окна с кнопками лежат в папке interface\system. Также ProjectMan располагает набором шаблонов кнопок (подробнее).
См. также: Программирование кнопок. Справочная информация
В поле ввода пользователь может скопировать/вставить кусок текста или просто ввести его с клавиатуры. Эти поля также могут иметь любой внешний вид, какой потребуется для Вашего проекта.
Определение полей ввода всегда является частью файла окна. Ниже приведён пример.
EDIT { NAME = "MyEditor" TEMPLATE = "templates\MyTemplate.editor" ; позиция и размер (относительно позиции окна) X = 100 Y = 100 WIDTH = 200 HEIGHT = 50 ; состояние VISIBLE = TRUE DISABLED = FALSE ; текст TEXT = "My brand new editor" ; фон BACK = "path\editor.image" IMAGE = "path\editor.sprite" ; шрифты FONT = "fonts\outline_white.font" FONT_SELECTED = "fonts\outline_red.font" ; сценарий SCRIPT = "path\MyEditor.script" ; курсор CURSOR = "path\beam.sprite" ; дополнительные свойства PARENT_NOTIFY = TRUE MAX_LENGTH = 100 FRAME_WIDTH = 2 CURSOR_BLINK_RATE = 0 }
Описание:
Для примера см. проект WME demo.
См. также: Программирование полей ввода. Справочная информация
Статичные элементы представляют собой различные неинтерактивные компоненты окна, служащие для декорации. Такие как текстовые метки и пиктограммы.
Определение этих элементов также всегда является частью файла окна.
STATIC { NAME = "MyStatic" TEMPLATE = "templates\MyTemplate.static" ; позиция и размер (относительно позиции окна) X = 100 Y = 100 WIDTH = 200 HEIGHT = 50 ; состояние VISIBLE = TRUE DISABLED = FALSE ; текст TEXT = "A static control" TEXT_ALIGN = left ; фон BACK = "path\static.image" IMAGE = "path\static.sprite" ; шрифты FONT = "fonts\outline_white.font" ; сценарий SCRIPT = "path\MyStatic.script" ; курсор CURSOR = "path\arrow.sprite" }
Описание:
Для примера см. проект WME demo.
См. также: Программирование статичных элементов. Справочная информация
Контейнер объектов - это специальный элемент управления, который позволяет Вам встроить продвинутый интерактивный объект в пользовательский интерфейс. Как вариант применения таких объектов - окно инвентаря в игре Runaway (с говорящим анимированным персонажем) или возможность близкого рассмотрения предметов (подробнее про объекты (entities)).
Определение контейнеров объектов всегда является частью файла окна.
ENTITY_CONTAINER { NAME = "MyEntity" TEMPLATE = "templates\MyTemplate.txt" ; позиция и размер (относительно позиции окна) X = 100 Y = 100 ; состояние VISIBLE = TRUE DISABLED = FALSE ENTITY = "path\MyEntity.entity" }
Описание:
Как Вы можете видеть, контейнер служит «мостом» между окном и объектом (entity).
См. также: Программирование контейнеров объектов. Справочная информация
Вы можете задать изображение (спрайт) в качестве фона окна или элемента управления, но оно всегда имеет фиксированный размер. Иногда бывает полезно задать специальное изображение, которое при необходимости будет «растягиваться». Для этого можно использовать тот же самый фон, но с переменным размером. Такие изображения называются мозаичными.
Мозаичное изображение состоит из картинки и файла определения. Этот файл разбивает картинку на кусочки (tiles). Когда требуется изменить размер изображения, движок повторяет эти кусочки до тех пор, пока не будет достигнут необходимый размер.
В следующем примере изображение разбивается на девять кусочков размером 30x30 пикселей.
TILED_IMAGE { IMAGE="ui_elements\win.bmp" VERTICAL_TILES {30, 30, 30} HORIZONTAL_TILES {30, 30, 30} }
Результат: