VGUI Editing:ru

From Valve Developer Community
Revision as of 21:49, 25 April 2019 by Luber (talk | contribs)

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


Чтобы создать скин для Steam (обновление UI после 2010 г.), вам нужно найти файл resource/styles/steam.styles и скопировать его в skins/<тут имя вашего скина>/resource/styles/steam.styes. Наличие этого файла заставит 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
Высота шрифта в пикселях.
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
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)
x, y
an absolute position to start from
width
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.
height
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.

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.

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
		place	 { controls="OKButton, CancelButton" region="bottom_row" margin=6 margin-right=12 }	// places the OK and Cancel buttons in that bottom area
	}

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

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:

fill
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.
image
Draws an image at the area, with no scaling. Takes the file name of the image as it's last parameter.
image_tiled
Draws the image as often as possible in the specified area. Useful for variable areas.
image_scale
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.
image_proportional
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.
gradient
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.
gradient_horizontal
Draws a horizontal gradient.
dashedrect
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.

Some examples of usage, from a styles file:

		Button
		{
			textcolor=buttontext
			bgcolor=grey
			render_bg
			{
				// gradient fill the whole background - when using RGBA color strings dir
				0="gradient( x0, y0, x1, y1, white, black )"
				
				// lines around
				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 )"
				
				// single pixel fills in the corners
				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 )"
				
				// and a crappy broken looking image
				0="image( x0, y0, x1, y1, graphics/icon_expand_over )"
			}
		}

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

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.

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

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.

To do: How to enable auto-reload in the public build of 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.

"resource/layout/layoutdebugdialog.layout"
{
	controls
	{
		wiki_link { controlname="URLLabel" labeltext="VGUI editor wiki page"  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 }
	}

}

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.

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

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

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

V-GUI Steam UDL на github.com