VGUI Editing/ru
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', но рисуется в фоновом режиме до того, как прорисовываются любые подэлементы.
paddingpadding-leftpadding-rightpadding-toppadding-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 в файле стилей, а не в файле макета, независимо от того, что, даже если вы измените его на другой определенный цветЦвета
Раздел цветов файла .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 и импортируйте его через: Язык >> Определите свой язык >> Импорт. Затем вы можете выбрать его в разделе "Язык".
