Редактирование VGUI

From Valve Developer Community
Jump to: navigation, search
English
Note:Приведенная ниже информация извлечена из внутреннего документа Valve о том, как редактировать, поэтому в некоторых случаях она может быть неправильной или ссылочными инструментами, которых не существуют.


Чтобы создать скин для Steam (обновление UI после 2010 г.), вам нужно найти файл resource/styles/steam.styles и скопировать его в skins/<тут имя вашего скина>/resource/styles/steam.styles. Наличие этого файла заставит Steam поместить скин в качестве опции в диалоге Настройки -> Интерфейс (для его активации потребуется перезапустить Steam). Оттуда вы можете начать редактирование. Вы можете поместить новые файлы или существующие файлы Steam, которые вы хотите заменить, в папку скинов. Удачи!

Инструменты

Запустите Steam с параметром командной строки -dev (это замедлит работу программы, используйте только при необходимости) и нажмите клавишу "F6", чтобы открыть диалоговое окно редактирования VGUI. Вы не сможете взаимодействовать с другими окнами когда это включено; вместо этого при выборе элемента управления в любом активном диалоговом окне, вы получите подробную информацию о нём.

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

Layout
Текущий скрипт макета, который применяется к элементу управления. В этом списке перечислены скрипты, которые применяются ко всем элементам управления в текущем диалоговом окне или подпанели. Вы можете редактировать скрипт макета с помощью ссылки в правом верхнем углу диалогового окна.
Details
Имеет информацию о текущем выбранном элементе управления. В разделе 'Styles' он содержит список ключей стилей, которые этот элемент управления ищет в файлах стилей. Под 'Parents' находится список имен родительского элемента управления, под которым находится этот дочерний элемент, который также используется для определения того, какие стили следует применять.
Styles
Показывает все текущие стили, которые объединены вместе, чтобы сформировать окончательный стиль, который применяется к элементу управления, и из какого файла стиль был загружен. Временным элементом в списке является - примененная объединенная версия.
Localization
Это быстрый набор ссылок на весь локализованный текст. На него не влияет текущий выбранный элемент управления.
Errors
Эта вкладка отображается только в том случае, если при анализе текущего файла макета или стилей произошла ошибка. Он покажет детали того, что вы сделали неправильно с файлом.

При нажатии на любую ссылку, откроется файл в редакторе. Если файл открывается, необходимо связать его с редактором, щелкнув правой кнопкой мыши на файле в проводнике (щелкните правой кнопкой мыши -> Свойства -> Открыть с помощью -> Изменить).

Стили

То, как рисуют элементы управления VGUI (также называемые элементами или панелями), описывается стилями. Это работает в аналогичной, но более ограниченной версии веб-таблиц каскадных стилей (CSS), где вы можете переопределить то, как выглядит элемент управления, исходя из текущего состояния, в котором он находится, или того, частью какого родительского элемента управления он является. На вкладке 'Styles' в инструменте редактирования VGUI отображаются все стили, применяемые к элементу управления. Стили могут быть установлены в файлах .styles (например, Steam.styles) или непосредственно в файле .layout для диалога.

Следующие ключи могут быть установлены в стиле:

textcolor
Цвет, используемый для рисования любых текстовых элементов, в RGBA (например "255 0 0 255" для красного), или название заранее заданного цвета (цвета могут быть определены в верхней части файла стилей под заголовком ключа "colors").
bgcolor
Цвет заливки фона. Может быть установлено в 'none', чтобы ничего не рисовать. Если установлено значение 'render_bg', этот ключ игнорируется.
shadowtextcolor
Дополнительный цвет для рисования фона текста - обычно используется для уменьшения эффекта при отключенной кнопке. Также перегружен для установки цвета курсора в элементах управления TextEntry.
selectedtextcolor
Цвет для рисования выделенного текста в элементе управления TextEntry (текстовое поле).
selectedbgcolor
Цвет для рисования фона выделенного текста в элементе управления TextEntry.
render
Набор команд рендеринга для рисования пользовательских изображений/градиентов/цветов на элементе управления. Рисуется после того, как элемент управления нарисовал какие-либо подэлементы. Более подробная информация ниже.
render_bg
Точно так же, как 'render', но рисуется в фоновом режиме до того, как прорисовываются любые подэлементы.
padding
padding-left
padding-right
padding-top
padding-bottom
Расширяет размер элемента управления на основе Label или Button на указанные размеры. Это не относится ко всем элементам управления прямо сейчас, пусть dev знает, если он не контролирует то, что вам нужно.
inset
Требует 4 цифры, например "0 0 0 0". Определяет, как подэлементы управления должны быть расположены внутри элемента управления, и какая именно область "bgcolor" должна отрисовываться. Число слева, сверху, справа, снизу
image
Устанавливает изображение для рисования вместо любого текста. Работает с базовыми элементами управления "Label" или "Button". Если установлено, заменяет любой текст на кнопке.
font-family
Название шрифта ("Tahoma", "Verdana" и др.). Можно указать только одно имя шрифта. Если шрифт отсутствует в системе пользователя, он всегда будет возвращаться к "Tahoma".
font-weight
Цифры от 0 до 1000 указывают на то, как жирным рисуется шрифт. 0 - тоньше обычного, 400 - стандартный, 700 - жирный, 1000 - очень жирный. Точные шаги могут отличаться в зависимости от шрифта.
font-size
Высота шрифта в пикселях (px).
font-style
Список флагов, применяемых к шрифту. Это список флагов, разделенных точкой с запятой. Возможные флаги: "italic", "underline", "strikeout", "symbol", "antialias", "dropshadow", "outline", "rotary", "additive", "uppercase", "lowercase" (некоторые из них применяется только в игровом оверлее)
corner_rounding
Количество пикселей, на которое должны быть скруглены углы. Этот параметр передается в ОС и применяется только к диалоговым окнам (Frame) или элементам управления Menu.

Порядок, в котором стили перечислены в файле, соответствует порядку, в котором они применяются к элементу управления. Чтобы контролировать как To do.

Псевдоклассы

Следующие флаги стилей (в CSS называемые "псевдоклассами") могут быть использованы для изменения внешнего вида элемента управления в зависимости от его состояния. Указывается двоеточием (':') после имени элемента управления, например "Button:active { textcolor=white }".

hover
Применяется, когда курсор мыши находится над элементом управления
active
Левая кнопка мыши нажата на элементе управления
focus
Элемент управления имеет фокус клавиатуры, перемещаемый клавишей TAB
selected
Для элемента управления включена его основная опция, установлен флажок или выбран переключатель
disabled
Элемент управления отключен кодом и не может взаимодействовать с
scrollbar
Элементы управления имеют дополнительную полосу прокрутки, и в настоящее время она видна
framefocus
Используется только для элементов управления Frame и FrameButton, устанавливается, если диалоговое окно в данный момент имеет фокус

При необходимости вы можете указать несколько флагов стилей, чтобы получить очень специфическое поведение, например:

CheckButton:selected:disabled
{
	textcolor=black
}

Так цвет текста кнопки CheckButton будет черным, если флажок установлен, но элемент управления отключен.

Bug: Описания горячих клавиш внутриигрового оверлея будут использовать цвет Text2 в файле стилей, а не в файле макета, независимо от того, что, даже если вы измените его на другой определенный цвет

Цвета

Раздел цветов файла .styles можно использовать для присвоения имен произвольным данным. Это не ограничивается данными о цвете, несмотря на своё название.

Вот некоторые примеры использования:

colors
{
	black="0 0 0 255"
	almostBlack="23 22 20 255"
	white="255 255 255 255"
	grey="158 153 149 255"
	none="0 0 0 0"

	mycontrolcolor=almostBlack

	basefont="Segoe UI" // НЕ используйте '<font> bold'! Вместо этого используйте font-weight.
	seriffont="Cambria"

	// Некоторые значения считываются Steam автоматически
	Notifications.PanelPosition	"BottomRight"
	Notifications.SlideDirection	"Vertical"
}

Любое из этих имен может быть использовано как значение свойства где-либо.

To do: Разница между синтаксисом X=Y и X Y?

Файлы-макеты

Новый файл-макет имеет расширение ".layout" и находится в каталоге "resource/layout/" в клиенте Steam. По-прежнему существует большой набор старых файлов-макетов VGUI с расширением .res, которые имеют более подробный вид; но они все еще могут сосуществовать вместе. Команды макета находятся под ключом "layout" в файле и представляют собой набор команд для позиционирования элементов управления. Любой элемент управления, на который ссылается команда макета, будет игнорировать любую исходную информацию о размерах или размещении и будет полностью переопределен командой макета. Команды:

Place
Расположение элементов управления по вертикали или горизонтали
Region
Описывает регион, в котором нужно сделать макет, на который могут ссылаться команды Place
Команды Place и Region имеют много параметров, большинство из которых являются командами между ними. Все параметры являются необязательными.
controls
Список элементов управления, которые должны быть выложены (только команда Place). Имена элементов управления здесь - это их имена экземпляров, определенные в файле layout/.res, а не имена классов, используемых в стилях.
region
В команде place это область, в которой должны быть выложены элементы управления. В команде region это родительская область области, которую вы объявляете, область будет расположена относительно ее родителя.
name
Имя создаваемого региона, поэтому на него можно ссылаться из команд Place (только команда Region)
start
Название контрольного пункта или региона, откуда мы должны начать планировать
dir
Направление, в котором мы должны изложить команды, "down". или "right". "right" по умолчанию.
align
Где мы должны выровнять набор элементов управления по осям "right", "bottom" или "top-center". По умолчанию выравнивание выполняется по top-left.
margin
сколько места мы должны оставить между нашими элементами управления и где мы выравниваем.
margin-left, margin-right, margin-top, margin-bottom
специфичные переопределения для margin в разных направлениях
spacing
сколько разрыва между элементами управления мы выкладываем
overflow
Что делать, если содержимое не подходит для региона, это только для регионов. По умолчанию происходит обрезка области и попытка немного изменить её размер. Можно установить следующие параметры: 'allow-horizontal', 'allow-vertical', 'allow-both', 'scroll-horizontal', 'scroll-vertical', или 'scroll-both'. Разрешенные варианты предотвратят изменение или перемещение содержимого области и переполнят его. Варианты прокрутки также допускают переполнение, но, кроме того, автоматически размещают полосы прокрутки по краям области, которые позволяют прокручивать содержимое. Разрешающие варианты полезны для использования в дочерних регионах родительского региона, для которых установлен вариант прокрутки. Затем родитель будет прокручивать все дочерние регионы. (Команда только для региона)
x, y
абсолютная позиция, с начала
width
устанавливает фиксированную ширину, в пикселях (px), элементы управления будут такими же. Может быть установлено на "max", т.е. полная ширина контейнера за вычетом margin.
height
устанавливает фиксированную высоту, в пикселях (px), элементы управления будут такими же. Может быть установлено на "max", т.е. полная ширина контейнера за вычетом margin.

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

layout
	{
		region	 { name="bottom_row" width="max" align=bottom height=30 }	// определяет область высотой 30 пикселей вдоль нижней части области, которую мы размечаем
		place	 { controls="OKButton, CancelButton" region="bottom_row" margin=6 margin-right=12 }	// помещает кнопки 'ОК' и 'Отмена' в эту нижнюю область
	}

Команды рендеринга

Ключи "render" и "render_bg" в стилях задают список инструкций для рисования изображений или прямоугольников. Они сделаны по порядку. Все команды принимают по крайней мере 4 параметра, координаты в текущем элементе управления, чтобы рисовать. x0, x1, y0, y1 описывают левую, правую, верхнюю и нижнюю координаты в пикселях (px), и затем вы можете добавлять или вычитать числа из них. Существует несколько различных команд, которые можно выполнить:

fill
Заливает область одним цветом. Принимает дополнительный параметр цвета, который необходимо определить ранее в разделе "Цвета" файла стилей.
image
Рисует изображение в области без масштабирования. Принимает имя файла изображения как его последний параметр.
image_tiled
Рисует изображение как можно чаще в указанной области. Полезно для переменных областей.
image_scale
Рисует изображение в области, масштабируя его так, чтобы оно соответствовало указанной области. Принимает имя файла изображения как его последний параметр.
image_proportional
Рисует изображение в области, пропорционально масштабируя, чтобы соответствовать указанной области. Принимает имя файла изображения как его последний параметр.
gradient
Заливает область цветным градиентом сверху вниз. Принимает два цвета: цвет для рисования вверху и цвет для рисования внизу.
gradient_horizontal
Рисует горизонтальный градиент.
dashedrect
Рисует пунктирный прямоугольник с указанным цветом.

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

Несколько примеров использования, из файла стилей:

		Button
		{
			textcolor=buttontext
			bgcolor=grey
			render_bg
			{
				// градиентная заливка всего фона - при использовании RGBA цветных строк dir
				0="gradient( x0, y0, x1, y1, white, black )"
				
				// линии вокруг
				0="fill( x0, y0 + 1, x0 + 1, y1 - 1, bordercolor )"
				0="fill( x1, y0 + 1, x1 - 1, y1 - 1, bordercolor )"
				0="fill( x0 + 1, y0, x1 - 1, y0 + 1, bordercolor )"
				0="fill( x0 + 1, y1 - 1, x1 - 1, y1, bordercolor )"
				
				// один пиксель заливает углы
				0="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, DarkCorner )"
				0="fill( x1 - 1, y0 + 1, x1 - 2, y0 + 2, DarkCorner )"
				0="fill( x0 + 1, y1 - 1, x0 + 2, y1 - 2, DarkCorner )"
				0="fill( x1 - 1, y1 - 1, x1 - 2, y1 - 2, DarkCorner )"
				
				// и феговое сломанное изображение
				0="image( x0, y0, x1, y1, graphics/icon_expand_over )"
			}
		}

Числа в каждой строке - просто артефакт нашей общей библиотеки синтаксического анализа; не имеет значения, что вы положили туда, и все может быть одинаково.

Panel Zoo

Нажав "F7" вы откроете диалоговое окно VGUI Panel Zoo. Этот диалог показывает набор различных общих элементов управления в различных состояниях и является хорошим местом для тестирования изменений, которые вы внесли в элементы управления в целом. Вы можете использовать "F6" инструмент в этом режиме, чтобы получить информацию о различных элементах управления.

Редактирование старых файлов ресурсов

Многие диалоги уже имеют файл макета, определенный с расширением ".res". Это нормально, чтобы начать добавлять дополнительные стили, цвета или макеты разделов в существующий файл. Вы также можете изменить положение элементов управления в старых файлах, просто изменив ключи "x", "y", "wide", "tall" на самом элементе управления, но они не перезагружаются автоматически и не так выразительны как макеты скриптов.

To do: Как включить автоматическую перезагрузку в публичной сборке Steam.

Добавление новых элементов управления

Для добавления нового элемента управления вам просто нужно выбрать уникальное имя элемента управления, добавить несколько основных полей. Ниже приведен пример добавления URL-адреса в диалог отладки vgui.

"resource/layout/layoutdebugdialog.layout"
{
	controls
	{
		wiki_link { controlname="URLLabel" labeltext="Вики страница VGUI редактор"  urltext="http://developer.valvesoftware.com/wiki/VGUI_Editing" }
	}
	
	layout
	{
		...
	
		place { control="wiki_link" align=bottom width="max" margin=16 margin-bottom=12 margin-right=16 }
	}

}

Ключ controlname определяет класс создаваемого элемента управления. Как правило, вам понадобится "Label", "URLLabel" или "ImagePanel". Вы также можете разместить элементы управления "Button", "CheckButton", "RadioButton" для макетирования диалогов, которые позже может найти программист и подключиться к функциональности.

Полезные инструменты

Пользовательское определение языка для Notepad++

Для простого редактирования в Notepad++ или других программах UDL 2.1. Скопируйте и вставьте код в файл .xml и импортируйте его через: Язык >> Определите свой язык >> Импорт. Затем вы можете выбрать его в разделе "Язык".

V-GUI Steam UDL на github.com