Steam皮肤制作指导 入门篇

引言

本文旨在指♂导你如何制作Steam皮肤，它可能不会涉及到编辑皮肤的方方面面，但它可以帮助你起步，并且最终你能制作一个改变大多数颜色、样式、使用你喜欢的图片的皮肤。

准备工作

1. 选择一款自己喜欢的文本编辑器

vscode个人用的比较习惯，大家随意。如果你想试试，可以按照下面的步骤进行安装。

当然想用windows自带的笔记本也是没问题的。

1. 前往 vscode 官网
2. 点击绿色的 Download for Windows 按钮
3. 安装

安装完成之后，还需要一点点的设置。

1. 打开vscode
2. 选择拓展，并搜索 chinses
   
   

   image.png
3. 选择有中文（简体）的那一个，install（安装）。重启vscode就有了中文。
   
   

   image.png
4. 点击左下角的设置按钮，选择设置，打开一个设置界面。
5. 在搜索框中搜索文件关联，点开唯一一个搜索结果的在setting.json中编辑
   
   

   image.png
6. 单击唯一一条结果前面的笔形状按钮，选择复制到设置。右边的用户设置就会出现一条同样的设置语句。
   
   

   image.png
7. 我们做一点自己的修改，这是修改后的样子。

{
  "files.associations": {
      "*.layout":"java",
      "*.styles":"java"
  }
}

这样我们就将steam皮肤的配置文件.layout，.styles文件关联到了Java，有一点高亮。便于我们观察。

3. reboot.bat

我们对皮肤的样式进行修改之后，是需要重启steam客户端才能看到效果。所以频繁的重启就在所难免，这个文件是我用来快速重启steam的，如果你也想干我一样，需要配置一下Steam的启动路径。

首先新建文本文件命名为reboot.bat，文件内容如下：

taskkill /f /t /im Steam.exe
start E:\Steam\Steam.exe -dev
exit

第二行的 E:\Steam\Steam.exe 需要替换为你电脑Steam.exe的路径，Steam.exe不出意外的话，应该在Steam的根目录。

完成后看起来应该是这样的：

taskkill /f /t /im Steam.exe
start X:\xxx\xxx\xxx\Steam\Steam.exe -dev
exit

入门

• 注意： 下文提到的文件路径如果没有带盘符，你应该认为它是基于Steam根目录的相对路径。假如我提到一个路径：skins\skins_readme.txt，它实际上指的是：E:\Steam\skins\skins_readme.txt（E:\Steam\为我的Steam根目录）。

1. 一个属于自己的皮肤

创建一个新皮肤的方式非常简单，只需要复制resource/styles/steam.styles到skins/HolleSkin/resource/styles/steam.styes,一个崭新的皮肤就完成了，HelloSkin就是皮肤的名称。尽管它不会改变任何样式。但是它确实是一个皮肤。

steam.styles是一个入口，都有的样式文件都可以通过它联系起来，Steam在加载皮肤会从这个文件开始，一步一步的选择找与之有关联的文件，首先基于我们的皮肤文件（HelloSkin）中寻找，没有找到就去Steam根目录找。

Steam皮肤的样式文件散落在steam的所有目录中，其中绝大部分都在resource文件夹中。制作皮肤实际上就是修改这些样式文件，当然不是直接修改这个文件本身（即使你修改也不会生效）。所以我们会先复制一份到我们的皮肤文件夹中，再去修改它。

本文会从如何找到样式文件和如何修改样式文件2个方面讲解Steam皮肤制作。当然也我自身的一些经验。

2 颜色的表现形式

每一个皮肤都会从布局和配色来展示它的独特魅力，这里我会先介绍一下皮肤制作中颜色的相关知识。

如果尝试创建皮肤的时候，有打开过steam.styles（用记事本方式打开），下面这段代码你一定不会陌生

steam.styles
{
  colors
  {
    // colors section can include colors in "R G B A" form, or references to already defined colors;
    // it can also include just general settings controls can pull from for extra customization

    black="0 0 0 255"
    dark="28 33 42 255"
    almostBlack="22 25 28 255"

• 注意：以//开始的行，被称为注释，这一行在程序运行的时候不会被执行。有它不多，无他不少。下面我要解释的这句话就是注释

这里我截取了steam.styles的开头。里面有这样一句话 colors section can include colors in "R G B A" form, or references to already defined colors,大概可以这样理解：颜色部分可以包括“R G B A”形式的颜色和已定义颜色的引用。这句话阐述了颜色的两种定义方式。

2.1 自定义颜色

接着看下面：black="0 0 0 255",这实际上是颜色第一种定义方式，以rgba的形式存在。（rgba大家感兴趣的话可以去这里了解），black就是这个这个颜色的名称，0 0 0 255就是这个颜色的值。

red="255 0 0 255"

上面是我新定义的一个颜色，颜色都必须通过这样的形式被定义，一个名称，一个等号和4个数字，且这4个数字必须用单个空格隔开以及被一对英文的引号包裹。前3个数字定义的颜色本身，最后一个数字定义了颜色的透明度。他们都必须在0~255之间。大部分时间把透明度保持在255是明智之选。

除此之外最好在在定义颜色的时候加上一个注释，就像这样

// 文本颜色
myColor="255 0 0 255"

当你下次看到它的时候，马上就能会想起来它的干什么的。确认过眼神，是我要找的颜色。

2.2 颜色的引用

在讲解颜色的引用之前，先先动动手。使用vscode的搜索功能，Ctrl + F（其他文本编辑器一般来说也是，之后我就不再特别说明），搜索“none="0 0 0 0"”，我现在的Steam客户端版本（2018-10-2）来说，它会出现在14行。

steam.styles
{
  colors
  {
    // colors section can include colors in "R G B A" form, or references to already defined colors;
    // it can also include just general settings controls can pull from for extra customization

    black="0 0 0 255"
    dark="28 33 42 255"
    almostBlack="22 25 28 255"
    almostBlackTrans="22 25 28 204"
    white="255 255 255 255"
    grey="142 152 167 255"
    none="0 0 0 0"
    yellow="255 255 0 255"
    offwhite="159 162 168 255"
    dullgreen="216 222 211 255"

我们做一点简单的修改，修改后的结果如下

steam.styles
{
  colors
  {
    // colors section can include colors in "R G B A" form, or references to already defined colors;
    // it can also include just general settings controls can pull from for extra customization

    black="0 0 0 255"
    dark="28 33 42 255"
    almostBlack="22 25 28 255"
    almostBlackTrans="22 25 28 204"
    white="255 255 255 255"
    grey="142 152 167 255"
    myColor="255 0 0 255"
    none=myColor
    yellow="255 255 0 255"
    offwhite="159 162 168 255"
    dullgreen="216 222 211 255"

之后将Steam的皮肤替换为之前创建的皮肤HelloSkin，重启试试。

重启后的效果

撇开辣眼睛不说，效果还是很明显的。这就是颜色的引用。

    myColor="255 0 0 255"
    none=myColor

注意看代码，我先定义了一个颜色myColor，然后把myColor的值传递给的none。换句话说，none引用了myColor的定义。像这种一个名称后面接一个“=”，后面在接另一个已经定义好的颜色的名称。就是颜色的引用。

这种引用是可以无限传递下去的，就像下面的myColor4一样是有效的。哪怕我写到myColor100，依旧好使。

    myColor="255 0 0 255"
    myColor1=myColor
    myColor2=myColor1
    myColor3=myColor2
    myColor4=myColor3

3 开启Steam开发者模式

前面有提到过，皮肤的制作实际上就是对控制这些样式的文件进行修改。如何找到这些文件就是一个难点。好在v社提供给我们一个方式，这就是开发者模式。

这个小节我会简单的介绍开发者模式，以满足简单的开发需要。之后会有更详细的介绍。

开发者模式可以快速定位控制某个样式的配置文件的位置。尽管它不能总是准确的找到你所有想要修改的地方，但他确实能给你带来很大的便捷。

如何开启？

1. 鼠标右键steam的快捷方式，选择属性
2. 然后在快捷方式一栏的目标中加上 -dev，注意-dev前面有个英文空格

完成后大概是这样的：

开发者模式-快捷方式.png

通过这种方式进入Steam就开启了开发者模式，开启的标志就是多了一个CONSOLE选项。

进入开发者模式标志

4 定位一个样式

处于开发者模式时，按下F6会弹出一个vgui layout debugger（之后内容vgui就是指此窗口）。

vgui layout debugger

在按一次F6,它就会关闭。

在关掉它之前，你可以试着在Steam界面上点击，会发现你什么也做不了，反而会出现一个一个的红框，这些红框就是在提示你，这是一个样式控制的范围。

我们先点一下游戏详情中的游戏名称，当你回过头去看vgui，vgui上出现一些变化。

出现的变化

先看看左边：

左边

这是变量列表，就是它们决定这样式。

再看看中间：

中间

这是前面变量的具体实现，也就是我们需要修改的部分。当然在这里是不能直接进行修改的。

最后看看右边：

右边

这是文件列表，这些控制样式的变量就在这些文件中被定义。单击这个文件名gamepage_details_gametitleheader.layout，就可以打开它，我们可以使用vscode来打开它。

右键单击上图箭头的地方，在弹出的菜单中选择在资源管理器中显示，这样我们就能够在资源管理器中找到它。

右键菜单

现在我们要做的就是复制它到我们的皮肤文件夹中，然后做出我们的修改。

image.png

复制的时候，假设Steam根目录和我们的皮肤文件夹是同一等级的。而我们要做的就是，使这个文件相对于它们处在同一位置，下面这张图应该可以帮助你理解。

位置对比

我们打开刚刚复制过去的那个文件，尝试使用文本搜索功能，找找之前vgui中提示我们的变量headertextlarge。不出意外可以找到这段代码。

headertextlarge
{
    padding-bottom=5
    padding-top=5
    font-size=24
    textcolor=Text
    font-family=basefont
    font-weight=400 
    bgcolor=none
}

请注意这里面有这样一句textcolor=Text，咦？结合color这个单词，是不是有点熟悉？

没错！这里就是之前提到的颜色的引用，后面这Text就是被引用的一个颜色，它被定义在Steam.styles中，Steam.styles作为一个入口，里面定义的颜色是可以全局使用的。我们尝试把它修改成这样子：

textcolor=red

重启就可以看到效果。

被修改的游戏名称

5 是tga，不是png/jpg

如果您是ps大佬，以下内容可能引起不适，请略过这个部分。

一提起图片，往往会关联到png和jpg，比如我是一个没有感情的杀手.jpg。Steam却不吃这一套，需要tga格式的图片才能喂饱它。

由于前面已经过滤掉了ps大佬，我可以放心的说了。“我不是针对谁，在座的诸位都是垃圾”。所以我准备了一套行之有效的图片转换方案。

访问这里，将目标格式调整为TGA，选择要装换的图片（图片最好和自己的屏幕分辨率一样）。

image.png

重要的地方我已经标上了，然后点击转换就可以。

image.png

成功之后会就可以在转换结果看到转换后的图片，点击就可以下载了。

5.1 更换图片

我们可以在graphics文件夹中找到一个叫clienttexture2.tag文件。把他复制到我们自己的皮肤文件夹中（之后我会用复制到HelloSkin中来代替这句话）。接着选择一张自己喜欢的图片，这张图片的分辨率要尽可能和自己的屏幕的分辨率一样。将它转换为tga格式。

image.png

我好了，你们呢？

将转换后的tga改名clienttexture2.tag，并将它复制到skin/HelloSkin/graphics/。覆盖之前复制过来的图片。然后重启Steam查看效果。

效果

Steam上面出现一片草原，没错Steam上面被你搞绿了！

6. Layout文件

layout文件是Steam皮肤的布局文件，具有扩展名“.layout”，位于Steam客户端的“resource / layout /”目录中。

layout文件有4部分组成，分别是：controls（控制器）、styles（样式）、colors（颜色）、layout（布局）。

image.png

幸运的是作为入门部分只需要了解style和colors两个部分就好了。

让我们开始吧！

6.1 语法基础

layout文件是按照一定的格式（语法）进行编写的。如果对csss熟悉的话，这一部分内容将会相当的简单。

• 语法： 大括号内的内容被视为一个整体

  

  image.png

  上图中被选中的被选中的部分是对AddGameButton这个样式的定义，我之所以说AddGameButton是一个样式，它是被放在紧接着的大括号内的。

• 语法：大括号是可以嵌套的

  

  image.png

  图中红框是一个整体，属于对AddGameButton的定义，蓝框是对render_bg这个属性的描述。

• 语法：每一个属性遵循 key=value的形式或者key{value}的形式

  其中key是预先定义好的一些关键字，value则是对key的描述

• 语法：// 注释，// 后面的部分（单行）包括 // 本身，会被程序忽略。

• 语法：设备标识符

  我们从刚刚那张图片上单独拿出一句：

  font-size=14
  font-size=13 [$OSX]
  

  在一个样式中，原则上一个关键字只能被使用一次，很明显这次是个意外。同一个关键字被使用的两次。仔细观察会发现他们之间还是有些许区别。第二句后面有[$OSX]这么个玩意，它就是设备标识符。表示在指定设备上，这条定义才会生效。

• 特殊属性：render 和 render_bg

  一般的属性都是key=value形式的，只有这个两个属性比较特殊，采用key{value}的形式，这两个属性的定义也稍微的复杂些。

  他们是用来指定绘制背景的指令列表。它们是按顺序完成的。先看一段代码：

    render_bg
    {
        0="gradient( x0, y0, x1, y0+175, ClientBGTop, DialogBG )"
        2="image( x0, y0, x1, y0+175, graphics/clienttexture2)"
  
        3="fill( x0, y0+175, x0+20, y1-76, DialogBG )"
        4="fill( x1-20, y0+175, x1, y1-76, DialogBG )"
  
        5="fill( x0, y1 - 76, x1, y1, DialogBG )"
    }
  

  =前面的数字据value的官方文档是这样解释的

  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.

  大概意思就是：这些数字只是公共解析库中一个工件，他们一点也不重要，甚至相同也无所谓。

  我的建议是，请确保他们不一样。至于原因，希望有一天你能自己遇到这个问题。假如你能遇到这个问题，我觉得你应该对皮肤制作颇有研究了。

  示例代码中gradient、iamge、fill用来指定渲染方式，gradient为垂直渐变、image为图片、fill为单一颜色填充。

  指令中的x0、y0、x1、y1以及x0+1这种类型的参数用来指定渲染区域x0、y0、x1、y1用来指2个固定坐标(x0, y0), (x1,y1)，后面增加或减少的数字用来代表单位为像素的偏移量。

  (x0, y0), (x1,y1) 确定的渲染的区域，以这两个点为对角顶点且边与显示器的边垂直或者平行的矩形，（希望我没有捏造数学名词）。

image.png

这是x0,y0,x1,y1代表的区域

image.png

蓝色区域的可以使用x0+30, y0, x1, y1指定，也可以用x1-50, y0, x1, y1指定。

0="fill(x0+30, y0, x1, y1, cyan)"
1="fill(x1-50, y0, x1, y1, cyan)"
2="fill(x0+30, y1-50, x1, y1, cyan)"
3="fill(x0+30, y0, x1, y0+50, cyan)"

对于上图的这种情况而言，上面的4条指令作用完全一样，其实完全可以写出更多具有同样功能的指令，好在一位坛友及时出现……

关于渲染区域我觉得我该说的都说了，剩下的看各位的造化，该讲解最后面的参数了。

最后的参数根据渲染方式的不同数量和类型也有所不同，大致如下表：

渲染方式	参数1	参数2	说明
fill	颜色	无	无
gradient	颜色1	颜色2	有颜色1渐变到颜色2
image	图片位置	无	相对皮肤文件夹的相对位置

两种渲染颜色的方式没什么好说的，关键看一下图片的渲染方式，

2="image( x0, y0, x1, y0+175, graphics/clienttexture2)"

先来找找这张图片

image.png

此时bbq为的电脑的steam根目录。位置其实就是相对steam跟目录的相对位置。或者相对你的皮肤文件的根目录。

7 完善HelloSkin

说了这么多，实践一下吧。

接下来我们会完善我们的第一个皮肤，完成后大概是这样的：

image.png

这是现在的样子：

image.png

区别不大，只是能够完整的显示我们心爱的壁纸

利用F6和vgui，发现我们点击的区域被uinavigatorpanel.layout（layout文件绝大多数在resource\layout中）中的grouper样式控制。

image.png

找到这个文件，并把它复制到我们的皮肤文件夹中。

再来看这个样式的定义：

grouper
{
    bgcolor=none
    render_bg
    {
        // background fill
        0="fill( x0 + 2, y0 + 1, x0 + 273, y1 - 1, clientgrouper )"
        1="fill( x0 + 279, y0 + 1, x1 - 10, y1 - 1, clientgrouper )"
    }
}

我们把背景渲染的部分注释掉。（修改自己皮肤文件夹中的文件）

grouper
{
    bgcolor=none
    render_bg
    {
        // background fill
        // 0="fill( x0 + 2, y0 + 1, x0 + 273, y1 - 1, clientgrouper )"
        // 1="fill( x0 + 279, y0 + 1, x1 - 10, y1 - 1, clientgrouper )"
    }
}

重启看看效果。

image.png

上面那个条条没有了！

image.png

接下来你可能会点这个区域，同样的我们找到steamrootdialog_gamespage_details.layout，并把它复制到HelloSkin中，打开找到DetailsBorderPanel。

        DetailsBorderPanel
        {
            
            bgcolor = none
            render 
            {
                // background gradient




            }
        }

??? 没有？先放下手中的板凳，慢慢说。我们再回过头去研究一下vgui

image.png

请注意，这次我将标签切换到了DETAILS项了，这里的内容有点复杂，涉及到进阶篇的内容了，这里先简单的讲解一下。

蓝色的框框是样式的层级关系，可以称下面的为父样式，上面的为子样式。

青色的框框是左侧样式所在的父容器的其他样式，由于样式是一个一个渲染的，所以会出现两个样式（控件）渲染同一片区域。
通俗一点就是，就可以把这个当成瓶装饮料，瓶子有颜色，那不管饮料什么颜色，看起来都是瓶子的颜色，瓶子没颜色，看起来就是饮料的颜色。只有瓶子和饮料都是透明的，这瓶饮料看起来才会是透明的。

所以我们试着搜索一下“GamePage_details”，在style下面找到一个：

CGamesPage_Details
{
    bgcolor="none"
    inset="0 0 0 1"
    render
                {
                }
    render_bg
    {
            0="gradient( x0+2, y0+2, x1-1, y1 - 1, dialogbg, almostblack )"
            //1="gradient( x0 +2, y0+2, x1-1, y0 + 20, backgroundstartsubtle, none )"
    }
}

试着将背景渲染注释掉，重启steam看看效果。

image.png

很好，更进一步了！

image.png

剩下的试着自己动手试试。

 // 防剧透

接下来你很可能会点到这个区域，然后去改对应的style，改完是不是发现没效果，嘿嘿，体会到了人生的不易了吧。

首先点击这块区域是没有问题的，但是这里涉及到了一些高级操作，在这之前需要做另外一个事情，将steam根目录先的resource文件夹全部复制到HelloSkin中，要小心不要让之前的文件被覆盖。

在文件管理器中右击layout，用vscode打开

image.png

然后回到vgui，切换到DETAILS项。

image.png

记住Parents中的CSteamRootDialog，你可能会好奇，为什么不是其他的了？因为其他的不是。

回到vscode面板，全局搜索它，

image.png

找到这么一段代码：

CSteamRootDialog
{
    bgcolor=none

    render_bg
    {
        // top area and graphic

        0="gradient( x0, y0, x1, y0+175, ClientBGTop, DialogBG )"
        2="image( x0, y0, x1, y0+175, graphics/clienttexture2)"

        3="fill( x0, y0+175, x0+20, y1-76, DialogBG )"
        4="fill( x1-20, y0+175, x1, y1-76, DialogBG )"

        // fill in the bottom area
        5="fill( x0, y1 - 76, x1, y1, DialogBG )"
    }
}

设置注释一下样式中背景的渲染，重启steam试试。

image.png

恭喜你，这也许是你人生第一个自己弄出来的bug（指写代码层面），为什么呢？

等等！刚刚那段代码，好像有个东西在哪里见过。

2="image( x0, y0, x1, y0+175, graphics/clienttexture2)"

这个clienttexture2不就是之前的那张图片嘛。
把这个注释去掉，再试试看。

image.png

恭喜你入门篇毕业了！