4.修改MOTD窗口背景
现在轮到我们对MOTD窗口背景开刀了,首先看一下补全后的textwindow.res,我们发现里边多了很多panel。Valve在开发CS起源的InGameUI窗体时,将这个窗体一共分成了12个部分:

细心的各位已经发现了,TopSolid对应LowerMiddleSolid,而不是BottomSolid,你丫是不是写错了!其实这个是Valve的开发人员写错了,我们只能将错就错。
以其中的TopLeftPanel为例,这是MOTD窗口左上角的控件:
"TopLeftPanel"
{
"ControlName" "Panel"
"fieldName" "TopLeftPanel"
"xpos" "126"
"ypos" "20"
"zpos" "-20"
"wide" "10"
"tall" "10"
"autoResize" "0"
"pinCorner" "0"
"RoundedCorners" "15"
"pin_corner_to_sibling" "0"
"pin_to_sibling_corner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"image" "gfx/vgui/round_corner_nw"
"imageAlignment" "center"
"preserveAspectRatio" "0"
"filtered" "0"
}
其中"image" "gfx/vgui/round_corner_nw"这一项代表左上角的背景图,我们可以自制,并将这里的路径改掉,也可以从游戏中提取并修改。这个路径是以materials\vgui目录为基础的。下边我们一起来修改一下,偷点懒,我们就用默认的路径和文件名,但是背景图片我们自己来做。
插一句, MOTD窗口主体,实际上是info控件来控制,后续教程中TeamMenu和BuyMenu等也是如此,改变这个控件的宽高可以改变MOTD窗口的大小,也就是说,改变info控件的参数值同样会改变上下左右clear区域的大小,如果你想这么做的话,最好删除textwindow.res中的上下左右clear控件,让引擎加载时候动态生成。提供给大家这个思路,这里我们就不修改了。
根据image参数中的文件名,我们用GCFScape打开cstrike_pak_dir.vpk,提取materials\vgui\gfx\vgui下边的round_corner_ne.vmt、round_corner_nw.vmt、round_corner_se.vmt、round_corner_sw.vmt和solid_background.vmt,放到followme\materials\vgui\gfx\vgui下边。
大家一路跟着教程改过来,想必提取的vmt文件放在哪里已经无关紧要了,不管放在哪里,文件名如何,我们都可以随心所欲修改,使游戏能够找到,这也是这个系列教程最终的目的。Source引擎都是一样的,所以大家不要局限在某个控件怎么修改,为何我没有带大家改成其他的形状、颜色。大家会发现到现在为止前边教程的内容时不时就会用到,而前边教程讨论过的内容,之后也只是一笔带过,而且我们教程的速度会越来越快。
回到修改上来,我们刚才提取了MOTD窗口的四个角和中间的背景VMT文件,vtf文件我们自己来做,我们先来做一个主窗口的背景,然后再处理上下左右边角。主体背景是solid_background.vmt,我们做一个VTF文件预览一下:

大家发现问题了吧,你修改的背景图片,会被不同区域重复调用。我想现在大家应该能理解为何我们要补全textwindow.res了吧。如果补不全,只修改对应的背景文件就会出现上述现象,因为在引擎中,这几个部分的背景文件都是同一个,我们将textwindow.res中的控件补全了,就可以通过修改不同控件图片的名字,实现不同控件调用不同图片的功能。
下边我们一起来把这个背景做的更好吧。
我们首先来查看一下每个控件的宽度和高度,前边已经介绍了主窗体由哪些控件组成,等下在制作背景图片时,我们需要使用这些宽度和高度。
BottomSolid的宽度为600,高度为376,LowerMiddleSolid的高度为10,UpperMiddleSolid的高度为42,TopSolid的高度为10,还有BottomSolid和UpperMiddleSolid有高度为2的缝隙,所以整个窗体背景图的比例应该是600*440,即15:11.
用PS打开你想要的背景图片,裁剪为15:11比例:

使用切片工具,按前边介绍的,将整个背景图分成9个部分(包括中间的缝隙,如果你不想要缝隙,可以编辑textwindow.txt中两个控件的y坐标和高度):

下边我们修改每个切片的大小,首先要看一下这个背景图片裁剪后的长宽,可以使用切片选择工具,右键单击最大的切片,选择编辑切片选项查看:

我们记住这个值,同时查看下textwindow.res文件中,对应控件(BottomSolid)的宽度和高度,这里是600*376,这样一来,我们就能算出各个控件和切片之间的比例(1472/600=2.453333),按照相同比例来修改每个切片的宽高。我们修改四个角的切片宽高为25(四舍五入为整数),并把顶部中间和底部中间的切片调整到和四个角的切片接起来。

然后是调整中间两个切片的大小,按照2.45333的比例,修改中间上方的切片为1472*103,缝隙处切片为1472*5,拼接好几个切片后,将最大的切片和上方接起来。
调整完切片大小后,点击文件-存储为Web所用格式,选择原稿,此时在预览窗口中拖动鼠标将切片全部选择,接着预设选择PNG-24,图像比例选择原始(断开图标),最后点储存:

此时会打开保存窗口,保存位置选择桌面,选项选择仅限图像、默认设置和所有切片,保存。

接下帖