В этой статье я попробую научить тебя созданию своих собственных GUI-экранов.

GUI-экраны используются в doom3 и играх на его движке. Изображения на мониторах, индикация патронов на оружии, игровое меню - всё это реализовано с помощью gui-скриптов.

Для начала зайди WinRAR'ом в файл pak000.pk4, что лежит в папке base. Распакуй в эту папку файлы из каталога guis\assets. Это нужно для того, чтобы можно было загружать картинки в специальный редактор, в котором мы будем работать. Теперь запусти и сам редактор. Создай в папке с игрой текстовый документ с примерно следующим содержанием:

e:\games\ID\doom3\Doom3.exe +set r_fullscreen 0 +editGUIs

   Путь к файлу, конечно же свой. Присвой этому файлу расширение *.bat и запусти. Через некоторый отрезок времени появляется окошко редактора. Создай новый файл (File=>New). Кликни правой кнопкой по пустому месту и выбери в выпавшем меню New=>WindowDef.

Появится прямоугольник с рамкой. Растягивай его как душе угодно и ставь в любое место.

Кликай по нему и выбирай Properties, либо тыкни в Alt+Enter. Выскачит окошко свойств, в нём можно выбрать фоновый цвет для выбранного объекта, текст, который будет в нём написан, и массу других параметров. Выбери цвет фона. Если хочется в качестве фона картинку кликни по чекбоксу Material во вкладке Image и задай путь к картинке (к примеру guis/assets/splash/pdtempa.tga). Также присвой этому объекту имя, например main.

Теперь создай кнопку. Создай такой же прямоугольник, но с другим именем, затем выдели его и нажми Ctrl+Enter. Появится окно с заголовком "scripts". Это окошко, в котором мы будем писать скрипт для нашей кнопки. Синтатикс примерно такой:

	действие {
		событие параметры_события;
	}

Пишем простенький скрипт. Примерно так:

	onTime 0 {
		transition "backcolor" "0.5 0.7 1 0.3" "1 0.2 0.2 0.3" "500";
	}

	onTime 500 {
		transition "backcolor" "1 0.2 0.2 0.3" "0.5 0.7 1 0.3" "500";
	}

	onTime 1000 {
		resetTime "0" ;
	}

Жмём Ctrl+T. Вылезает маленькое окно, в котором наша кнопка переливается красно-синим цветом:

Теперь пояснения. OnTime x означает, что событие произойдёт через x миллисекунд (это и есть действие). Backcolor - фоновый цвет кнопки, цифры стоящие далее - яркость цвета, содержание в нём красного, зелёного и синего оттенков соответственно. Transition значит, что цвета будут плавно переливаться. А число 500 значит, что полная смена цветов произойдет через 500 милисекунд. Если вместо transition выставить set, то смена цветов будет не плавной, а мгновенной. ResetTime "0" означает, что это действие вернет всем параметрам кнопки те значения, которые они имели в 0 милисекунд. Двигамеся дальше. Сделаем так, чтобы кнопка меняла цвет при наведении курсора. Сотри предыдущий код и вставь это:

onMouseEnter
{
	transition "backcolor" "0 0 0 0" "0.5 0.5 0.5 0.5" "150";
//делает кнопку светло-серой
}

onMouseExit
{
	transition "backcolor" "0.5 0.5 0.5 0.5" "0 0 0 0" "150";
//делает кнопу чёрной
}

onMouseEnter - это действие происходит при наведении мыши на кнопку, onMouseExit - происходит когда курсор отводят от кнопки

Маленькое примечание - изначально у моей кнопки цвет фона был чёрный, если поставить другой, (к примеру красный), то при наведении она всё равно окрасится в светло-серый цвет, а при отведении указателя станет чёрной (всё, красного цвета уже не будет).

Так, кнопку мы раскрасили, теперь пиши действие, которое будет выполняться при её нажатии:

onAction
{
	set "text" "1234567";
}

Теперь после нажатия на кнопку на ней появляется надпись "1234567". OnAction - действие, происходящее при нажатии на объект.

Теперь сделаем так, чтобы первый объект (который Main) появлялся только после нажатия на кнопку. Убери весь код и вставь следующее следующее:

onAction
{
	set "main::visible" "1";
}

Main - имя которое мы присвоили первому объекту, Visible - параметр отвечающий за видимость объекта (1 - виден, 0 - невидим) То есть если надо обратиться через один объект к другому, надо писать так:

действие
{
	команда "имя_объекта::параметр" "значение_параметра"
}

Продолжаем. Попробуем нечто посложнее. Снова сноси предыдущий скрипт и вставь это:

onAction
{
	if ("main::visible" == 0) {
		set "main::visible" "1";
	} if ("main::visible" == 1) {	
		set "main::visible" "0";
	}
}

Тестируем. Жмем на кнопку, появляется картинка. А при повторном нажатии она изчезает.

Пояснение:

действие
{
	if ("имя_объекта::параметр" == значение) {
		команда "имя_объекта::параметр" "значение";
	} if ("имя_объекта::параметр" == значение) {	
		команда "имя_объекта::параметр" "значение";
	}
}

Т.е. "if" означает что действия описаные после него будут выполняться только при определенных условиях. Теперь привожу небольшой список событий, действий и параметров (с описанием, ессно):

События:
  onAction		клик по объекту
  onMouseEnter		наведение мыши на объект
  onMouseExit		отвод мыши от объекта
  onEsc			при нажатии Escape (только для главного меню)
  onEvent [объект]		если с заданым объектом происходит любое событие

 Действия:
  set [параметр] [value]			смена определённого параметра
  transition [параметр] [value1] [value2] 	плавная смена параметра
  resetTime [x]	  				вернуть всё к тому как все было в x милисек.
  cmd [консольная_команда]			выполнить команду из консоли

 Параметры
  visible  		видимость (видим/невидим)
  matcolor		фоновый цвет объекта
  background		фоновое изображение
  text			текст, написанный внутри объекта

Ну, на сегодня, думаю хватит. Если что непонятно - пиши мне на мыло или в гесту.

Пример (описаный gui и карта с ним) можно слить здесь.