Steam Community :: Guide :: 《求生之路2》UI、HUD基础教程（2025-5-19更新）

Store Page

Left 4 Dead 2

All Discussions Screenshots Artwork Broadcasts Videos Workshop News Guides Reviews

Left 4 Dead 2 > Guides > 红酒炖兔兔♨'s Guides

Not enough ratings

《求生之路2》UI、HUD基础教程（2025-5-19更新）

By 红酒炖兔兔♨

本教程旨在展示修改《求生之路2》内UI文件（.res文件）的方法。

Award

Created by

红酒炖兔兔♨
Online

Languages: Simplified Chinese

Modding: Mutations/Scripts

Posted

Updated

18 May @ 8:09pm

19 May @ 12:15am

1,585	Unique Visitors
33	Current Favorites

Guide Index

Overview

读前需知

一、前言

二、准备阶段

三、UI、HUD的基本构造、术语解释

1. 元素（Elements）

（1）元素的结构

（2）元素的画布

（3）元素的锚点

（4）元素的位置、大小数值前缀

2. 样式定义文件（Scheme）

（1）颜色定义参数

（2）文字定义参数

3. 布局文件（scripts\hudlayout.res）

4. 限定条件（Fliters）

（1）限定条件的解释

（2）常见的限定条件解释

（3）限定条件的逻辑判断

5. 按钮（Buttons）

6. 子菜单（Flyout Menus）

7. 滑条和复选框（Sliders & Checkbox）

8. 贴图（VGUI Images）

（1）给UI添加一个贴图元素

（2）给贴图元素添加按钮

（3）贴图定义文件（scripts\hud_textures.txt、mod_textures.txt）

9. 矩形（Panels）

10. 文本（Labels）

11. 按钮指令（Commands）

12. 其它本章未提及的方面

四、通过PS辅助确定RES元素位置、大小，使用VTFEdit转换贴图

五、常用UI文件名中英对照表

六、开始学习修改HUD

Comments

读前需知

UP本人已征得原作者同意翻译教程原文。
本专栏在B站免费公开，禁止任何人以任何形式对本专栏以及原教程内容进行摘编、或转为付费内容以此牟利。
UP本人也具备一定的HUD制作经验，因此UP会根据自身学识理解对教程内容进行修改，本专栏并非完全机械照搬原教程。
阅读本专栏，需要你对系统操作、制作求生MOD、使用Photoshop有一定的基础水平。

参照教程原文：
https://test-steamproxy.haloskins.io/sharedfiles/filedetails/?id=3228936937
参照教程原作者：MrFunreal
翻译&修订：猫嘤猫嘤猫[space.bilibili.com]

一、前言

本教程旨在展示修改《求生之路2》内UI文件（.res文件）的方法。

二、准备阶段

安装UP的《基础工具3件套》[www.bilibili.com]
下载 Notepad4（下方链接提供下载，如你已有习惯的文本编辑器可以跳过）
为了快速在游戏内观察和修改HUD，优化制作流程避免重复操作（即实现HUD热重载），我们需要对求生源文件进行处理：
设法将所有游戏UI文件（RES文件）从游戏源文件内提取出来，让UI文件变成独立文件，并让游戏识别这些独立文件，只需一次按键或一条指令就可以实现HUD热重载，让改动效果立即显现出来。
原教程花了很大篇幅介绍处理过程，UP为此制作了《求生HUD调试模式切换器》。只需下载网盘内附件，按照指示对游戏源文件进行处理即可。

【下载链接，码m6f3】htt删ps://pan.bai删du.c删om/s/17lEsc删XLuH2mneE9it12w0w&pwd=m6f3

三、UI、HUD的基本构造、术语解释

1. 元素（Elements）

（1）元素的结构

游戏的RES文件内有各种元素，元素内有各种元素参数，控制着元素的表现和功能。除了部分特殊元素外，绝大部分元素的共同元素参数如下：

名称

描述

ControlName

指定元素类型，例如Text（文本）、Panel（矩形）、Button（按钮）等

fieldName

和元素花括号外的元素名相同

xpos

水平位置，数值减少则向左移动，向右增加。单位见下文（2）

ypos

垂直位置，数值减少则向上移动，向下增加。单位见下文（2）

zpos

Z轴位置，在同一RES文件内，数值越大越优先显示在上层

wide

元素宽度，单位见下文（2）

tall

元素高度，单位见下文（2）

visible

元素是否可见，通常为1

enabled

元素是否启用，通常为1

bgcolor_override

设置元素背景色，格式"R G B A"，如不透明纯红"255 0 0 255"

fgcolor_override

设置元素前景色（文本专用），格式"R G B A"，如不透明纯红"255 0 0 255"

（2）元素的画布

元素的基础画布为640x480像素。不在此分辨率的情况下，xpos/ypos/wide/tall每增减1单位，其实际在屏幕上反映的变化并非都是1像素，因此这四项参数存在“缩放倍率”。例如1920x1080情况下，xpos增加100，会使元素向右移动225像素，以下是“缩放倍率”对照表：

屏幕比例

分辨率宽度

分辨率高度

缩放倍率

4:3

640

480

1.0000

16:9

1280

720

1.5000

16:10

1440

900

1.8750

16:9

1600

900

1.8750

16:10

1680

1050

2.1875

16:10

1920

1200

2.5000

16:9

2560

1440

3.0000

16:10

2560

1600

3.3333

16:9

3840

2160

4.5000

16:10

3840

2400

5.0000

由此可见，“缩放倍率”= 分辨率高度 / 480

（3）元素的锚点

元素的锚点都是在左上角，xpos/ypos调整的是锚点的位置。比如增加wide/tall，会让元素以锚点为原点向右/向下扩展。

（4）元素的位置、大小数值前缀

元素的xpos/ypos/wide/tall四项参数，可以添加“数值前缀”，比如：
"xpos" "r100"，"ypos" "c-100"

不同前缀功能具体如下：

元素参数

数值前缀

作用

xpos/ypos

r（反向，reversed）

以屏幕最右侧/最下方为原点，增大数值往屏幕左侧/上方移动

xpos/ypos

c（中心，centered）

以屏幕中心为原点，增大数值往屏幕右侧/下方移动

wide/tall

f（填充，full）

扩展填充到屏幕左右侧/上下侧，增大数值则减少大小，负数无实际意义，一般写作f0

2. 样式定义文件（Scheme）

游戏的UI样式定义文件（resource\clientscheme.res、sourcescheme.res、chatscheme.res、l4d360uischeme.res）包含了一系列关于颜色、文字、图案样式等的定义参数。

（1）颜色定义参数

颜色参数的格式如下：

"你定义的颜色名称（必须英文）" "R G B A" //（红绿蓝不透明度，范围0~255）

比如定义一个名为“Pure_Green”的纯绿色，可以写成：

（2）文字定义参数

文字定义的格式如下：

"你定义的字体名（必须英文）" { "1" // 1号字体样式（一个字体名至少一个样式） { "name" "Tahoma" // 可以是系统字体，也可以是Vfont字体，均仅支持英文字符 "tall" "24" // 字体大小 "weight" "400" // 字体字号（根据字体本身决定，400标粗，500中粗，700加粗） "antialias" "1" // 启用抗锯齿（一般调1） "yres" "1 719" // （可选）分辨率高度在1~719像素时，使用1号字体样式 } "2" // （可选）2号字体样式 { "name" "Tahoma" // 可以是系统字体，也可以是Vfont字体，均仅支持英文字符 "tall" "28" // 字体大小 "weight" "400" // 字体字号（根据字体本身决定，400标粗，500中粗，700加粗） "antialias" "1" // 启用抗锯齿（一般调1） "yres" "720 2800" // （可选）分辨率高度在720~2800像素时，使用2号字体样式 } }

请注意：

求生 HUDMOD 只能修改英文字体，不能修改英文字体以外的字体样式。如要修改，请参考本人的修改中文字体教程：
https://www.bilibili.com/video/BV19T4y1h7vx
求生有时加载不到某些系统字体，我们需要将想要的字体（TTF、OTF等）转换成求生能识别到的字体格式，并放入 HUDMOD 中。请参考以下视频教程：
https://www.bilibili.com/video/BV1qYEtzuEJg

3. 布局文件（scripts\hudlayout.res）

在scripts文件夹内，有一个名为hudlayout.res的文件，控制着除了主菜单外，游戏内的几乎所有元素布局的大小位置，如下图所示：

4. 限定条件（Fliters）

（1）限定条件的解释

在元素参数、元素名称结尾，有时能看到中括号对，比如[$X360]、[$WIN32]、[$DEMO]等，这些是针对不同系统平台、不同分辨率、或者是不同语言情况下的限定条件。在结尾加上限定条件后，整条参数/整个元素只会在限定条件返回“真值”的情况下生效，返回“假值”则该参数/元素被忽略。
一般来说，限定条件可以不写，除非你想同时适配不同系统平台、不同语言。

（2）常见的限定条件解释

限定条件类别

限定条件名称

具体条件

平台类

[$WIN32]

当平台是x86时（主流PC）返回真值

平台类

[$X360]

当平台是Xbox时返回真值

语言类

[$SCHINESE]

当游戏语言是简体中文时返回真值

语言类

[$TCHINESE]

当游戏语言是繁体中文时返回真值

语言类

[$ENGLISH]

当游戏语言是英语时返回真值

语言类

[$JAPANESE]

当游戏语言是日语时返回真值

平台+屏幕类

[$WIN32WIDE]

当平台是x86时、屏幕分辨率是16:9或16：10时返回真值

平台+屏幕类

[$X360WIDE]

当平台是Xbox时、屏幕分辨率是16:9或16：10时返回真值

平台+屏幕类

[!$WIN32WIDE]

当平台是x86时、屏幕分辨率是4:3时返回真值

平台+屏幕类

[!$X360WIDE]

当平台是Xbox时、屏幕分辨率是4:3时返回真值

（3）限定条件的逻辑判断

在限定条件的中括号内，可以添加特定的逻辑符号，实现简单的条件逻辑判断。
求生可用逻辑符号见下方：

逻辑符号

名称

作用

非

除了满足条件的所有情况都返回真值

A || B

或

当满足A、B条件其中之一返回真值

A && B

与

当同时满足A、B条件返回真值

(A ? B ? C)

合并

将两个或两个以上条件合并判断

以下是使用限定条件的常见例子：

"element_0" { ... "labelText" "你好" [$SCHINESE] // 当语言是简中时参数有效 "labelText" "Hello" [!$SCHINESE] // 当语言不是简中时参数有效 ... "tall" "200" [$WIN32 && ($SCHINESE || $JAPANESE)] // 当平台是PC、且语言是简中或日语时生效 "tall" "230" [$WIN32 && (!$SCHINESE && !$JAPANESE)] // 当平台是PC、且语言不是简中和日语时生效 } "element_1" [$X360] // 当平台是Xbox时，该元素才会被加载 { ... "wide" "100" [$SCHINESE || $JAPANESE] // 当语言是简中或日语时参数有效 "wide" "120" [!$SCHINESE && !$JAPANESE] // 当语言不是简中和日语时参数有效 ... } "element_2" { ... "image" "../console/background_menu_widescreen" [$X360WIDE || $WIN32WIDE] // 当屏幕比例设置为16:9或16:10时参数有效 "image" "../console/background" [!($X360WIDE || $WIN32WIDE)] // 当屏幕比例设置为4:3时参数有效 ... }

5. 按钮（Buttons）

游戏的按钮可以执行不同的命令，它的结构如下：

"button_0" // 一个按钮元素 { "ControlName" "Button" // 定义该元素为按钮 "fieldName" "button_0" // 元素名 "style" "HybridButton" // 按钮样式（样式不一定在所有情况有效） "xpos" "5" // X轴位置 "ypos" "5" // Y轴位置 "zpos" "99" // Z轴位置 "wide" "50" // 元素宽度 "tall" "15" // 元素高度 "labeltext" "音频" // 按钮内文字 "tooltiptext" "更改音频设置。" // 聚焦到元素上时屏幕下方的提示文字，留空不显示 "Command" "Audio" // 元素被按下时触发的命令 "ActivationType" "1" // 可能是无用参数，保持不动 }

其中，按钮具有不同的样式，这些样式可以在主菜单样式定义文件里找到（l4d360uischeme.res）：

6. 子菜单（Flyout Menus）

游戏的按钮除了用来执行命令，还可以用来打开一层子菜单：

子菜单由两个元素组成：一是用来调用子菜单的按钮元素，二是子菜单布局元素。其中子菜单布局元素有一个与其对应的UI文件，它们的结构如下：

RES内的两个元素： "BtnFlyout0" // 一个用于打开子菜单的按钮元素 { "ControlName" "L4D360HybridButton" // 定义该元素为按钮 "fieldName" "BtnFlyout0" // 元素名 "style" "SmallButton" // 按钮样式 "xpos" "200" // X轴位置 "ypos" "200" // Y轴位置 "zpos" "99" // Z轴位置 "wide" "85" // 元素宽度 "tall" "15" // 元素高度 "visible" "1" // 元素是否可见 "enabled" "1" // 元素是否启用 "labelText" "打开一个子菜单" // 按钮内文字 "command" "FlmFlyout0" // 相对应的子菜单布局元素名 } "FlmFlyout0" // 一个子菜单布局元素 { "fieldName" "FlmFlyout0" // 元素名 "ControlName" "FlyoutMenu" // 定义该元素为子菜单 "InitialFocus" "Btn_0" // 打开子菜单时第一个聚焦的子按钮元素 "ResourceFile" "resource/FlmFlyout0.res" // 子菜单布局元素调用的UI文件 }

子菜单布局元素调用的UI文件： "Resource/UI/l4d360ui/你的子菜单UI文件名字（纯英文）.res" { "PnlBackground" // 菜单黑底背景矩形元素 { "ControlName" "Panel" // 定义该元素为矩形 "fieldName" "PnlBackground" // 元素名 "xpos" "0" // X轴位置 "ypos" "0" // Y轴位置 "zpos" "-1" // Z轴位置 "wide" "180" // 背景的宽度，根据需要修改 "tall" "60" // 背景的高度，根据需要修改 "visible" "1" // 元素是否可见 "enabled" "1" // 元素是否启用 "paintbackground" "1" // 可能是无用参数，保持不动 "paintborder" "1" // 可能是无用参数，保持不动 } "Btn_0" // 一个子菜单按钮 { "ControlName" "L4D360HybridButton" // 定义该元素为按钮 "fieldName" "Btn_0" // 元素名 "xpos" "0" // X轴位置 "ypos" "0" // Y轴位置 "zpos" "0" // Z轴位置 "wide" "150" // 按钮宽度 "tall" "20" // 按钮高度 "visible" "1" // 元素是否可见 "enabled" "1" // 元素是否启用 "navUp" "Btn_1" // 聚焦到该元素上时按键盘向上键，要聚焦到的元素是哪个 "navDown" "Btn_1" // 聚焦到该元素上时按键盘向下键，要聚焦到的元素是哪个 "tooltiptext" "" // 聚焦到元素上时屏幕下方的提示文字，留空不显示 "labelText" "按钮0名称" // 按钮文本 "style" "FlyoutMenuButton" // 按钮样式 "command" "???" // 按钮功能 } "Btn_1" // 另一个子菜单按钮 { "ControlName" "L4D360HybridButton" // 定义该元素为按钮 "fieldName" "Btn_1" // 元素名 "xpos" "0" // X轴位置 "ypos" "25" // Y轴位置 "zpos" "0" // Z轴位置 "wide" "150" // 按钮宽度 "tall" "20" // 按钮高度 "visible" "1" // 元素是否可见 "enabled" "1" // 元素是否启用 "navUp" "Btn_0" // 聚焦到该元素上时按键盘向上键，要聚焦到的元素是哪个 "navDown" "Btn_0" // 聚焦到该元素上时按键盘向下键，要聚焦到的元素是哪个 "tooltiptext" "" // 聚焦到元素上时屏幕下方的提示文字，留空不显示 "labelText" "按钮1名称" // 按钮文本 "style" "FlyoutMenuButton" // 按钮样式 "command" "???" // 按钮功能 }

同时，还可以实现多层子菜单嵌套，原理是：在打开的子菜单内部的一个按钮，该按钮调用另一个子菜单。但游戏最多同时打开一个子菜单，因此之前打开的子菜单会被之后打开的覆盖掉。详见下图：
为了实现多层子菜单，我们需要在同一个RES文件内，同时写好子菜单按钮元素和子菜单布局元素，详见下图：

7. 滑条和复选框（Sliders & Checkbox）

游戏内只有一种样式的滑条，滑条可以实现通过鼠标控制某条指令的数值，它的结构如下：

"Sld_SvCheats" // 一个滑条元素 { "ControlName" "SliderControl" // 定义该元素为滑条 "fieldName" "Sld_SvCheats" // 元素名 "xpos" "715" // X轴位置 "ypos" "95" // Y轴位置 "zpos" "3" // Z轴位置 "wide" "120" // 元素宽度 "tall" "15" // 元素高度 "visible" "1" // 元素是否可见 "enabled" "1" // 元素是否启用 "minValue" "0" // 滑条最左侧的最小值 "maxValue" "2" // 滑条最右侧的最大值 "stepSize" "2" // 聚焦于滑条时，按键盘左右方向键滑条步进值 "conCommand" "sv_cheats" // 滑条控制的参数 "inverseFill" "0" // 滑条是否反向（设置1表示最左侧是最大，最右侧是最小） "BtnDropButton" // 滑条左侧的文本元素 { "ControlName" "L4D360HybridButton" // 定义该元素为按钮 "style" "SmallButton" // 按钮样式 "fieldName" "BtnDropButton" // 元素名 "tall" "15" // 文本框高度（设置过低可能导致纵向显示不全） "visible" "1" // 元素是否可见 "enabled" "1" // 元素是否启用 "labelText" "启用作弊" // 滑条的文本 "ActivationType" "1" // 可能是无用参数，保持不动 } }

除了MOD管理页面内的复选框，求生UI并没有可以自定义的、真正意义上的复选框。复选框可以搭配滑条使用，作用是提示某条参数对比给定的参考值是否不同，如果不同，复选框内就会打钩。它的结构如下：

"sv_cheatscheck" // 一个复选框元素 { "ControlName" "CvarToggleCheckButton" // 定义该元素为复选框 "fieldName" "sv_cheatscheck" // 元素名 "xpos" "c20" // X轴位置 "ypos" "c20" // Y轴位置 "zpos" "0" // Z轴位置 "wide" "150" // 元素宽度 "tall" "20" // 元素高度 "visible" "1" // 元素是否可见 "enabled" "1" // 元素是否启用 "tabPosition" "1" // 可能是无用参数，保持不动 "labelText" "" // 复选框的文本 "textAlignment" "west" // 文本文字对齐方式 "cvar_name" "sv_cheats" // 指定参数 "Default" "0" // 参考值 }

8. 贴图（VGUI Images）

（1）给UI添加一个贴图元素

贴图元素是一种简单的元素，结构如下：

"Image_0" { "ControlName" "ImagePanel" // 定义该元素为贴图 "fieldName" "Image_0" // 元素名 "xpos" "0" // X轴位置 "ypos" "0" // Y轴位置 "zpos" "-2" // Z轴位置 "wide" "f0" // 贴图宽度 "tall" "f0" // 贴图高度 "image" "hud/s_panel_coach" // VMT贴图路径，起始位置在materials/vgui/ "scaleImage" "1" // 是否根据分辨率缩放图像，一般设置1 }

注意事项：

image参数指定的路径必须是VMT文件，不能是VTF文件。VTF路径只能由VMT里的$basetexture参数指定。
如果你想调用的贴图不在 materials\vgui\文件夹内，比如你的贴图文件路径是 materials\20cat\test.vmt，可以在贴图路径参数内加上“../”的前缀，表示目录起始位置在 materials\，参数如下：

... "image" "../20cat/test" // VMT贴图路径 ...

（2）给贴图元素添加按钮

游戏并没有真正意义上的“贴图按钮”，但我们可以通过在贴图元素的上方叠加一个按钮元素，来间接实现贴图按钮的效果。结构如下：

"Image_1" // 贴图元素 { "ControlName" "ImagePanel" // 定义该元素为贴图 "fieldName" "Image_1" // 元素名 "xpos" "100" // X轴位置 "ypos" "100" // Y轴位置 "zpos" "1" // Z轴位置 "wide" "30" // 贴图宽度 "tall" "30" // 贴图高度 "image" "hud/s_panel_coach" // VMT贴图路径，起始位置在materials/vgui/ "scaleImage" "1" // 是否根据分辨率缩放图像，一般设置1 } "BtnImage_1" // 按钮元素 { "ControlName" "Button" // 定义该元素为按钮 "fieldName" "BtnImage_1" // 元素名 "xpos" "100" // X轴位置，与以上贴图元素数值相同 "ypos" "100" // Y轴位置，与以上贴图元素数值相同 "zpos" "2" // Z轴位置，比以上贴图元素数值大即可 "wide" "30" // 按钮宽度，与以上贴图元素数值相同 "tall" "30" // 按钮高度，与以上贴图元素数值相同 "autoResize" "1" // 可能是无用参数，保持不动 "pinCorner" "0" // 可能是无用参数，保持不动 "tabPosition" "2" // 可能是无用参数，保持不动 "labelText" "" // 按钮的文本，留空即可 "Command" "xxx" // 按钮的指令 }

（3）贴图定义文件（scripts\hud_textures.txt、mod_textures.txt）

有两个文本控制着 HUD 调用的一些贴图定义，其中：

hud_textures.txt 主要用于修改自带准星贴图，比如近战准星（crosshair_default）、特感技能准星（PZ_开头的）。
mod_textures.txt 主要用于修改游戏教学提示贴图（iconsheet的row1至row4）、游戏小贴士贴图（tip开头）等。
贴图定义是游戏代码写死的，游戏不会识别新增的贴图定义。贴图定义的结构如下：

"icon_arrow_up" // 贴图定义名称 { "file" "vgui/hud/iconsheet" // 调用的VMT贴图文件 "x" "192" // 调用贴图X位置 "y" "64" // 调用贴图Y位置 "width" "64" // 调用贴图宽度 "height" "64" // 调用贴图高度 }

9. 矩形（Panels）

矩形元素一般用于充当其他元素的背景。结构如下：

"PnlBackground_0" { "ControlName" "EditablePanel" // 定义该元素为矩形 "fieldName" "PnlBackground_0" // 元素名 "xpos" "100" // X轴位置 "ypos" "100" // Y轴位置 "zpos" "-1" // Z轴位置，一般数值上比其他任何元素都要小 "wide" "50" // 矩形宽度 "tall" "50" // 矩形高度 "bgcolor_override" "0 0 0 230" // 矩形的背景填充色（红绿蓝不透明度，范围0~255） "PaintBackgroundType" "0" // 背景填充样式：0默认、1模糊、2圆角、3从左到右渐变 }

10. 文本（Labels）

文本元素结构如下：

"label_0" { "ControlName" "Label" // 定义该元素为文本 "fieldName" "label_0" // 元素名 "xpos" "50" // X轴位置 "ypos" "50" // Y轴位置 "zpos" "1" // Z轴位置 "wide" "300" // 文本框宽度 "tall" "45" // 文本框高度 "textAlignment" "west" // 文本对齐方式（见下图） "wrap" "0" // 是否启用自动换行（调1开启，并且会强制左上对齐） "Font" "DefaultVerySmall" // 使用的字体样式（可在resource\clientscheme.res内找到字体定义） "labelText" "这是一个文本元素" // 文本内容 "fgcolor_override" "255 0 255 255" // 文字颜色（红绿蓝不透明度，范围0~255。不透明度是指文字的不透明度） }

11. 按钮指令（Commands）

每一个按钮元素都能触发某一个功能，这个功能由其元素内部的“Command”按钮指令参数指定。其中，绝大多数按钮指令都是菜单指令，不是控制台指令；而且大多数指令只能在特定的场景中才能生效，比如：

有些按钮指令只会在主菜单生效，而不能在游戏内ESC菜单生效。
由于游戏代码写死的缘故，有些按钮指令只能被特定的元素调用，有些元素不需要按钮指令也能发挥作用，比如音频设置里的“音频输入电平”无需任何按钮指令也能正常使用。再比如多人联机设置里的“FOV视距”数值文本元素，它无需任何文本变量也能正常显示。

另在专栏资料文件夹内，可以查阅所有求生UI所有按钮指令《第三章（11）-All_L4D2_Commands.txt》。除了按钮指令，按钮指令参数还可以调用控制台指令，比如：

"command" "#maps c2m1_highway"

给按钮元素设置以上参数后，按下即可一键建图C2M1。有时候按钮可能无法调用控制台指令，可以换种形式：

"command" "#con_enable 1; maps c2m1_highway"

12. 其它本章未提及的方面

以上提及的各种元素类型、元素参数，基本能满足我们制作HUD所需知识储备。如有兴趣研究本章未提及的元素类型等，请查阅专栏资料《第三章（12）-All_L4D2_ControlNames.txt》、《第三章（12）-All_L4D2_res_files_in_one》。

四、通过PS辅助确定RES元素位置、大小，使用VTFEdit转换贴图

通过上一章，我们了解到元素位置大小参数会受到“缩放倍率”的影响。UP个人习惯使用Photoshop来辅助确定参数的大小。比如在1920x1080的分辨率下，缩放倍率是2.25，想要在主菜单这个位置，添加一个300x176像素的UI贴图：

用PS打开素材，按Ctrl+Shift+I打开图像大小对话框，将其长、宽各自不按比例拉到最接近的2的倍数（2,4,8,16,32,64,128,256,512,1024,2048,4096……），缩放模式使用“两次线性”。

按Ctrl+Alt+S打开存储副本对话框，保存类型选择TGA（32位），将成品保存在方便的位置。

打开VTFEdit（基础工具套装内附），点击导入按钮，按照图示设置并点击OK。
为了确保贴图清晰度，UP建议制作UI贴图使用BGR格式，当你的贴图存在Alpha透明通道，将两个贴图格式都选择BGRA8888，并在对应的VMT文件内加上$translucent 1；如果不存在透明通道，则选择BGR888。

按Ctrl+S，将VTF文件保存到想要的贴图目录。

在别的UI贴图目录里随便找一份VMT文件，复制到刚才的贴图目录，并将其修改如下：

在PS内确定好贴图的位置大小参数，如图所示：

随后在对应的RES文件内，以图片元素的形式调用刚才制作好的贴图，效果如下：

至此，我们成功在主菜单内添加了一个图片元素。

五、常用UI文件名中英对照表

UP同时也将本人自研究HUD以来修改过的文件，在专栏资料《表格资料-五常用UI文件名中英对照表》里列出来，方便大家对照参考。

六、开始学习修改HUD

通过第一章，我们完成了实现UI热重载的前期工作，了解HUD各部分的知识。接下来：

建议先从工坊下载一个较为完整的HUD，比如UP本人的《20HUD》，将MOD解包之后再结合本专栏来对HUD进行自由修改，借此来学习HUD制作。为了避免重复造轮子，不建议从零开始制作HUD。
将游戏设置为“无边框窗口”模式，这样能快速地在游戏和文本编辑器之间切换。
进入地图后，每当你修改好文件，可以在游戏内按键盘上的减号（-）来热重载HUD。如果你正位于主菜单（或者正在修改主菜单部分），按键快捷键可能会失效，此时打开控制台并输入“re”回车也可以热重载HUD。请注意：修改过样式定义文件内的文字定义参数（比如clientscheme.res等样式定义文件内的fonts参数），热重载无法刷新这些参数，需要重启游戏刷新。