Difference between revisions of "VGUI Editing:ru"

From Valve Developer Community
Jump to: navigation, search
m
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{lang|VGUI Editing}}
+
{{lang
 +
|VGUI Editing
 +
|title=Редактирование VGUI
 +
}}
  
 
{{toc-right}}
 
{{toc-right}}
Line 6: Line 9:
  
  
Чтобы создать скин для Steam (обновление UI после 2010 г.), вам нужно найти файл resource/styles/steam.styles и скопировать его в skins/<тут имя вашего скина>/resource/styles/steam.styes. Наличие этого файла заставит Steam поместить скин в качестве опции в диалоге Настройки -> Интерфейс (для его активации потребуется перезапустить Steam). Оттуда вы можете начать редактирование.
+
Чтобы создать скин для Steam (обновление UI после 2010 г.), вам нужно найти файл resource/styles/steam.styles и скопировать его в skins/<тут имя вашего скина>/resource/styles/steam.styles. Наличие этого файла заставит Steam поместить скин в качестве опции в диалоге Настройки -> Интерфейс (для его активации потребуется перезапустить Steam). Оттуда вы можете начать редактирование.
 
Вы можете поместить новые файлы или существующие файлы Steam, которые вы хотите заменить, в папку скинов. Удачи!
 
Вы можете поместить новые файлы или существующие файлы Steam, которые вы хотите заменить, в папку скинов. Удачи!
  
 
== Инструменты ==
 
== Инструменты ==
  
Запустите Steam с параметром командной строки <code> -dev </code> (это замедлит работу программы, используйте только при необходимости) и нажмите клавишу 'F6', чтобы открыть диалоговое окно редактирования VGUI. Когда включено, то вы не сможете взаимодействовать с другими окнами; вместо этого вы можете выбрать элементы управления в любом активном диалоговом окне и получить подробную информацию о выборе.
+
Запустите Steam с параметром командной строки <code> -dev </code> (это замедлит работу программы, используйте только при необходимости) и нажмите клавишу "F6", чтобы открыть диалоговое окно редактирования VGUI. Вы не сможете взаимодействовать с другими окнами когда это включено; вместо этого при выборе элемента управления в любом активном диалоговом окне, вы получите подробную информацию о нём.
  
 
Существует несколько наборов информации о выборе. В правом верхнем углу находится ссылка на файл макета, связанный с выбранным в данный момент элементом управления, который вы можете нажать для редактирования.
 
Существует несколько наборов информации о выборе. В правом верхнем углу находится ссылка на файл макета, связанный с выбранным в данный момент элементом управления, который вы можете нажать для редактирования.
Line 57: Line 60:
 
: Требует 4 цифры, например "0 0 0 0". Определяет, как подэлементы управления должны быть расположены внутри элемента управления, и какая именно область "bgcolor" должна отрисовываться. Число слева, сверху, справа, снизу  
 
: Требует 4 цифры, например "0 0 0 0". Определяет, как подэлементы управления должны быть расположены внутри элемента управления, и какая именно область "bgcolor" должна отрисовываться. Число слева, сверху, справа, снизу  
 
; <code>image</code>
 
; <code>image</code>
: Устанавливает изображение для рисования вместо любого текста. Работает с базовыми элементами управления Label или Button. Если установлено, заменяет любой текст на кнопке.  
+
: Устанавливает изображение для рисования вместо любого текста. Работает с базовыми элементами управления "Label" или "Button". Если установлено, заменяет любой текст на кнопке.  
 
; <code>font-family</code>
 
; <code>font-family</code>
: Название шрифта ("Tahoma", "Verdana" и др.). Можно указать только одно имя шрифта. Если шрифт отсутствует в системе пользователя, он всегда будет возвращаться к Tahoma.  
+
: Название шрифта ("Tahoma", "Verdana" и др.). Можно указать только одно имя шрифта. Если шрифт отсутствует в системе пользователя, он всегда будет возвращаться к "Tahoma".  
 
; <code>font-weight</code>
 
; <code>font-weight</code>
 
: Цифры от 0 до 1000 указывают на то, как жирным рисуется шрифт. 0 - тоньше обычного, 400 - стандартный, 700 - жирный, 1000 - очень жирный. Точные шаги могут отличаться в зависимости от шрифта.  
 
: Цифры от 0 до 1000 указывают на то, как жирным рисуется шрифт. 0 - тоньше обычного, 400 - стандартный, 700 - жирный, 1000 - очень жирный. Точные шаги могут отличаться в зависимости от шрифта.  
 
; <code>font-size</code>
 
; <code>font-size</code>
: Высота шрифта в пикселях.  
+
: Высота шрифта в пикселях (px).  
 
; <code>font-style</code>
 
; <code>font-style</code>
 
: Список флагов, применяемых к шрифту. Это список флагов, разделенных точкой с запятой. Возможные флаги: "italic", "underline", "strikeout", "symbol", "antialias", "dropshadow", "outline", "rotary", "additive", "uppercase", "lowercase" (некоторые из них применяется только в игровом оверлее)  
 
: Список флагов, применяемых к шрифту. Это список флагов, разделенных точкой с запятой. Возможные флаги: "italic", "underline", "strikeout", "symbol", "antialias", "dropshadow", "outline", "rotary", "additive", "uppercase", "lowercase" (некоторые из них применяется только в игровом оверлее)  
Line 132: Line 135:
 
{{todo|1=Разница между синтаксисом X=Y и X Y?}}
 
{{todo|1=Разница между синтаксисом X=Y и X Y?}}
  
== Файлы-Макеты ==
+
== Файлы-макеты ==
  
Новый файл макета имеет расширение ".layout" и находится в каталоге "resource/layout/" в клиенте Steam. По-прежнему существует большой набор старых файлов макетов VGUI с расширением .res, которые имеют более подробный вид; но они все еще могут сосуществовать вместе. Команды макета находятся под ключом "layout" в файле и представляют собой набор команд для позиционирования элементов управления. Любой элемент управления, на который ссылается команда макета, будет игнорировать любую исходную информацию о размерах или размещении и будет полностью переопределен командой макета. Команды:  
+
Новый файл-макет имеет расширение ".layout" и находится в каталоге "resource/layout/" в клиенте Steam. По-прежнему существует большой набор старых файлов-макетов VGUI с расширением .res, которые имеют более подробный вид; но они все еще могут сосуществовать вместе. Команды макета находятся под ключом "layout" в файле и представляют собой набор команд для позиционирования элементов управления. Любой элемент управления, на который ссылается команда макета, будет игнорировать любую исходную информацию о размерах или размещении и будет полностью переопределен командой макета. Команды:  
  
 
; <code>Place</code>
 
; <code>Place</code>
 
: Расположение элементов управления по вертикали или горизонтали  
 
: Расположение элементов управления по вертикали или горизонтали  
 
; <code>Region</code>
 
; <code>Region</code>
: Описывает регион, в котором нужно сделать макет, на который могут ссылаться команды Place
+
: Описывает регион, в котором нужно сделать макет, на который могут ссылаться команды Place<br>Команды Place и Region имеют много параметров, большинство из которых являются командами между ними. Все параметры являются необязательными.  
 
 
Команды Place и Region имеют много параметров, большинство из которых являются командами между ними. Все параметры являются необязательными.  
 
  
 
; <code>controls</code>
 
; <code>controls</code>
Line 162: Line 163:
 
: сколько разрыва между элементами управления мы выкладываем  
 
: сколько разрыва между элементами управления мы выкладываем  
 
; <code>overflow</code>
 
; <code>overflow</code>
: What to do if the contents don't fit in the region, this is for regions only. The default is to clip the region and try to resize the contents a bit to fit in it. The options you can set are 'allow-horizontal', 'allow-vertical', 'allow-both', 'scroll-horizontal', 'scroll-vertical', or 'scroll-both'. The allow variants will prevent the contents of the region from being resized or moved and will allow them to overflow. The scroll variants will also allow overflow, but in addition will automatically place scroll bars at the edges of the region which allow scrolling the contents. The allow variants are useful for use in child regions of a parent region that has the scroll variant set. The parent will then scroll all the child regions as well. (Region only command)  
+
: Что делать, если содержимое не подходит для региона, это только для регионов. По умолчанию происходит обрезка области и попытка немного изменить её размер. Можно установить следующие параметры: 'allow-horizontal', 'allow-vertical', 'allow-both', 'scroll-horizontal', 'scroll-vertical', или 'scroll-both'. Разрешенные варианты предотвратят изменение или перемещение содержимого области и переполнят его. Варианты прокрутки также допускают переполнение, но, кроме того, автоматически размещают полосы прокрутки по краям области, которые позволяют прокручивать содержимое. Разрешающие варианты полезны для использования в дочерних регионах родительского региона, для которых установлен вариант прокрутки. Затем родитель будет прокручивать все дочерние регионы. (Команда только для региона)  
 
; <code>x''', '''y</code>
 
; <code>x''', '''y</code>
: an absolute position to start from
+
: абсолютная позиция, с начала
 
; <code>width</code>
 
; <code>width</code>
: sets a fixed width, in pixels, the controls will be. Can be set to "max", which is the full width of the container minus the margin.  
+
: устанавливает фиксированную ширину, в пикселях (px), элементы управления будут такими же. Может быть установлено на "max", т.е. полная ширина контейнера за вычетом margin.  
 
; <code>height</code>
 
; <code>height</code>
: sets a fixed height, in pixels, the controls will be. Can be set to "max", which is the full height of the container minus the margin.
+
: устанавливает фиксированную высоту, в пикселях (px), элементы управления будут такими же. Может быть установлено на "max", т.е. полная ширина контейнера за вычетом margin.
  
Layout commands are specified as a list, evaluated in order of expression. You don't typically need to use the Region command except for more complex layouts.
+
Команды макета задаются в виде списка, оцениваемого в порядке выражения. Обычно вам не нужно использовать команду Region, за исключением более сложных макетов.
  
 
<pre>layout
 
<pre>layout
 
{
 
{
region { name="bottom_row" width="max" align=bottom height=30 } // defines a 30 pixel high region along the bottom of the area we're layout out
+
region { name="bottom_row" width="max" align=bottom height=30 } // определяет область высотой 30 пикселей вдоль нижней части области, которую мы размечаем
place { controls="OKButton, CancelButton" region="bottom_row" margin=6 margin-right=12 } // places the OK and Cancel buttons in that bottom area
+
place { controls="OKButton, CancelButton" region="bottom_row" margin=6 margin-right=12 } // помещает кнопки 'ОК' и 'Отмена' в эту нижнюю область
 
}
 
}
  
Line 182: Line 183:
 
== Команды рендеринга ==
 
== Команды рендеринга ==
  
The "render" and "render_bg" keys in styles specify a list of instructions to draw images or rectangles. They are done in-order. The commands all take at least 4 parameters, the coordinates within the current control to draw at. x0, x1, y0, y1 describe the left, right, top, and bottom coordinates in pixels, and then you can add or subtract numbers from that. There are several different commands that can be issued:  
+
Ключи "render" и "render_bg" в стилях задают список инструкций для рисования изображений или прямоугольников. Они сделаны по порядку. Все команды принимают по крайней мере 4 параметра, координаты в текущем элементе управления, чтобы рисовать. x0, x1, y0, y1 описывают левую, правую, верхнюю и нижнюю координаты в пикселях (px), и затем вы можете добавлять или вычитать числа из них. Существует несколько различных команд, которые можно выполнить:
  
 
; <code>fill</code>
 
; <code>fill</code>
: Fills an area with a single color. Takes an extra color parameter, which needs to defined earlier in the "Colors" section of the styles file.  
+
: Заливает область одним цветом. Принимает дополнительный параметр цвета, который необходимо определить ранее в разделе "Цвета" файла стилей.  
 
; <code>image</code>
 
; <code>image</code>
: Draws an image at the area, with no scaling. Takes the file name of the image as it's last parameter.  
+
: Рисует изображение в области без масштабирования. Принимает имя файла изображения как его последний параметр.  
 
; <code>image_tiled</code>
 
; <code>image_tiled</code>
: Draws the image as often as possible in the specified area. Useful for variable areas.
+
: Рисует изображение как можно чаще в указанной области. Полезно для переменных областей.
 
; <code>image_scale</code>
 
; <code>image_scale</code>
: Draws an image at the area, scaling it to fit the specified area. Takes the file name of the image as it's last parameter.  
+
: Рисует изображение в области, масштабируя его так, чтобы оно соответствовало указанной области. Принимает имя файла изображения как его последний параметр.  
 
; <code>image_proportional</code>
 
; <code>image_proportional</code>
: Draws an image at the area, scaling proportionally to fit the specified area. Takes the file name of the image as it's last parameter.  
+
: Рисует изображение в области, пропорционально масштабируя, чтобы соответствовать указанной области. Принимает имя файла изображения как его последний параметр.  
 
; <code>gradient</code>
 
; <code>gradient</code>
: Fills an area with color gradient, top to bottom. Takes two colors, the color to draw at the top and the color to draw at the bottom.  
+
: Заливает область цветным градиентом сверху вниз. Принимает два цвета: цвет для рисования вверху и цвет для рисования внизу.  
 
; <code>gradient_horizontal</code>
 
; <code>gradient_horizontal</code>
: Draws a horizontal gradient.
+
: Рисует горизонтальный градиент.
 
; <code>dashedrect</code>
 
; <code>dashedrect</code>
: Draws a dashed rectangle with the specified color.
+
: Рисует пунктирный прямоугольник с указанным цветом.
  
It's relatively easy for a dev to add more rendering commands, so if there is a common set of drawing commands needed just ask. Don't quote any of the parameters, because since the whole command is in quotes the parser will break.  
+
Для dev относительно легко добавить больше команд рендеринга, поэтому, если требуется общий набор команд рисования, просто спросите. Не заключайте в кавычки ни один из параметров, потому что, поскольку вся команда находится в кавычках, синтаксический анализатор сломается.  
  
Some examples of usage, from a styles file:  
+
Несколько примеров использования, из файла стилей:  
 
<pre> Button
 
<pre> Button
 
{
 
{
Line 210: Line 211:
 
render_bg
 
render_bg
 
{
 
{
// gradient fill the whole background - when using RGBA color strings dir
+
// градиентная заливка всего фона - при использовании RGBA цветных строк dir
 
0="gradient( x0, y0, x1, y1, white, black )"
 
0="gradient( x0, y0, x1, y1, white, black )"
 
 
// lines around
+
// линии вокруг
 
0="fill( x0, y0 + 1, x0 + 1, y1 - 1, bordercolor )"
 
0="fill( x0, y0 + 1, x0 + 1, y1 - 1, bordercolor )"
 
0="fill( x1, y0 + 1, x1 - 1, y1 - 1, bordercolor )"
 
0="fill( x1, y0 + 1, x1 - 1, y1 - 1, bordercolor )"
Line 219: Line 220:
 
0="fill( x0 + 1, y1 - 1, x1 - 1, y1, bordercolor )"
 
0="fill( x0 + 1, y1 - 1, x1 - 1, y1, bordercolor )"
 
 
// single pixel fills in the corners
+
// один пиксель заливает углы
 
0="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, DarkCorner )"
 
0="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, DarkCorner )"
 
0="fill( x1 - 1, y0 + 1, x1 - 2, y0 + 2, DarkCorner )"
 
0="fill( x1 - 1, y0 + 1, x1 - 2, y0 + 2, DarkCorner )"
Line 225: Line 226:
 
0="fill( x1 - 1, y1 - 1, x1 - 2, y1 - 2, DarkCorner )"
 
0="fill( x1 - 1, y1 - 1, x1 - 2, y1 - 2, DarkCorner )"
 
 
// and a crappy broken looking image
+
// и феговое сломанное изображение
 
0="image( x0, y0, x1, y1, graphics/icon_expand_over )"
 
0="image( x0, y0, x1, y1, graphics/icon_expand_over )"
 
}
 
}
Line 231: Line 232:
  
 
</pre>  
 
</pre>  
The numbers on each line are just an artifact of our common parsing library; it doesn't matter what you put there, and it can all be the same.
+
Числа в каждой строке - просто артефакт нашей общей библиотеки синтаксического анализа; не имеет значения, что вы положили туда, и все может быть одинаково.
  
== Панель Zoo ==
+
== Panel Zoo ==
  
Hitting 'F7' opens the VGUI panel zoo dialog. This dialog shows a set of different common controls in various states, and is a good place to test changes you've made to controls in general. You can use the F6 tool in this mode to get information about the various controls.  
+
Нажав "F7" вы откроете диалоговое окно VGUI Panel Zoo. Этот диалог показывает набор различных общих элементов управления в различных состояниях и является хорошим местом для тестирования изменений, которые вы внесли в элементы управления в целом. Вы можете использовать "F6" инструмент в этом режиме, чтобы получить информацию о различных элементах управления.  
  
 
== Редактирование старых файлов ресурсов ==
 
== Редактирование старых файлов ресурсов ==
  
A lot of dialogs already have a layout file defined with the extension ".res". It's OK to start add in extra styles, color, or layout sections to an existing file. You can also tweak the positions of controls in older files by just changing the "x", "y", "wide", "tall" keys on the control itself, but they don't auto-reload and aren't as expressive as the layout scripts.  
+
Многие диалоги уже имеют файл макета, определенный с расширением ".res". Это нормально, чтобы начать добавлять дополнительные стили, цвета или макеты разделов в существующий файл. Вы также можете изменить положение элементов управления в старых файлах, просто изменив ключи "x", "y", "wide", "tall" на самом элементе управления, но они не перезагружаются автоматически и не так выразительны как макеты скриптов.  
  
{{todo|How to enable auto-reload in the public build of Steam.}}
+
{{todo|Как включить автоматическую перезагрузку в публичной сборке Steam.}}
  
 
== Добавление новых элементов управления ==
 
== Добавление новых элементов управления ==
  
To add a new control you just need to pick a unique name for the control, add fill in some basic fields. Below is an example of adding a URL to the vgui debugging dialog.  
+
Для добавления нового элемента управления вам просто нужно выбрать уникальное имя элемента управления, добавить несколько основных полей. Ниже приведен пример добавления URL-адреса в диалог отладки vgui.  
 
<pre>"resource/layout/layoutdebugdialog.layout"
 
<pre>"resource/layout/layoutdebugdialog.layout"
 
{
 
{
 
controls
 
controls
 
{
 
{
wiki_link { controlname="URLLabel" labeltext="VGUI editor wiki page"  urltext="http://developer.valvesoftware.com/wiki/VGUI_Editing" }
+
wiki_link { controlname="URLLabel" labeltext="Вики страница VGUI редактор"  urltext="http://developer.valvesoftware.com/wiki/VGUI_Editing" }
 
}
 
}
 
 
Line 262: Line 263:
 
}
 
}
 
</pre>  
 
</pre>  
The '''controlname''' key determines the class of control to create. Typically you'll want "Label", "URLLabel", or "ImagePanel". You can also place "Button", "CheckButton", "RadioButton" controls for mocking up dialogs, that a programmer can later come along and hook up to functionality.
+
Ключ '''controlname''' определяет класс создаваемого элемента управления. Как правило, вам понадобится "Label", "URLLabel" или "ImagePanel". Вы также можете разместить элементы управления "Button", "CheckButton", "RadioButton" для макетирования диалогов, которые позже может найти программист и подключиться к функциональности.
  
 
== Полезные инструменты ==
 
== Полезные инструменты ==

Latest revision as of 03:13, 26 April 2019

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