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

 


Окна

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

Окно задаётся путём написания простого текстового файла с расширением .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.

 

См. также: Программирование статичных элементов. Справочная информация


Контейнеры объектов (entities)

Контейнер объектов - это специальный элемент управления, который позволяет Вам встроить продвинутый интерактивный объект в пользовательский интерфейс. Как вариант применения таких объектов - окно инвентаря в игре 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}
}

Результат: