如何轻松搞定UI？红警2阵营UI制作全解析

ICE Lab Copyright 2020,All right reserved.

前排感谢xuetianyi（B站ID:Catlovers_）（有下划线）的有关UI制作的全部指导！以及日牛工头Zero Fanker（B站ID:Zero Fanker）在ImageShaper的功能与图片切分上的指导！感谢戴子玲（B站ID：戴子玲ヒメコ）在ta的个人粉丝群里转发的国外命令与征服2-3系列modder知名社区Project Perfect Mod（PPM）上的有关bmp转shp的相关文件。

（有关上一期的前言：上期的内容似乎写的有点太深了，再加上我写的比较匆忙，有很多字眼比如多贴图/子贴图等的区分做的并不是很好，结果也没人指出……所以我这次将会以比较让人能理解的方式与一个相对容易的话题来组成这篇专栏的内容）

前排提醒：本文一共14754字。

如今红警2玩家对mod制作的精良与否提出了更高的要求，其中UI就是一个非常重要的点。由于XNA CNCNET Client（通俗叫法也就是DTA，但是这个叫法其实是个误区，因为第一个使用这个客户端的mod是Dawn of the Tiberium Age，简称DTA，跟这个客户端的真实名称毫不相关）的普及，游戏的第一层UI的制作逐渐没那么必要了。所以本文只介绍游戏内相关阵营的UI制作方式。由于UI以图与动图为主，所以其本质就是shp文件。当然，仅仅知道这个并不完全够，如何从想法到图片到游戏内可以真真切切使用，这个过程的实现才能让modder从想法到真实。下面我就从结构，要求，细节等许多方面来把想法到现实的有关内容仔细填充，从而让每个会绘图也有想法制作UI的人实现他自己的想法。

如有错误烦请指出，如有补充欢迎留言，本人虚心接受所有建议并不胜感激。

首先介绍本文的目标，制作UI是指制作下图中的游戏内UI。

我们要想做出一个类似西木做的这种UI其实并不是一件很难的事，只要你的做图技术能过关，在加上了解了这篇文章讲的内容，我相信每个做图高手都能做出自己满意的红警2UI来。

下面是这篇文章的主要内容简介：

一.阵营UI源mix

二.mix内所需文件

三.UI整体制作与按钮特性介绍

四.切割功能区与功能按钮

五.杂项与最终效果

那么下面我就从上面的五个方面一个个的介绍，到底如何从0开始做一个合格的红警2UI。

一.阵营UI源mix

一个交互窗口的组成，必然是由代码与图像文件组成。虽然熟知红警2的人都知道有个配置文件叫UI.ini/UImd.ini，但假如你不需要改下边栏按钮的种类的话，这俩ini其实对游戏内左部UI的按钮位置是不起到任何作用，原因是左边按钮的位置其实是硬编码，所以我们必须遵守西木（红警2制作组，英文名Westwoods，同WW，ww）gamemd.exe里已经写好的UI坐标来划分我们UI的按钮位置，这是一个很重要的点。（后面继续说）

那么我们能改的东西是什么呢？外观，这也是显而易见的，直观感受你的作品与其他人的不一样之处的第一步就是外观。在自己做之前，我们先分析西木已有的源文件来判断一下制作一个ui需要做什么东西，很显然，我们需要用到XCC Mixer。

打开ra2.mix，我们可以清晰的看见这这些有关side的子mix：sidec01.mix，sidec02.mix，sidenc01.mix与sidenc02.mix，如果你打开的是尤里的复仇所用到的ra2md.mix，你还能看见另一个叫sidec02md.mix的玩意。

先解释一下这些mix的作用，首先是sidec0X.mix，这就是游戏内阵营UI的源文件所在地了，打开它，选对正确的色盘，我们可以轻松地通过预览图的样子肯定这就是UI的图像源文件。

而sidenc0X.mix我们打开后，却看见了一些很令人疑窦丛生的shp与正常红警玩家几乎不知道的的aud音频文件，因为这个mix对应的是不同阵营在红警2征服世界之旅中以及TS的部分残留的相关内容，而征服世界之旅在网际网络的菜单里，这也就是需要连线西木官方对战服务器才能使用的一个功能，鉴于这是个老游戏，许多人下载的是盗版而且西木已经凉了很多年了，所以现在玩红警2的人永远不会一睹其游戏内容的真容，这个mix我们也可以当成废物丢弃。

下面来到ra2md.mix中打开sidec02md.mix。相信许多人会直接推测这是尤里阵营的UI全文件，但许多打开了这个mix的人一开始肯定会惊讶地诧异于无比少的文件数目，当然，这个文件数目少的原因是因为西木由于尤里阵营出自于苏军阵营，所以在原版尤里复仇中，尤里阵营确实是默认使用sidec02md.mix里的内容，但尤里比起苏军的UI只更改了esc后左边的示意图与雷达光屏的尤里Logo，其他的玩意都没变。

那么问题来了，根据命名规则来看，XXXmd.mix应该是补充XXX.mix的东西才对，怎么在UI上用在了两个不一样的阵营上呢？说的没错，西木为了偷懒可谓是无所不用其极，如果你尝试在sidec02md.mix里企图增加同名shp来改变尤里UI的外观的话，你会发现苏军UI也会随之改变，并且由于色盘原因shp基本上会花掉。

而我们所熟知的许多红警mod的尤里新UI/第三阵营特殊UI或是第四阵营特殊UI都是存在的，难道说我们漏了什么重要的东西？没错，尤里拥有全独立UI的功能竟然需要扩展平台的支持比如Ares等才有的，看到这里请大家再次向西木致以真（wo）挚（cao）的（ni）问（ma）候（the letter between A and C）。

下面是Ares中有关UI文件的条目的解释：

所以很显然，许多mod能使用自定义第三阵营UI的原因是因为他们在第三阵营的后面增加了个Sidebar.MixFileIndex=3（这句话适用于rulesmd.ini）并把新阵营UI的文件打包成sidec03.mix来完成新UI的使用。

不过，这并不意味着sidec0Xmd.mix毫无用处，底下我们可以看见，如果我们在Ares中的阵营里加上Sidebar.YuriFileNames=yes这句话，游戏会优先读取sidec0Xmd.mix里的UI有关源文件来作为新UI。此处我所使用的中文版Ares2.0说明书对这里的翻译解释是有所偏差的，如果你的阵营的MixFileIndex是1或者3或者4，那么你在你的阵营ini中加上Sidebar.YuriFileNames=yes后使用的mix会分别是sidec01md.mix，sidec03md.mix与sidec04md.mix，而不是都使用sidec02md.mix。换句话说sidec0Xmd.mix的这个X所代表的数字与前面你定义的有关，而不是你写了这句话就自动强制使用2。

认清了我们需要做的是什么，下面我们就开始分析mix内的文件内容了。

二.mix内所需文件

首先说明，所有UI所用shp无需在art里注册。

我们打开mix以后，从上往下看可以看见许许多多的shp，在合理的根目录注册了红警后，打开XCC的上菜单的View-Palet-Auto，XCC就会自动匹配你看见的shp的色盘，让你看shp不再是花的。（记住！一定要在合理的根目录注册红警，合理的根目录是指game(md).exe，ra2(md).mix，ra2(md).exe，expand0Xmd.mix都存在的根目录使用一个图标长下图这样的玩意注册，换句话说，即使你的这个根目录只有这些玩意而不是一个完整游戏，这个根目录也会被XCC视作合法根目录，这点对自定义mod的FA地图编辑器的使用很有帮助，因为FA也是通过注册表来识别红警2的，在此我就不展开说明了）

选择好了色盘我们就可以打开mix了，值得注意的是，即使你选对了正确的色盘，有些东西一样会花，因为你读取这个mix里的shp的时候，XCC会自动选择sidebar.pal作为你shp的对应色盘，所以如果你看见了bkgdXX.shp（XX代指lg md sm，分别代表large，medium，small，而bkgd很明显是background的缩写）是花的时候，这个是因为这三个shp使用的色盘是uibkgd.pal而不是sidebar.pal所以花了，如果你看见了有些shp比如tabs.shp，power.shp，radar01/02.shp花了，这些则是废弃shpWW没用（做）上（到）的功能所以shp直接花掉了，但是源文件没删干净的后果，pbeacon.shp是联机里你可以指引队友有关位置所打的那个信标的shp，这玩意使用的单位色盘所以看起来会花。当然，并不是所有不花的shp游戏里就一定用到了，就比如下图的一些shp。众所周知西木会经常往玩家的游戏里塞各种没啥用的垃圾，比如某证券交易所和某玻璃大楼（说新加坡国会跟港口大楼的请先了解一下红警2是啥再去玩某个红警2的mod—心灵终结谢谢）

在尤里的复仇自带的sidec02.mix里，我们则会发现一些不一样的东西，首先是bkgdXXy.shp，比sidec02.mix的bkgdXX.shp多了个字母y，连其色盘uibkgdy.pal也是多了个y的版本。再者，雷达命名也从radar.shp改成了radary.shp，色盘从使用sidebar.pal改成了使用独立色盘radaryuri.pal，这是我们在自己做ui的时候需要注意的一点。不过因祸得福，因为西木偷懒，而苏军色盘与尤里色盘不一样，导致西木为雷达搞了个独立色盘，对于modder来说独立色盘意味着雷达的颜色可以与其他部分迥然不同，这也算是塞翁失马吧。

分析完了文件内容，那么我们该如何把文件对应进游戏呢？这个时候我们就需要去分析一下阵营UI的模块部分了，阵营UI我们可大概分成两部分，一部分是右部，分别含有雷达，金钱指示，电力指示，图标，十个按钮（分别是option按钮（热键：esc）diplomacy按钮（热键tab），sell按钮（热键L），repair按钮（热键K），建筑/防御/步兵/坦克按钮（热键：Q W E R）以及上下滚轮按钮（热键：鼠标滚轮上下）），图标区（背景有两个，一个是游戏中有图标的那个，一个是你按了esc以后背后是长条黑的那个），esc菜单选择区，esc菜单按钮（也就是你按了esc后选回到游戏，删除游戏，加载游戏等等的按钮的背景长条）；一部分是下部，分别含有背景导轨，展开按钮，功能按钮，没有任何功能而支撑长度的空白按钮，以及收起以后展开按钮右边对接的背景。很显然左边部分的图标区是不停地重复使用同一个shp而实现根据分辨率不一致从而显示栏数有改变，下图截图就只选用了一排来作为右边UI的示范，这也是我们待会动手做的时候的参考目标。

分析完以后我们就要把mix里的文件跟UI来对应上了，为了能更直观的展现对应关系，我特别用自己做的一个UI为底板P了一组示意图来展现对应关系。

声明：以下两张图的版权未经本人同意禁止转载。

在这里小提醒一句，你自己在做UI的时候就不必加入官方那些废弃的与无用的shp了，比如button11.shp，tabs.shp这种都是可以不做的，反正做了也用不着。

下面我就开始介绍每个shp的由来与功能，当然，此时此刻如果你想开始做UI的话就可以打开PS新建项目了。

三.UI整体制作与按钮特性介绍

如果你要制作右边UI的话，请创造一个168*366的画布，如果你要做下边UI的话，请创造一个680*32的画布。画布有了以后，我们就需要根据按钮的特性来确定UI图的帧数了。首先根据自己的想法，同时比对原版的UI照猫画虎，在加上简单的绘制，就能画出一个自己想要的UI来了。以下是本人做的UI示例（无按钮版）：

在做这个UI的时候，制作者需要相对考虑到静态切分与动态切分时的有关规则，这些规则我会在下一节详细描述。

同时，UI是有动作的，我们在玩红警2的时候可以看见，在我们的雷达由无到有的时候会有一段雷达闪烁动画，建筑造好或者是超武就绪又或者是触发导致建造栏闪动的时候中间的四个按钮会有闪烁效果，点下任意按钮的时候会有一个往下沉的感觉，这些都是动画制造的效果。我们需要根据动画来确定帧数，所以以下我给一个帧数表，可以方便想制作UI的modder们参考。

关于esc后左边的背景先说一个重点，因为现在大家电脑都好了，分辨率变得多样化了，所以如果你很多时候你按esc以后所显示的bkgdXX.shp都撑不到全屏。于是比如像MO这种mod都把bkgdXX.shp变成了一个空白shp，也就是说你按esc后左边是全黑。这个见仁见智，如果你想搞你就搞个图上去，觉得丑可以跟MO一样弄个空白shp上去。

1帧动画：

左边背景区：bkgdXX.shp

右区：credits.shp，top.shp，side1.shp，sdie2.shp，side2b.shp，side3.shp，addon.shp，pwrlvl.shp

下区：lspacer.shp，rendcap.shp，bttnbkgd.shp

这些shp都只有一帧，所以不存在动作，这些shp都是用来当作静态背景或是扩展填充的，所以都没有动画。值得注意的是pwrlvl.shp，它是填充在两格电力之间的那个黑条的动画，如果你需要你的电力显示两格之间没有中间的黑条阻断，你可以把这个shp变成全空白（0号色）

至于lspacer.shp，这个特殊的shp我放在这部分的最后说。

2帧动画：

右区：sell.shp，repair.shp，diplobttn.shp，optbtn.shp

下区：button00.shp到button10.shp（11没啥用就不说了）

这些shp都是两帧，不管是变卖维修选项外交或者是底部功能按钮，第一帧都是不点的时候按钮的样子，第二帧都是点击选中后按钮的样子。

3帧动画：

右区：sidebttn.shp，r-dn.shp，r-up.shp

下区：lendcap.shp

在这里不同按钮的帧数就有所区别了。

首先是sidebttn.shp，这个shp就是esc后按钮背景的那个长条，这个shp的第一帧是闲置帧，也就是你鼠标不按那个按钮的时候的那个帧。第二帧是经过帧，就是你鼠标在这个按钮上但是不点下去的时候的那个一般亮的帧，第三帧是点击帧，就是你按下去以后那个按钮变最亮的帧。

r-dn跟r-up是一组，他俩的第一帧是按钮可以工作的时候的帧，第二帧是按钮点下去的时候的帧，第三帧是按钮禁用时候的帧。在游戏中对应就是当你的单条建筑栏能显示齐你当前能造的所有东西的时候，上下箭头被禁用，此时显示第三帧；当你单条建筑栏显示补齐你当前能造的所有东西的时候，上下箭头被允许使用，此时显示第一帧闲置帧，此时当你点击这两个按钮的时候，被点击的按钮会显示第二帧活动帧。

最后是lendcap.shp，与r-dn与r-up的规则相同，第一帧是闲置帧，也就是你不点底下那个展卷按钮的时候；第二帧是活动帧，也就是你正在点底下那个展卷按钮的时候；第三帧是禁用帧，也就是你按了esc以后底下的按钮自动缩小并禁止展开的时候展卷按钮的样子。

自此，下区动画全部包括在内了，所以以下的shp全部为右区。

5帧动画：

tab00.shp-tab03.shp，powerp.shp

这里的shp动画里，前四个按钮都是5帧，前三帧除了上面的三帧动画一样1闲2动3禁以外，第四帧是亮的时候的闲置帧，第五帧是亮的时候的选择帧，同时，在按钮闪烁的时候会交替播放第一帧与第四帧交替来表示闪烁效果，按钮按下并闪烁的时候会交替播放第二帧与第五帧交替来表示按下去后的闪烁效果。

最后一个powerp.shp是个五帧动画，分别代表电力的五个颜色：黑，绿，黄，红，白。绿黄红估计玩家都注意的到，黑白有点特殊，白色是电力变动的时候紧邻着变动格子的第一个格子是白色，变动过程结束后白色会消失，至于黑色，我也没见过哪里用上了这一帧，可能是电力下降的时候白色分界线上方会有黑色帧短暂存在吧，暂时还不知道效果，做的时候直接按照原版来做就行了。

然后关于powerp.shp的高度，也是个值得说明的问题。原版的powerp高度是2像素，原因是因为两格之间有一个像素的pwrlvl.shp阻隔所以两像素高足够了，而如果你在弄新UI的时候要弄电力无缝衔接的话，可以把这个shp变成3像素高。

8帧动画：

rdrbeacn.shp（原版）

这个shp是你打了信标以后信标在雷达屏上的闪烁指示（单机玩家肯定是不知道信标为何物的，再加上繁体翻译对打信标的翻译为心灵信标，我小时候玩的时候还以为是按个按钮就能作弊送我个能控制全图的信标，现在想想真是够傻的😂），这个信标使用的也是sidebar.pal，假如你懒得弄的话可以之间把原版的mix里那个信标shp拿来用。

20帧动画：

pbeacon.shp（原版）

信标shp，使用单位色盘unitXXX.pal，想做可以自己做一个，不想做就不求了。这个动画和上个因为我没有做所以把它归类于8帧动画与20帧动画里，我本人怀疑这两个动画可以自定义帧长，待考证。

33帧动画：

radar.shp（如果你把这个shp装在sidec0Xmd.shp里，则需要把名字改成radary.shp并使用单独的色盘radaryuri.pal）

雷达屏shp，第一帧为无雷达的时候的背景，最后一帧有雷达时候的背景，雷达上线过程中按正常顺序播放，雷达离线过程中按倒序播放，跟建筑建造动画类似。

55帧动画：

gclock2.shp

建造进度shp，原版的话就是那个你点一个东西时正在造的过程中的那个转圈shp，播放速度取决于你造的玩意需要花多久。这个shp的绘制强制使用半透明，但是颜色不会改变，此shp的色盘为sidebar.pal。

关于33帧动画与55帧动画的制作，使用PS或者AE都是可以的，我就不详细介绍了。

下面是一个特殊的shp—lspacer.shp的有关说明。从上面的截图我们可以看见，在分辨率超过红警2原生规定的分辨率后，不仅是左边的背景不能塞满全图，还有底部的那个滑轨也不能，这是因为原版的lspacer.shp的长度只有853，远远达不到现在玩家的分辨率需求。这个问题制作者是可以手动解决的，在制作lspacer.shp的时候是可以把这个shp的长度手动拉长来避免此问题。我做自己的ui的时候就拉到了2550的长度，所以由于长宽比严重不协调我就不放图了。大家也可以将这个shp的长度拉到两千左右来增强对高分辨率的支持。

以上就是所有shp的帧数与帧数所对应作用的介绍了，下面我们就开始切这些功能背景shp与按钮shp。

四.切割功能区与功能按钮

首先，我们来看看西木做的UI的整体图是怎样的。当然，也是为了能更好的比对UI位置，把原版的盟苏UI原图放在底下也可供读者自己制作自己的UI的时候更好地参考。

我们能从上面两张图上看出UI是一个整体分割开的，那么分割规则是什么呢？下面我给出一组图来说明它。你可以使用保存原图的功能把以下这些图保存到本地然后拉进PS或是你自己的图像编辑软件，这样就能清楚的知道一个整体的UI怎么切成不同的shp了。

下面我们来把刚刚做好的一套UI来切出来。

第一张图，如何切出背景shp位置。

上图中，从上往下说明：沿青色区域可以切出credits.shp，紫色区域可以切出top.shp，黄色与绿色区域之和可以切出radar.shp（绿色区域为原版雷达光屏大小，也就是中间那块纯黑色屏的大小，在制作雷达时可以参考一下），红色区域可切出side1.shp，紫红色区域可切出side2.shp与side2b.shp（这两个shp同位置等大小，一个用来建造栏图标区背景一个用在选项栏图标区背景），深蓝绿色区域可以切出side3.shp，蓝色区域可以切出addon.shp。

第二张图，如何切出阵营注册表中首位（在原版中，这个就是盟军，当然，你也可以更改）的按钮位置。（感谢图片提供者xuetianyi）

上图中，从上往下说明：最上方的黄区沿中线切开，左边是diplobtn.shp，右边是optbtn.shp；中间的黄色区域有两块，中间偏上的区域沿中线切开，左边是repair.shp，右边是sell.shp；中间偏下的区域中间有隔开（查看原图放大你就能看见边界了），从左到右的四个按钮分别是tab00.shp，tab01.shp，tab02.shp，tab03.shp；底下的黄区沿中线切开，左边是下箭头r-dn.shp，右边是上箭头r-up.shp。

第二张图，如何切出阵营注册表中后位（在原版中，这个就是苏军与尤里，在玩家制作的mod中，所有自制阵营只要不是阵营注册表中首位均使用该位置）的按钮位置。（感谢图片提供者xuetianyi）

上图中，从上往下说明：最上方的黄区沿中线切开，左边是diplobtn.shp，右边是optbtn.shp；中间的黄色区域有两块，中间偏上的区域沿中线切开，左边是repair.shp，右边是sell.shp；中间偏下的区域中间有隔开（查看原图放大你就能看见边界了），从左到右的四个按钮分别是tab00.shp，tab01.shp，tab02.shp，tab03.shp；底下的黄区沿中线切开，左边是下箭头r-dn.shp，右边是上箭头r-up.shp。（介绍与上一个一致）。

上面的描述都是关于右部UI的设计，而下部UI的设计则比较简单，因为只需要沿纵向分割，把原图从左往右分成14份就行，最左边那份与最右边那份都是28格像素长，最左边对应lendcap.shp，最右边对应rendcap.shp；中间则是每隔52个像素分成一块，中间刚好能分成12块，从左往右分别对应button0010.shp-button10.shp以及bttnbkgd.shp，读者可以按照上述描述来切割。

除开这些shp来说，还有一些shp不是通过切割得来的，比如powerp.shp，pwrlvl.shp与gclock2.shp，还有一个很特殊的shp是lspacer.shp，这些shp的特殊性我上面已经说过，再此就不再重复了。

不过，在切割之前，我们先要做个重要的步骤，就是制作sidebar.pal这个色盘，这个色盘要包括了除了radary.shp，bkgdsm.shp，bkgdmd.shp，bkgdlg.shp以外所有shp的所有颜色，另外，由于电量颜色少但很重要，所以我个人建议用以下两种方法中的其一来制作色盘。

1）分开其他部件的色盘与电力的色盘，然后在颜色表中合并

色盘的制作我在上一篇专栏中已经提及，在这里我就不再阐述了。我现在来说一下关于电力的重点，众所周知色盘的取用是要丢色的，而丢色的严重程度与该种颜色的相对面积有关，而电力的红黄绿白黑是一个非常必要的颜色，假如我们直接把这些帧列出来然后用PS制作颜色表，这些颜色很有可能就会大面积丢色。所以我们可以把UI所需要的所有帧整理进一个psd，然后使用我上篇专栏制作颜色表那个办法做一个颜色表出来，再单独把电力的部分制作一个颜色表出来，两个颜色表所对应的图片我们再拉到一张图里去。

2）将所有活动帧整理成一个超级大图，然后导出颜色表。

这一招我没使用，但是指导我的xuetianyi是这么做他的UI的颜色表。

首先，我们需要把我们UI的所有帧合并到一个大图中去，然后再使用索引色-XCC Mixer-导出成pal的功能来搞，以下是范例：

当然，得到了上面这张图以后把它直接变成一个shp也是可以的，先把你的大图保存为bmp，然后使用一个bmp转shp的工具就能得到了。这个工具首发于PPM社区上，网址是ppmforums.com/viewtopic.php?t=46171，如果各位读者访问PPM论坛有困难可以去B站找戴子玲（B站ID：戴子玲ヒメコ）并加ta的个人粉丝群，在ta的群文件里可以下载这个工具。至于群号嘛……老老实实关注别人加别人的群，我在这里就不多说了，做人不要伸手当白嫖党。

有了切割模板与合理色盘以后，现在唯一的问题就是如何切割了。PS虽然有选择区域的功能，但是UI是个动图，且不论你动图每一帧选择剪切然后再编组是多么的困难，即使你选好也编组好了，这所耗费的时间无疑是巨大的，而在这里我介绍两个简单方法来合理切出shp。

1）切片

PS有个快速将画面切成多个部分并导出的功能叫切片，按钮长这样。

我以我做的盟军UI为例，因为盟军是注册表中的第一个阵营，所以我采用第二个模板，也就是第一个按钮模板，保存后拉进PS，保持原大小与正中心后改变透明度至50%，然后照着轮廓切。

在这里刚好介绍以下按钮的规则，我们可以看见两个地方有明显的不对的地方，一个是这里

另一个是这里

按钮切分的边缘有个上左原则，即按钮的上部与左部必须与额定一致，右边可以随便扩展，所以上图中那个房子的按钮的左边部分我就必须切掉或者更改位置，右边的战车按钮我则可以向右随意扩展。

然后切好以后，我们还是选择“存储为web使用格式”，进入那个我们取颜色表的那个框里。并选择所有的切片。

保存后，PS会自动给你把所有部分（包括灰色的系统自动切分的切片部分）变成GIF格式动图，然后你逐个把GIF转成shp就相当于切好了。

当然这是切了一次按钮，我们还需要切一次静态组（也就是上面那个彩色的组），按照那个边界再切一次。值得注意的一点是，静态组都是只有一帧的，但是只要你使用了“存储为web使用格式”功能保存的图，不管是png还是gif都会被强制使用索引色颜色模式，在导入至ImageShaper之前记得把索引色换成RGB再导入，不然ImageShaper会强制按照你图片内的颜色索引号码来对应你的色盘颜色号码来制作shp，而不是根据你图片内的颜色种类来对应你的色盘颜色号码，通俗来讲就是会花掉。

这个方法的好处是一次能切出所有的切片，但是这样也有一个坏处，那就是再导出成gif的时候被PS压了一次颜色，再导入至ImageShaper进行二压，颜色可能会失真较多。

2）遮罩

这个方法其实在步骤上虽然看起来是一次次的，但是由于这个方法能一次导出成帧序列，上一种方法还要先导出成GIF再导出成帧序列并且还要考虑索引色转RGB的问题，所以相对来说在颜色来说要比上一种方法更好，但这种方法并没有节省太多时间反而可能会花费稍微多一点的时间，所以读者酌情选择。

在介绍这个方法前，我必须先介绍一下ImageShaper里的一个选项，这个选项是Zero Fanker给我提供的功能介绍，感谢他的指导。

先不提这个反人类的GUI，我们看一下这底下的几个选项，其中有一个选项叫“opt Canvas”

这个选项勾上了有啥作用呢？我以接下来的步骤为例子就能很好的说明了。

假如我们要挖UI中的一个按钮，我们以diplobtn为例，这个按钮在UI的这里。

我们把这个按钮所代表的黄色区域单独选出来，然后复制到一个新的图层中去，并把它单独显示出来。

然后我们把这个图层选中，透明度改成100%，把透明部分全部涂成我sidebar的背景色颜色255 0 255紫红。

然后挖掉黄色

随后我们使用导出-渲染视频功能将这个玩意整体导出成一个帧序列

导出的帧数在我们留下这个按钮必要的两帧以后，导出文件夹就是这个样子。

下面，我们使用做好的色盘，勾选“opt Canvas”，导入ImageShaper来做成shp，勾选的同时右边的“keep centered”也会被自动勾选，记得取消它。

然后我们使用shp builder打开它，我们就会发现边缘的紫红色已经被自动的切掉了。原因就在于“opt Canvas”这个功能就是自动把边框的背景色给切掉，我们利用这个功能就可以轻松切出无损shp了，当然，这么做唯一一点不方便的地方就在于，我们要做一大堆蒙版，但考虑到上一种做法会影响画质，而且我们切出来的切片也要一个个导成png序列，单帧则需要一个个换成RGB颜色模式，这种方式确实值得一试。

以上就是做出所有shp的全部步骤了，下面我们来说一些需要注意的小点。

五.杂项与最终效果

1.打包

做完了以后，看着这一堆shp，首先我们得需要用XCC MIX Editor打包

打开这个玩意，点击右边的new按钮并命名，以我制作的盟军UI为例，这个mix的文件名就应该叫sidec01.mix（命名规则见前文，不再详细赘述），把我们做好的shp全部选中并拉进去，点compat与save两个按钮，这个mix就做好了。至于说什么加密啊什么的……反正这个mix到expandmdXX.mix里也是可以读取的，你要加密的话加密expandmdXX.mix就好了。

打包完了以后我们将这个mix丢到游戏根目录就可以拿进游戏里看效果了，如果UI没任何改变的话，那么一定是rules里写了Sidebar.YuriFileNames=yes并且同号的sidec0Xmd.mix拥有你的sidec0X.mix里的同名文件，此时要想覆盖掉md的话就需要用到读取优先级了，也就是说你必须把你的UI的mix命名成sidec0Xmd.mix兵并直接在根目录使用。这也就是我们下一步需要说到的问题了，尤里复仇与原版的UI的mix的文件目录问题。

2.文件目录

上节提到，同号的sidec0Xmd.mix会自动覆盖掉sidec0X.mix里的同名文件。那么假如我们直接把sidec0X.mix重命名成同号sidec0Xmd.mix会咋样呢？会报错。原因是因为sidec0Xmd.mix里面必须含有原版的sidec02md.mix里有的文件，也就是说，你必须得把你的雷达重命名成radary.shp并必须要以radaryuri.pal为色盘。必须添加bkgdXXy.shp与uibkgdy.pal，你可以对照原版的sidec02md.mix来比对一下。

3.颜色诡异换色（步骤四第一种方法“切片”特有）

这个问题其实并不是个问题，只是可能因为忽视了一个选项导致的。

我把帧序列拉进ImageShaper导出以后，有时候我会发现一些本来不想要它变0号色的黑色或者大块颜色变成了诡异的0号色，就像下面这样。

但其实这个问题不是个bug，只是因为没勾选上面提到过的“opt Canvas”。勾选后我们再次通过ImageShaper来到出成shp，效果如下：

当然，如果你在转换的时候勾选了这个玩意——“fixed backcolor”，并把参数设置成#000000（也就是十六进制黑色）的话，你的黑色就会被程序自动换掉变成0号色。

为啥这个方法是切片方法特有呢？原因是如果你是第二种方法那么你必然就会勾选“opt Canvas”，而且你的原图中面积最大的颜色铁定是255 0 255紫，所以根本不会转换出错。

4.按钮坐标偏移

在注意到了所有所注意到的点以及打包也打包正确以后，一般人就会把这个包拿进游戏里去检测检测，这个时候制作者往往就会突然发现一个问题，按钮歪了。

虽然我也没搞清楚为啥有些按钮会歪（丢人玩意），但是根据对应按钮歪的调节方向与像素数目都很固定来看，可能这个问题又是西木给我喂的一坨排泄物，不过即使是歪了，调整一下就OK了。根据我上面说过的上左原则，假如一个按钮向左边歪了一个像素（意思是我们需要把它往右边挪一些），那么我们可以直接使用shp builder的“resize canvas”功能，往其左边加一个像素就完事了，但假如一个按钮往右边歪了一个像素（意思是我们需要把它往左边挪一些）那么我们就只能忍痛割爱，把按钮左边的一个像素给切掉。示意图如下：

至此，在跨越西木设立的重重困难与攻克了做UI的相应知识以后，配合一定的做图技术，此时一个属于你的UI也就诞生了，快去拿进游戏里试一试吧！（以下是我自己弄的例子，当然，因为偷懒，我苏军尤里的UI只是改了个色调与下面卷轴的按钮）

最后，今天也进入2020年了，先提前祝福所有读者春节快乐，也希望各位红警2modder们能在新的一年里能在红警2里做出自己想要的mod与功能。