参照教程原文：https://steamcommunity.com/sharedfiles/filedetails/?id=3228936937
参照教程原作者：MrFunreal（https://steamcommunity.com/id/funreal）
翻译&修订：猫嘤猫嘤猫（网页链接）
读前须知
1. UP本人已征得原作者同意翻译教程原文。
2. 本专栏在B站免费公开，禁止任何人以任何形式对本专栏以及原教程内容进行摘编、或转为付费内容以此牟利。
3. UP本人也具备一定的HUD制作经验，因此UP会根据自身学识理解对教程内容进行修改，本专栏并非完全机械照搬原教程。
4. 阅读本专栏，需要你对系统操作、制作求生MOD、使用Photoshop有一定的基础水平。
5. 请使用电脑阅读本专栏，如觉得图片小看不清，请拖拽图片到浏览器顶部打开新窗口，这样就可以看到大图。如需要复制表格或者代码，请到网盘附件下载doc文档。
已征得原作者同意翻译教程原文
目录导航
一、前言
二、准备阶段
三、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
一、前言
本专栏旨在展示修改《求生之路2》内UI文件（.res文件）的方法。
二、准备阶段
1. 安装UP的《基础工具3件套》。
2. 下载 Notepad4（下方链接提供下载，如你已有习惯的文本编辑器可以跳过）
3. 为了快速在游戏内观察和修改HUD，优化制作流程避免重复操作（即实现HUD热重载），我们需要对求生源文件进行处理：
设法将所有游戏UI文件（RES文件）从游戏源文件内提取出来，让UI文件变成独立文件，并让游戏识别这些独立文件，只需一次按键或一条指令就可以实现HUD热重载，让改动效果立即显现出来。
原教程花了很大篇幅介绍处理过程，UP为此制作了《求生HUD调试模式切换器》。只需下载网盘内附件，按照指示对游戏源文件进行处理即可。
下载链接【码m6f3】：https://pan.baidu.com/s/17lEscXLuH2mneE9it12w0w&pwd=m6f3
《求生HUD调试模式切换器》
三、UI、HUD的基本构造、术语解释
1. 元素（Elements）
（1）元素的结构
游戏的RES文件内有各种元素，元素内有各种元素参数，控制着元素的表现和功能。除了部分特殊元素外，绝大部分元素的共同元素参数如下：
（2）元素的画布
元素的基础画布为640x480像素。不在此分辨率的情况下，xpos/ypos/wide/tall每增减1单位，其实际在屏幕上反映的变化并非都是1像素，因此这四项参数存在“缩放倍率”。例如1920x1080情况下，xpos增加100，会使元素向右移动225像素，以下是“缩放倍率”对照表：
由此可见，“缩放倍率”= 分辨率高度 / 480
（3）元素的锚点
元素的锚点都是在左上角，xpos/ypos调整的是锚点的位置。比如增加wide/tall，会让元素以锚点为原点向右/向下扩展。
（4）元素的位置、大小数值前缀
元素的xpos/ypos/wide/tall四项参数，可以添加“数值前缀”，比如：
"xpos" "r100"，"ypos" "c-100"
不同前缀功能具体如下：
2. 样式定义文件（Scheme）
游戏的UI样式定义文件（resource\clientscheme.res、sourcescheme.res、chatscheme.res、l4d360uischeme.res）包含了一系列关于颜色、文字、图案样式等的定义参数。
（1）颜色定义参数
颜色参数的格式如下：
"你定义的颜色名称（必须英文）" "R G B A" //（红 绿 蓝 不透明度，范围0~255）
比如定义一个名为“Pure_Green”的纯绿色，可以写成：
（2）文字定义参数
文字定义的格式如下：
请注意：
① 求生 HUDMOD 只能修改英文字体，不能修改英文字体以外的字体样式。如要修改，请参考本人的修改中文字体教程：
② 求生有时加载不到某些系统字体，我们需要将想要的字体（TTF、OTF等）转换成求生能识别到的字体格式，并放入 HUDMOD 中。请参考以下视频教程：
3. 布局文件（scripts\hudlayout.res）
在scripts文件夹内，有一个名为hudlayout.res的文件，控制着除了主菜单外，游戏内的几乎所有元素布局的大小位置，如下图所示：
4. 限定条件（Fliters）
（1）限定条件的解释
在元素参数、元素名称结尾，有时能看到中括号对，比如[$X360]、[$WIN32]、[$DEMO]等，这些是针对不同系统平台、不同分辨率、或者是不同语言情况下的限定条件。在结尾加上限定条件后，整条参数/整个元素只会在限定条件返回“真值”的情况下生效，返回“假值”则该参数/元素被忽略。
一般来说，限定条件可以不写，除非你想同时适配不同系统平台、不同语言。
（2）常见的限定条件解释
（3）限定条件的逻辑判断
在限定条件的中括号内，可以添加特定的逻辑符号，实现简单的条件逻辑判断，求生可用逻辑符号见下方：
以下是使用限定条件的常见例子：
5. 按钮（Buttons）
游戏的按钮可以执行不同的命令，它的结构如下：
其中，按钮具有不同的样式，这些样式可以在主菜单样式定义文件里找到（l4d360uischeme.res）：
6. 子菜单（Flyout Menus）
游戏的按钮除了用来执行命令，还可以用来打开一层子菜单：
子菜单由两个元素组成：一是用来调用子菜单的按钮元素，二是子菜单布局元素。其中子菜单布局元素有一个与其对应的UI文件，它们的结构如下：
子菜单布局元素调用的UI文件：
同时，还可以实现多层子菜单嵌套，原理是：在打开的子菜单内部的一个按钮，该按钮调用另一个子菜单。但游戏最多同时打开一个子菜单，因此之前打开的子菜单会被之后打开的覆盖掉。
为了实现多层子菜单，我们需要在同一个RES文件内，同时写好子菜单按钮元素和子菜单布局元素，详见下图：
7. 滑条和复选框（Sliders & Checkbox）
游戏内只有一种样式的滑条，滑条可以实现通过鼠标控制某条指令的数值，它的结构如下：
除了MOD管理页面内的复选框，求生UI并没有可以自定义的、真正意义上的复选框。复选框可以搭配滑条使用，作用是提示某条参数对比给定的参考值是否不同，如果不同，复选框内就会打钩。它的结构如下：
8. 贴图（VGUI Images）
（1）给UI添加一个贴图元素
贴图元素是一种简单的元素，结构如下：
注意事项：
① image参数指定的路径必须是VMT文件，不能是VTF文件。VTF路径只能由VMT里的$basetexture参数指定。
② 如果你想调用的贴图不在 materials\vgui\文件夹内，比如你的贴图文件路径是 materials\20cat\test.vmt，可以在贴图路径参数内加上“../”的前缀，表示目录起始位置在 materials\，参数如下：
... "image" "../20cat/test" // VMT贴图路径 ...
（2）给贴图元素添加按钮
游戏并没有真正意义上的“贴图按钮”，但我们可以通过在贴图元素的上方叠加一个按钮元素，来间接实现贴图按钮的效果。结构如下：
（3）贴图定义文件（scripts\hud_textures.txt、mod_textures.txt）
有两个文本控制着 HUD 调用的一些贴图定义，其中：
① hud_textures.txt 主要用于修改自带准星贴图，比如近战准星（crosshair_default）、特感技能准星（PZ_开头的）。
② mod_textures.txt 主要用于修改游戏教学提示贴图（iconsheet的row1至row4）、游戏小贴士贴图（tip开头）等。
贴图定义是游戏代码写死的，游戏不会识别新增的贴图定义。贴图定义的结构如下：
9. 矩形（Panels）
矩形元素一般用于充当其他元素的背景。结构如下：
10. 文本（Labels）
文本元素结构如下：
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各部分的知识。接下来：
1. 建议先从工坊下载一个较为完整的HUD，比如UP本人的《20HUD》，将MOD解包之后再结合本专栏来对HUD进行自由修改，借此来学习HUD制作。为了避免重复造轮子，不建议从零开始制作HUD。
2. 将游戏设置为“无边框窗口”模式，这样能快速地在游戏和文本编辑器之间切换。
3. 进入地图后，每当你修改好文件，可以在游戏内按键盘上的减号（-）来热重载HUD。如果你正位于主菜单（或者正在修改主菜单部分），按键快捷键可能会失效，此时打开控制台并输入“re”回车也可以热重载HUD。请注意：修改过样式定义文件内的文字定义参数（比如clientscheme.res等样式定义文件内的fonts参数），热重载无法刷新这些参数，需要重启游戏刷新。
感谢阅读本教程，若有帮助请记得三连。祝你创作愉快！
快三连鸭~~~
