cs起源吧 关注:84,947贴子:1,798,030
  • 13回复贴,共1

CS起源不完全修改教程第七弹 - MOTD修改(InGameUI窗体修改方法1

只看楼主收藏回复

CS起源不完全修改教程第六弹 - InGameUI颜色修改
https://tieba.baidu.com/p/6683311564
上一弹教程中我们了解了clientscheme.res文件中的内容,从这一弹开始,我们一起来修改InGameUI和HUD。
新版本的CS起源中对MOTD的支持并不友好,如果你的MOTD是HTML格式的,可能会无法显示。因此这一弹教程我们只讨论文本MOTD。
MOTD的界面就是载入地图后第一个界面:


IP属地:山东1楼2020-05-17 18:49回复
    1.显示MOTD内容(这个不是重点)
    在followme文件夹下,新建一个txt文件,改名为motd.txt。双击打开motd.txt,写上你想要的内容,并保存为UTF-8无BOM格式(否则不支持中文)。


    如何修改颜色?打开followme\clientscheme.res,找到TextEntry部分,修改其中的内容,这里我们把文字修改成绿色的:
    TextEntry.TextColor "0 255 0 255"



    IP属地:山东2楼2020-05-17 18:53
    收起回复
      2.添加自己的图片
      和第四弹内容一样,如果我们不喜欢这个文字版的MOTD,那么完全可以无视1中的操作,自己做一个图片显示出来,方法和第四弹教程是一样的。
      用GCFScape打开cstrike_pak_dir.vpk,提取resource\ui\textwindow.res,放到followme\resource\ui下边,用文本编辑器打开这个文件。
      修改HTMLMessage和TextMessage两组控件的wide和tall参数值为0,使这两个控件隐藏。

      接着输入一个自己的ImagePanel组件参数:
      "MyMOTDImage"
      {
      "ControlName" "ImagePanel"
      "fieldName" "MyMOTDImage"
      "xpos" "76"
      "ypos" "116"
      "wide" "480"
      "tall" "240"
      "autoResize" "0"
      "pinCorner" "0"
      "visible" "1"
      "enabled" "1"
      "tabPosition" "0"
      "scaleImage" "1"
      "image" "MyMOTDImage"
      }

      使用VTFEdit新建一个名为MyMOTDImage.vmt文件,放到followme\materials\vgui下边,内容如下:
      "UnlitGeneric"
      {
      "$basetexture""vgui/MyMOTDImage"
      "$nolod" 1
      "$no_fullbright" 1
      "$ignorez" 1
      }
      接着用一个长宽2:1的图片(上边ImagePanel的宽高是2:1)制作MyMOTDImage.vtf,放到followme\materials\vgui下边。我们进游戏预览一下。

      大功告成。
      这个面板上也可以添加其他的内容,比如Label等等,就不再赘述了。


      IP属地:山东3楼2020-05-17 18:54
      回复
        3.为修改MOTD窗口背景做准备
        我们提取的textwindow.res属于残缺版本,丢失的内容通过引擎实时生成,所以我们先来补全这个内容。
        首先将textwindow.res备份一份,因为补全后的textwindow.res内控件的位置会改变,我们需要根据原始的textwindow.res中的参数来修改。
        打开游戏载入地图,停留在MOTD界面:

        此时按下<Ctrl>+<Shift>+<Alt>+<B>,打开VBME:

        点击一下Next,再点击Apply,最后点击Save,将textwindow.res中的控件补全,然后关闭游戏:

        现在我们再次打开textwindow.res,发现里边增加了太多的内容。
        将最上边的info修改成如下参数,并删除所有以frame开头的控件:
        "info"
        {
        "ControlName" "CTextWindow"
        "fieldName" "TextWindow"
        "xpos" "0"
        "ypos" "0"
        "wide" "640"
        "tall" "480"
        "autoResize" "0"
        "pinCorner" "0"
        "visible" "0"
        "enabled" "1"
        "tabPosition" "0"
        }

        接着对照备份的textwindow.res来修改,确认下HTMLMessage和TextMessage两组控件的wide和tall参数值为0,使这两个控件隐藏(虽然之前我们修改过,但是动态生成的控件参数可能会改变,所以我们要再次确认这两个控件是否隐藏)。
        修改MessageTitle、ok和我们增加的MyMOTDImage控件的x坐标为76:

        删除最后边的BuildModeDialog控件

        现在我们就把补全后的textwindow.res修正了,进游戏看一下有没有遗漏:

        所有控件显示正常,说明我们的补全过程没有错误。


        IP属地:山东4楼2020-05-17 18:59
        回复
          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,图像比例选择原始(断开图标),最后点储存:

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

          接下帖


          IP属地:山东5楼2020-05-17 19:04
          回复
            承前帖
            找到生成的图片(桌面image文件夹中),我们要修改四个边角为圆角形状:

            图片命名是按照切片顺序来的,所以我们很容易分清楚,我们将428799_01.png、428799_04.png、428799_07.png、428799_10.png这四个文件分别拖入PS中进行处理。下边以左上角01为例:
            将图片放大一些比如400%,切换到通道面板,新建一个alpha通道,选择椭圆选区工具,按住<Shift>+<Alt>键,以右下角为圆心画一个圆形选区:

            选择油漆桶工具,将选区填充为纯白色:

            保存图片为TGA格式,保存时需要勾选Alpha通道:

            同样方法制作其余几个文件,全部制作完毕后,我们把四个角的tga文件制作成VTF文件:

            分别保存为round_corner_nw.vtf、round_corner_ne.vtf、round_corner_sw.vtf、round_corner_se.vtf(n、s代表南北,e、w代表东西),并将这四个放到followme\materials\vgui\gfx\vgui下边。我们进游戏预览一下:

            四个角就做好了。
            接下贴


            IP属地:山东6楼2020-05-17 19:10
            回复
              承前帖
              接下来我们要将剩余部分也改掉,还记得刚才提取的solid_background.vmt吗?把这个文件再复制3分,连同这个分别改名为TopSolid.vmt、UpperMiddleSolid.vmt、LowerMiddleSolid.vmt、BottomSolid.vmt,VMT文件内的名字也要改,千万别忘记了。


              接着就可以把剩下的图片导入了,导入时把缝隙的那个图片,也就是428799_06.png删除,我们不需要这个。保存vtf文件时候注意文件名不要出错,不要像Valve一样,自己整混了。

              当然现在还不算完,我们还要编辑textwindow.res,把TopSolid、UpperMiddleSolid、LowerMiddleSolid、BottomSolid这几个控件的背景图片改掉:

              现在我们进游戏看一下:

              现在就美好多了。
              但是仅仅修改上边四个控件的图片名是不够的,四个角的图片名字没有修改,这会导致其他窗口的四个角不太和谐:

              如果你希望所有窗口都使用这个背景,就不需要修改了,否则要把四个角的图片名字改掉,以保证每个窗口都有一个独立的背景。


              IP属地:山东7楼2020-05-17 19:21
              回复
                5.完善MOTD窗口修改
                现在看起来还不是很和谐,我们把之前自己增加的图片换成一个更和谐的:

                感觉有些太透明了,打开followme\resource\clientscheme.res,找到FgColor和BgColor,修改为如下值(如果忘了是什么请参考第六弹教程):
                "FgColor" "White"
                "BgColor" "0 0 0 230"


                现在进游戏看一下:
                FgColor改的是左上角的特警图标,这个特警图标是textwindow.res中,ExclamationPanel控件控制的,有兴趣可以修改一下。

                Counter-StrikeSource这个标题是CaptionLabel控件控制,这是一个Label类型的控件,可以通过修改clientscheme.res中,label控件的文字颜色来改变。修改label控件颜色会改变所有标签的颜色,包括购买菜单、团队菜单中的相关内容,所以在修改前,大家可以考虑一下自己想将主体定为何种颜色,这里我们就改成白色吧:


                接下贴


                IP属地:山东8楼2020-05-17 19:25
                回复
                  承前帖
                  最后,我们一起来修改确定按钮。
                  在textwindow.res中找到"ok"控件,修改其宽度为488(用640减去两个x坐标),y坐标为394(向下移动30个单位,原来是364),将default参数改为1(解决不能直接按回车跳过),并在控件最后添加如下内容:
                  "paintborder" "0 0 0 0"
                  "sound_armed" "resource/warning.wav"
                  "sound_depressed" "buttons/bell1.wav"
                  "defaultBgColor_override" "0 0 0 210"
                  "armedBgColor_override" "255 180 0 210"
                  "depressedBgColor_override" "174 123 0 210"
                  解释一下:paintborde是按钮边框,这里将其RGBA值全部改为0,隐藏掉边框;sound_armed和sound_depressed分别代表鼠标划过和鼠标点击按钮时的声音,根文件夹是sound文件夹,这里我们使用CS起源自带的两个声音,也可以自己添加,wav格式,采样率22050;defaultBgColor_override是按钮默认颜色;armedBgColor_override是鼠标划过颜色;depressedBgColor_override是鼠标点击颜色。

                  保存,我们进游戏看一下:


                  鼠标划过时候,按钮标题颜色就不太和谐了,我们可以修改clientscheme.res中Button控件为白色和黑色:

                  现在预览一下吧:


                  大工告成。
                  本弹教程就到这里。


                  IP属地:山东9楼2020-05-17 19:32
                  回复
                    支持一下


                    IP属地:广东10楼2020-05-18 01:31
                    回复
                      我这里没有followme文件啊


                      IP属地:河北来自Android客户端11楼2023-01-09 08:00
                      收起回复
                        标题:counter-strike source,如何更改成其他文字呢?


                        IP属地:广东12楼2023-10-13 21:51
                        回复