VGUI Editing

This article has no  links to other VDC articles. Please help improve this article by adding links  that are relevant to the context within the existing text.
January 2024

Примечание:Приведенная ниже информация извлечена из внутреннего документа 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.

Порядок, в котором стили перечислены в файле, соответствует порядку, в котором они применяются к элементу управления. Чтобы контролировать как ^{[Нужно сделать]}.

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

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

hover

Применяется, когда курсор мыши находится над элементом управления

active

Левая кнопка мыши нажата на элементе управления

focus

Элемент управления имеет фокус клавиатуры, перемещаемый клавишей TAB

selected

Для элемента управления включена его основная опция, установлен флажок или выбран переключатель

disabled

Элемент управления отключен кодом и не может взаимодействовать с

scrollbar

Элементы управления имеют дополнительную полосу прокрутки, и в настоящее время она видна

framefocus

Используется только для элементов управления Frame и FrameButton, устанавливается, если диалоговое окно в данный момент имеет фокус

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

CheckButton:selected:disabled
{
	textcolor=black
}

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

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

Цвета

Раздел цветов файла .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"
}

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

Нужно сделать: Разница между синтаксисом 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" на самом элементе управления, но они не перезагружаются автоматически и не так выразительны как макеты скриптов.

Нужно сделать: Как включить автоматическую перезагрузку в публичной сборке 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