ICE Lab Copyright 2020,All right reserved.

前排感謝xuetianyi（B站ID:Catlovers_）（有下劃線）的有關(guān)UI制作的全部指導(dǎo)！以及日牛工頭Zero Fanker（B站ID:Zero Fanker）在ImageShaper的功能與圖片切分上的指導(dǎo)！感謝戴子玲（B站ID：戴子玲ヒメコ）在ta的個(gè)人粉絲群里轉(zhuǎn)發(fā)的國外命令與征服2-3系列modder知名社區(qū)Project Perfect Mod（PPM）上的有關(guān)bmp轉(zhuǎn)shp的相關(guān)文件。

（有關(guān)上一期的前言：上期的內(nèi)容似乎寫的有點(diǎn)太深了，再加上我寫的比較匆忙，有很多字眼比如多貼圖/子貼圖等的區(qū)分做的并不是很好，結(jié)果也沒人指出……所以我這次將會(huì)以比較讓人能理解的方式與一個(gè)相對(duì)容易的話題來組成這篇專欄的內(nèi)容）

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

如今紅警2玩家對(duì)mod制作的精良與否提出了更高的要求，其中UI就是一個(gè)非常重要的點(diǎn)。由于XNA CNCNET Client（通俗叫法也就是DTA，但是這個(gè)叫法其實(shí)是個(gè)誤區(qū)，因?yàn)榈谝粋€(gè)使用這個(gè)客戶端的mod是Dawn of the Tiberium Age，簡稱DTA，跟這個(gè)客戶端的真實(shí)名稱毫不相關(guān)）的普及，游戲的第一層UI的制作逐漸沒那么必要了。所以本文只介紹游戲內(nèi)相關(guān)陣營的UI制作方式。由于UI以圖與動(dòng)圖為主，所以其本質(zhì)就是shp文件。當(dāng)然，僅僅知道這個(gè)并不完全夠，如何從想法到圖片到游戲內(nèi)可以真真切切使用，這個(gè)過程的實(shí)現(xiàn)才能讓modder從想法到真實(shí)。下面我就從結(jié)構(gòu)，要求，細(xì)節(jié)等許多方面來把想法到現(xiàn)實(shí)的有關(guān)內(nèi)容仔細(xì)填充，從而讓每個(gè)會(huì)繪圖也有想法制作UI的人實(shí)現(xiàn)他自己的想法。

如有錯(cuò)誤煩請(qǐng)指出，如有補(bǔ)充歡迎留言，本人虛心接受所有建議并不勝感激。

首先介紹本文的目標(biāo)，制作UI是指制作下圖中的游戲內(nèi)UI。

我們要想做出一個(gè)類似西木做的這種UI其實(shí)并不是一件很難的事，只要你的做圖技術(shù)能過關(guān)，在加上了解了這篇文章講的內(nèi)容，我相信每個(gè)做圖高手都能做出自己滿意的紅警2UI來。

下面是這篇文章的主要內(nèi)容簡介：

一.陣營UI源mix

二.mix內(nèi)所需文件

三.UI整體制作與按鈕特性介紹

四.切割功能區(qū)與功能按鈕

五.雜項(xiàng)與最終效果

那么下面我就從上面的五個(gè)方面一個(gè)個(gè)的介紹，到底如何從0開始做一個(gè)合格的紅警2UI。

一.陣營UI源mix

一個(gè)交互窗口的組成，必然是由代碼與圖像文件組成。雖然熟知紅警2的人都知道有個(gè)配置文件叫UI.ini/UImd.ini，但假如你不需要改下邊欄按鈕的種類的話，這倆ini其實(shí)對(duì)游戲內(nèi)左部UI的按鈕位置是不起到任何作用，原因是左邊按鈕的位置其實(shí)是硬編碼，所以我們必須遵守西木（紅警2制作組，英文名Westwoods，同WW，ww）gamemd.exe里已經(jīng)寫好的UI坐標(biāo)來劃分我們UI的按鈕位置，這是一個(gè)很重要的點(diǎn)。（后面繼續(xù)說）

那么我們能改的東西是什么呢？外觀，這也是顯而易見的，直觀感受你的作品與其他人的不一樣之處的第一步就是外觀。在自己做之前，我們先分析西木已有的源文件來判斷一下制作一個(gè)ui需要做什么東西，很顯然，我們需要用到XCC Mixer。

打開ra2.mix，我們可以清晰的看見這這些有關(guān)side的子mix：sidec01.mix，sidec02.mix，sidenc01.mix與sidenc02.mix，如果你打開的是尤里的復(fù)仇所用到的ra2md.mix，你還能看見另一個(gè)叫sidec02md.mix的玩意。

先解釋一下這些mix的作用，首先是sidec0X.mix，這就是游戲內(nèi)陣營UI的源文件所在地了，打開它，選對(duì)正確的色盤，我們可以輕松地通過預(yù)覽圖的樣子肯定這就是UI的圖像源文件。

而sidenc0X.mix我們打開后，卻看見了一些很令人疑竇叢生的shp與正常紅警玩家?guī)缀醪恢赖牡腶ud音頻文件，因?yàn)檫@個(gè)mix對(duì)應(yīng)的是不同陣營在紅警2征服世界之旅中以及TS的部分殘留的相關(guān)內(nèi)容，而征服世界之旅在網(wǎng)際網(wǎng)絡(luò)的菜單里，這也就是需要連線西木官方對(duì)戰(zhàn)服務(wù)器才能使用的一個(gè)功能，鑒于這是個(gè)老游戲，許多人下載的是盜版而且西木已經(jīng)涼了很多年了，所以現(xiàn)在玩紅警2的人永遠(yuǎn)不會(huì)一睹其游戲內(nèi)容的真容，這個(gè)mix我們也可以當(dāng)成廢物丟棄。

下面來到ra2md.mix中打開sidec02md.mix。相信許多人會(huì)直接推測這是尤里陣營的UI全文件，但許多打開了這個(gè)mix的人一開始肯定會(huì)驚訝地詫異于無比少的文件數(shù)目，當(dāng)然，這個(gè)文件數(shù)目少的原因是因?yàn)槲髂居捎谟壤镪嚑I出自于蘇軍陣營，所以在原版尤里復(fù)仇中，尤里陣營確實(shí)是默認(rèn)使用sidec02md.mix里的內(nèi)容，但尤里比起蘇軍的UI只更改了esc后左邊的示意圖與雷達(dá)光屏的尤里L(fēng)ogo，其他的玩意都沒變。

那么問題來了，根據(jù)命名規(guī)則來看，XXXmd.mix應(yīng)該是補(bǔ)充XXX.mix的東西才對(duì)，怎么在UI上用在了兩個(gè)不一樣的陣營上呢？說的沒錯(cuò)，西木為了偷懶可謂是無所不用其極，如果你嘗試在sidec02md.mix里企圖增加同名shp來改變尤里UI的外觀的話，你會(huì)發(fā)現(xiàn)蘇軍UI也會(huì)隨之改變，并且由于色盤原因shp基本上會(huì)花掉。

而我們所熟知的許多紅警mod的尤里新UI/第三陣營特殊UI或是第四陣營特殊UI都是存在的，難道說我們漏了什么重要的東西？沒錯(cuò)，尤里擁有全獨(dú)立UI的功能竟然需要擴(kuò)展平臺(tái)的支持比如Ares等才有的，看到這里請(qǐng)大家再次向西木致以真（wo）摯（cao）的（ni）問（ma）候（the letter between A and C）。

下面是Ares中有關(guān)UI文件的條目的解釋：

所以很顯然，許多mod能使用自定義第三陣營UI的原因是因?yàn)樗麄冊诘谌嚑I的后面增加了個(gè)Sidebar.MixFileIndex=3（這句話適用于rulesmd.ini）并把新陣營UI的文件打包成sidec03.mix來完成新UI的使用。

不過，這并不意味著sidec0Xmd.mix毫無用處，底下我們可以看見，如果我們在Ares中的陣營里加上Sidebar.YuriFileNames=yes這句話，游戲會(huì)優(yōu)先讀取sidec0Xmd.mix里的UI有關(guān)源文件來作為新UI。此處我所使用的中文版Ares2.0說明書對(duì)這里的翻譯解釋是有所偏差的，如果你的陣營的MixFileIndex是1或者3或者4，那么你在你的陣營ini中加上Sidebar.YuriFileNames=yes后使用的mix會(huì)分別是sidec01md.mix，sidec03md.mix與sidec04md.mix，而不是都使用sidec02md.mix。換句話說sidec0Xmd.mix的這個(gè)X所代表的數(shù)字與前面你定義的有關(guān)，而不是你寫了這句話就自動(dòng)強(qiáng)制使用2。

認(rèn)清了我們需要做的是什么，下面我們就開始分析mix內(nèi)的文件內(nèi)容了。

二.mix內(nèi)所需文件

首先說明，所有UI所用shp無需在art里注冊。

我們打開mix以后，從上往下看可以看見許許多多的shp，在合理的根目錄注冊了紅警后，打開XCC的上菜單的View-Palet-Auto，XCC就會(huì)自動(dòng)匹配你看見的shp的色盤，讓你看shp不再是花的。（記住！一定要在合理的根目錄注冊紅警，合理的根目錄是指game(md).exe，ra2(md).mix，ra2(md).exe，expand0Xmd.mix都存在的根目錄使用一個(gè)圖標(biāo)長下圖這樣的玩意注冊，換句話說，即使你的這個(gè)根目錄只有這些玩意而不是一個(gè)完整游戲，這個(gè)根目錄也會(huì)被XCC視作合法根目錄，這點(diǎn)對(duì)自定義mod的FA地圖編輯器的使用很有幫助，因?yàn)镕A也是通過注冊表來識(shí)別紅警2的，在此我就不展開說明了）

選擇好了色盤我們就可以打開mix了，值得注意的是，即使你選對(duì)了正確的色盤，有些東西一樣會(huì)花，因?yàn)槟阕x取這個(gè)mix里的shp的時(shí)候，XCC會(huì)自動(dòng)選擇sidebar.pal作為你shp的對(duì)應(yīng)色盤，所以如果你看見了bkgdXX.shp（XX代指lg md sm，分別代表large，medium，small，而bkgd很明顯是background的縮寫）是花的時(shí)候，這個(gè)是因?yàn)檫@三個(gè)shp使用的色盤是uibkgd.pal而不是sidebar.pal所以花了，如果你看見了有些shp比如tabs.shp，power.shp，radar01/02.shp花了，這些則是廢棄shpWW沒用（做）上（到）的功能所以shp直接花掉了，但是源文件沒刪干凈的后果，pbeacon.shp是聯(lián)機(jī)里你可以指引隊(duì)友有關(guān)位置所打的那個(gè)信標(biāo)的shp，這玩意使用的單位色盤所以看起來會(huì)花。當(dāng)然，并不是所有不花的shp游戲里就一定用到了，就比如下圖的一些shp。眾所周知西木會(huì)經(jīng)常往玩家的游戲里塞各種沒啥用的垃圾，比如某證券交易所和某玻璃大樓（說新加坡國會(huì)跟港口大樓的請(qǐng)先了解一下紅警2是啥再去玩某個(gè)紅警2的mod—心靈終結(jié)謝謝）

在尤里的復(fù)仇自帶的sidec02.mix里，我們則會(huì)發(fā)現(xiàn)一些不一樣的東西，首先是bkgdXXy.shp，比sidec02.mix的bkgdXX.shp多了個(gè)字母y，連其色盤uibkgdy.pal也是多了個(gè)y的版本。再者，雷達(dá)命名也從radar.shp改成了radary.shp，色盤從使用sidebar.pal改成了使用獨(dú)立色盤radaryuri.pal，這是我們在自己做ui的時(shí)候需要注意的一點(diǎn)。不過因禍得福，因?yàn)槲髂就祽?，而蘇軍色盤與尤里色盤不一樣，導(dǎo)致西木為雷達(dá)搞了個(gè)獨(dú)立色盤，對(duì)于modder來說獨(dú)立色盤意味著雷達(dá)的顏色可以與其他部分迥然不同，這也算是塞翁失馬吧。

分析完了文件內(nèi)容，那么我們該如何把文件對(duì)應(yīng)進(jìn)游戲呢？這個(gè)時(shí)候我們就需要去分析一下陣營UI的模塊部分了，陣營UI我們可大概分成兩部分，一部分是右部，分別含有雷達(dá)，金錢指示，電力指示，圖標(biāo)，十個(gè)按鈕（分別是option按鈕（熱鍵：esc）diplomacy按鈕（熱鍵tab），sell按鈕（熱鍵L），repair按鈕（熱鍵K），建筑/防御/步兵/坦克按鈕（熱鍵：Q W E R）以及上下滾輪按鈕（熱鍵：鼠標(biāo)滾輪上下）），圖標(biāo)區(qū)（背景有兩個(gè)，一個(gè)是游戲中有圖標(biāo)的那個(gè)，一個(gè)是你按了esc以后背后是長條黑的那個(gè)），esc菜單選擇區(qū)，esc菜單按鈕（也就是你按了esc后選回到游戲，刪除游戲，加載游戲等等的按鈕的背景長條）；一部分是下部，分別含有背景導(dǎo)軌，展開按鈕，功能按鈕，沒有任何功能而支撐長度的空白按鈕，以及收起以后展開按鈕右邊對(duì)接的背景。很顯然左邊部分的圖標(biāo)區(qū)是不停地重復(fù)使用同一個(gè)shp而實(shí)現(xiàn)根據(jù)分辨率不一致從而顯示欄數(shù)有改變，下圖截圖就只選用了一排來作為右邊UI的示范，這也是我們待會(huì)動(dòng)手做的時(shí)候的參考目標(biāo)。

分析完以后我們就要把mix里的文件跟UI來對(duì)應(yīng)上了，為了能更直觀的展現(xiàn)對(duì)應(yīng)關(guān)系，我特別用自己做的一個(gè)UI為底板P了一組示意圖來展現(xiàn)對(duì)應(yīng)關(guān)系。

聲明：以下兩張圖的版權(quán)未經(jīng)本人同意禁止轉(zhuǎn)載。

在這里小提醒一句，你自己在做UI的時(shí)候就不必加入官方那些廢棄的與無用的shp了，比如button11.shp，tabs.shp這種都是可以不做的，反正做了也用不著。

下面我就開始介紹每個(gè)shp的由來與功能，當(dāng)然，此時(shí)此刻如果你想開始做UI的話就可以打開PS新建項(xiàng)目了。

三.UI整體制作與按鈕特性介紹

如果你要制作右邊UI的話，請(qǐng)創(chuàng)造一個(gè)168*366的畫布，如果你要做下邊UI的話，請(qǐng)創(chuàng)造一個(gè)680*32的畫布。畫布有了以后，我們就需要根據(jù)按鈕的特性來確定UI圖的幀數(shù)了。首先根據(jù)自己的想法，同時(shí)比對(duì)原版的UI照貓畫虎，在加上簡單的繪制，就能畫出一個(gè)自己想要的UI來了。以下是本人做的UI示例（無按鈕版）：

在做這個(gè)UI的時(shí)候，制作者需要相對(duì)考慮到靜態(tài)切分與動(dòng)態(tài)切分時(shí)的有關(guān)規(guī)則，這些規(guī)則我會(huì)在下一節(jié)詳細(xì)描述。

同時(shí)，UI是有動(dòng)作的，我們在玩紅警2的時(shí)候可以看見，在我們的雷達(dá)由無到有的時(shí)候會(huì)有一段雷達(dá)閃爍動(dòng)畫，建筑造好或者是超武就緒又或者是觸發(fā)導(dǎo)致建造欄閃動(dòng)的時(shí)候中間的四個(gè)按鈕會(huì)有閃爍效果，點(diǎn)下任意按鈕的時(shí)候會(huì)有一個(gè)往下沉的感覺，這些都是動(dòng)畫制造的效果。我們需要根據(jù)動(dòng)畫來確定幀數(shù)，所以以下我給一個(gè)幀數(shù)表，可以方便想制作UI的modder們參考。

關(guān)于esc后左邊的背景先說一個(gè)重點(diǎn)，因?yàn)楝F(xiàn)在大家電腦都好了，分辨率變得多樣化了，所以如果你很多時(shí)候你按esc以后所顯示的bkgdXX.shp都撐不到全屏。于是比如像MO這種mod都把bkgdXX.shp變成了一個(gè)空白shp，也就是說你按esc后左邊是全黑。這個(gè)見仁見智，如果你想搞你就搞個(gè)圖上去，覺得丑可以跟MO一樣弄個(gè)空白shp上去。

1幀動(dòng)畫：

左邊背景區(qū)：bkgdXX.shp

右區(qū)：credits.shp，top.shp，side1.shp，sdie2.shp，side2b.shp，side3.shp，addon.shp，pwrlvl.shp

下區(qū)：lspacer.shp，rendcap.shp，bttnbkgd.shp

這些shp都只有一幀，所以不存在動(dòng)作，這些shp都是用來當(dāng)作靜態(tài)背景或是擴(kuò)展填充的，所以都沒有動(dòng)畫。值得注意的是pwrlvl.shp，它是填充在兩格電力之間的那個(gè)黑條的動(dòng)畫，如果你需要你的電力顯示兩格之間沒有中間的黑條阻斷，你可以把這個(gè)shp變成全空白（0號(hào)色）

至于lspacer.shp，這個(gè)特殊的shp我放在這部分的最后說。

2幀動(dòng)畫：

右區(qū)：sell.shp，repair.shp，diplobttn.shp，optbtn.shp

下區(qū)：button00.shp到button10.shp（11沒啥用就不說了）

這些shp都是兩幀，不管是變賣維修選項(xiàng)外交或者是底部功能按鈕，第一幀都是不點(diǎn)的時(shí)候按鈕的樣子，第二幀都是點(diǎn)擊選中后按鈕的樣子。

3幀動(dòng)畫：

右區(qū)：sidebttn.shp，r-dn.shp，r-up.shp

下區(qū)：lendcap.shp

在這里不同按鈕的幀數(shù)就有所區(qū)別了。

首先是sidebttn.shp，這個(gè)shp就是esc后按鈕背景的那個(gè)長條，這個(gè)shp的第一幀是閑置幀，也就是你鼠標(biāo)不按那個(gè)按鈕的時(shí)候的那個(gè)幀。第二幀是經(jīng)過幀，就是你鼠標(biāo)在這個(gè)按鈕上但是不點(diǎn)下去的時(shí)候的那個(gè)一般亮的幀，第三幀是點(diǎn)擊幀，就是你按下去以后那個(gè)按鈕變最亮的幀。

r-dn跟r-up是一組，他倆的第一幀是按鈕可以工作的時(shí)候的幀，第二幀是按鈕點(diǎn)下去的時(shí)候的幀，第三幀是按鈕禁用時(shí)候的幀。在游戲中對(duì)應(yīng)就是當(dāng)你的單條建筑欄能顯示齊你當(dāng)前能造的所有東西的時(shí)候，上下箭頭被禁用，此時(shí)顯示第三幀；當(dāng)你單條建筑欄顯示補(bǔ)齊你當(dāng)前能造的所有東西的時(shí)候，上下箭頭被允許使用，此時(shí)顯示第一幀閑置幀，此時(shí)當(dāng)你點(diǎn)擊這兩個(gè)按鈕的時(shí)候，被點(diǎn)擊的按鈕會(huì)顯示第二幀活動(dòng)幀。

最后是lendcap.shp，與r-dn與r-up的規(guī)則相同，第一幀是閑置幀，也就是你不點(diǎn)底下那個(gè)展卷按鈕的時(shí)候；第二幀是活動(dòng)幀，也就是你正在點(diǎn)底下那個(gè)展卷按鈕的時(shí)候；第三幀是禁用幀，也就是你按了esc以后底下的按鈕自動(dòng)縮小并禁止展開的時(shí)候展卷按鈕的樣子。

自此，下區(qū)動(dòng)畫全部包括在內(nèi)了，所以以下的shp全部為右區(qū)。

5幀動(dòng)畫：

tab00.shp-tab03.shp，powerp.shp

這里的shp動(dòng)畫里，前四個(gè)按鈕都是5幀，前三幀除了上面的三幀動(dòng)畫一樣1閑2動(dòng)3禁以外，第四幀是亮的時(shí)候的閑置幀，第五幀是亮的時(shí)候的選擇幀，同時(shí)，在按鈕閃爍的時(shí)候會(huì)交替播放第一幀與第四幀交替來表示閃爍效果，按鈕按下并閃爍的時(shí)候會(huì)交替播放第二幀與第五幀交替來表示按下去后的閃爍效果。

最后一個(gè)powerp.shp是個(gè)五幀動(dòng)畫，分別代表電力的五個(gè)顏色：黑，綠，黃，紅，白。綠黃紅估計(jì)玩家都注意的到，黑白有點(diǎn)特殊，白色是電力變動(dòng)的時(shí)候緊鄰著變動(dòng)格子的第一個(gè)格子是白色，變動(dòng)過程結(jié)束后白色會(huì)消失，至于黑色，我也沒見過哪里用上了這一幀，可能是電力下降的時(shí)候白色分界線上方會(huì)有黑色幀短暫存在吧，暫時(shí)還不知道效果，做的時(shí)候直接按照原版來做就行了。

然后關(guān)于powerp.shp的高度，也是個(gè)值得說明的問題。原版的powerp高度是2像素，原因是因?yàn)閮筛裰g有一個(gè)像素的pwrlvl.shp阻隔所以兩像素高足夠了，而如果你在弄新UI的時(shí)候要弄電力無縫銜接的話，可以把這個(gè)shp變成3像素高。

8幀動(dòng)畫：

rdrbeacn.shp（原版）

這個(gè)shp是你打了信標(biāo)以后信標(biāo)在雷達(dá)屏上的閃爍指示（單機(jī)玩家肯定是不知道信標(biāo)為何物的，再加上繁體翻譯對(duì)打信標(biāo)的翻譯為心靈信標(biāo)，我小時(shí)候玩的時(shí)候還以為是按個(gè)按鈕就能作弊送我個(gè)能控制全圖的信標(biāo)，現(xiàn)在想想真是夠傻的??），這個(gè)信標(biāo)使用的也是sidebar.pal，假如你懶得弄的話可以之間把原版的mix里那個(gè)信標(biāo)shp拿來用。

20幀動(dòng)畫：

pbeacon.shp（原版）

信標(biāo)shp，使用單位色盤unitXXX.pal，想做可以自己做一個(gè)，不想做就不求了。這個(gè)動(dòng)畫和上個(gè)因?yàn)槲覜]有做所以把它歸類于8幀動(dòng)畫與20幀動(dòng)畫里，我本人懷疑這兩個(gè)動(dòng)畫可以自定義幀長，待考證。

33幀動(dòng)畫：

radar.shp（如果你把這個(gè)shp裝在sidec0Xmd.shp里，則需要把名字改成radary.shp并使用單獨(dú)的色盤radaryuri.pal）

雷達(dá)屏shp，第一幀為無雷達(dá)的時(shí)候的背景，最后一幀有雷達(dá)時(shí)候的背景，雷達(dá)上線過程中按正常順序播放，雷達(dá)離線過程中按倒序播放，跟建筑建造動(dòng)畫類似。

55幀動(dòng)畫：

gclock2.shp

建造進(jìn)度shp，原版的話就是那個(gè)你點(diǎn)一個(gè)東西時(shí)正在造的過程中的那個(gè)轉(zhuǎn)圈shp，播放速度取決于你造的玩意需要花多久。這個(gè)shp的繪制強(qiáng)制使用半透明，但是顏色不會(huì)改變，此shp的色盤為sidebar.pal。

關(guān)于33幀動(dòng)畫與55幀動(dòng)畫的制作，使用PS或者AE都是可以的，我就不詳細(xì)介紹了。

下面是一個(gè)特殊的shp—lspacer.shp的有關(guān)說明。從上面的截圖我們可以看見，在分辨率超過紅警2原生規(guī)定的分辨率后，不僅是左邊的背景不能塞滿全圖，還有底部的那個(gè)滑軌也不能，這是因?yàn)樵娴膌spacer.shp的長度只有853，遠(yuǎn)遠(yuǎn)達(dá)不到現(xiàn)在玩家的分辨率需求。這個(gè)問題制作者是可以手動(dòng)解決的，在制作lspacer.shp的時(shí)候是可以把這個(gè)shp的長度手動(dòng)拉長來避免此問題。我做自己的ui的時(shí)候就拉到了2550的長度，所以由于長寬比嚴(yán)重不協(xié)調(diào)我就不放圖了。大家也可以將這個(gè)shp的長度拉到兩千左右來增強(qiáng)對(duì)高分辨率的支持。

以上就是所有shp的幀數(shù)與幀數(shù)所對(duì)應(yīng)作用的介紹了，下面我們就開始切這些功能背景shp與按鈕shp。

四.切割功能區(qū)與功能按鈕

首先，我們來看看西木做的UI的整體圖是怎樣的。當(dāng)然，也是為了能更好的比對(duì)UI位置，把原版的盟蘇UI原圖放在底下也可供讀者自己制作自己的UI的時(shí)候更好地參考。

我們能從上面兩張圖上看出UI是一個(gè)整體分割開的，那么分割規(guī)則是什么呢？下面我給出一組圖來說明它。你可以使用保存原圖的功能把以下這些圖保存到本地然后拉進(jìn)PS或是你自己的圖像編輯軟件，這樣就能清楚的知道一個(gè)整體的UI怎么切成不同的shp了。

下面我們來把剛剛做好的一套UI來切出來。

第一張圖，如何切出背景shp位置。

上圖中，從上往下說明：沿青色區(qū)域可以切出credits.shp，紫色區(qū)域可以切出top.shp，黃色與綠色區(qū)域之和可以切出radar.shp（綠色區(qū)域?yàn)樵胬走_(dá)光屏大小，也就是中間那塊純黑色屏的大小，在制作雷達(dá)時(shí)可以參考一下），紅色區(qū)域可切出side1.shp，紫紅色區(qū)域可切出side2.shp與side2b.shp（這兩個(gè)shp同位置等大小，一個(gè)用來建造欄圖標(biāo)區(qū)背景一個(gè)用在選項(xiàng)欄圖標(biāo)區(qū)背景），深藍(lán)綠色區(qū)域可以切出side3.shp，藍(lán)色區(qū)域可以切出addon.shp。

第二張圖，如何切出陣營注冊表中首位（在原版中，這個(gè)就是盟軍，當(dāng)然，你也可以更改）的按鈕位置。（感謝圖片提供者xuetianyi）

上圖中，從上往下說明：最上方的黃區(qū)沿中線切開，左邊是diplobtn.shp，右邊是optbtn.shp；中間的黃色區(qū)域有兩塊，中間偏上的區(qū)域沿中線切開，左邊是repair.shp，右邊是sell.shp；中間偏下的區(qū)域中間有隔開（查看原圖放大你就能看見邊界了），從左到右的四個(gè)按鈕分別是tab00.shp，tab01.shp，tab02.shp，tab03.shp；底下的黃區(qū)沿中線切開，左邊是下箭頭r-dn.shp，右邊是上箭頭r-up.shp。

第二張圖，如何切出陣營注冊表中后位（在原版中，這個(gè)就是蘇軍與尤里，在玩家制作的mod中，所有自制陣營只要不是陣營注冊表中首位均使用該位置）的按鈕位置。（感謝圖片提供者xuetianyi）

上圖中，從上往下說明：最上方的黃區(qū)沿中線切開，左邊是diplobtn.shp，右邊是optbtn.shp；中間的黃色區(qū)域有兩塊，中間偏上的區(qū)域沿中線切開，左邊是repair.shp，右邊是sell.shp；中間偏下的區(qū)域中間有隔開（查看原圖放大你就能看見邊界了），從左到右的四個(gè)按鈕分別是tab00.shp，tab01.shp，tab02.shp，tab03.shp；底下的黃區(qū)沿中線切開，左邊是下箭頭r-dn.shp，右邊是上箭頭r-up.shp。（介紹與上一個(gè)一致）。

上面的描述都是關(guān)于右部UI的設(shè)計(jì)，而下部UI的設(shè)計(jì)則比較簡單，因?yàn)橹恍枰乜v向分割，把原圖從左往右分成14份就行，最左邊那份與最右邊那份都是28格像素長，最左邊對(duì)應(yīng)lendcap.shp，最右邊對(duì)應(yīng)rendcap.shp；中間則是每隔52個(gè)像素分成一塊，中間剛好能分成12塊，從左往右分別對(duì)應(yīng)button0010.shp-button10.shp以及bttnbkgd.shp，讀者可以按照上述描述來切割。

除開這些shp來說，還有一些shp不是通過切割得來的，比如powerp.shp，pwrlvl.shp與gclock2.shp，還有一個(gè)很特殊的shp是lspacer.shp，這些shp的特殊性我上面已經(jīng)說過，再此就不再重復(fù)了。

不過，在切割之前，我們先要做個(gè)重要的步驟，就是制作sidebar.pal這個(gè)色盤，這個(gè)色盤要包括了除了radary.shp，bkgdsm.shp，bkgdmd.shp，bkgdlg.shp以外所有shp的所有顏色，另外，由于電量顏色少但很重要，所以我個(gè)人建議用以下兩種方法中的其一來制作色盤。

1）分開其他部件的色盤與電力的色盤，然后在顏色表中合并

色盤的制作我在上一篇專欄中已經(jīng)提及，在這里我就不再闡述了。我現(xiàn)在來說一下關(guān)于電力的重點(diǎn)，眾所周知色盤的取用是要丟色的，而丟色的嚴(yán)重程度與該種顏色的相對(duì)面積有關(guān)，而電力的紅黃綠白黑是一個(gè)非常必要的顏色，假如我們直接把這些幀列出來然后用PS制作顏色表，這些顏色很有可能就會(huì)大面積丟色。所以我們可以把UI所需要的所有幀整理進(jìn)一個(gè)psd，然后使用我上篇專欄制作顏色表那個(gè)辦法做一個(gè)顏色表出來，再單獨(dú)把電力的部分制作一個(gè)顏色表出來，兩個(gè)顏色表所對(duì)應(yīng)的圖片我們再拉到一張圖里去。

2）將所有活動(dòng)幀整理成一個(gè)超級(jí)大圖，然后導(dǎo)出顏色表。

這一招我沒使用，但是指導(dǎo)我的xuetianyi是這么做他的UI的顏色表。

首先，我們需要把我們UI的所有幀合并到一個(gè)大圖中去，然后再使用索引色-XCC Mixer-導(dǎo)出成pal的功能來搞，以下是范例：

當(dāng)然，得到了上面這張圖以后把它直接變成一個(gè)shp也是可以的，先把你的大圖保存為bmp，然后使用一個(gè)bmp轉(zhuǎn)shp的工具就能得到了。這個(gè)工具首發(fā)于PPM社區(qū)上，網(wǎng)址是ppmforums.com/viewtopic.php?t=46171，如果各位讀者訪問PPM論壇有困難可以去B站找戴子玲（B站ID：戴子玲ヒメコ）并加ta的個(gè)人粉絲群，在ta的群文件里可以下載這個(gè)工具。至于群號(hào)嘛……老老實(shí)實(shí)關(guān)注別人加別人的群，我在這里就不多說了，做人不要伸手當(dāng)白嫖黨。

有了切割模板與合理色盤以后，現(xiàn)在唯一的問題就是如何切割了。PS雖然有選擇區(qū)域的功能，但是UI是個(gè)動(dòng)圖，且不論你動(dòng)圖每一幀選擇剪切然后再編組是多么的困難，即使你選好也編組好了，這所耗費(fèi)的時(shí)間無疑是巨大的，而在這里我介紹兩個(gè)簡單方法來合理切出shp。

1）切片

PS有個(gè)快速將畫面切成多個(gè)部分并導(dǎo)出的功能叫切片，按鈕長這樣。

我以我做的盟軍UI為例，因?yàn)槊塑娛亲员碇械牡谝粋€(gè)陣營，所以我采用第二個(gè)模板，也就是第一個(gè)按鈕模板，保存后拉進(jìn)PS，保持原大小與正中心后改變透明度至50%，然后照著輪廓切。

在這里剛好介紹以下按鈕的規(guī)則，我們可以看見兩個(gè)地方有明顯的不對(duì)的地方，一個(gè)是這里

另一個(gè)是這里

按鈕切分的邊緣有個(gè)上左原則，即按鈕的上部與左部必須與額定一致，右邊可以隨便擴(kuò)展，所以上圖中那個(gè)房子的按鈕的左邊部分我就必須切掉或者更改位置，右邊的戰(zhàn)車按鈕我則可以向右隨意擴(kuò)展。

然后切好以后，我們還是選擇“存儲(chǔ)為web使用格式”，進(jìn)入那個(gè)我們?nèi)☆伾淼哪莻€(gè)框里。并選擇所有的切片。

保存后，PS會(huì)自動(dòng)給你把所有部分（包括灰色的系統(tǒng)自動(dòng)切分的切片部分）變成GIF格式動(dòng)圖，然后你逐個(gè)把GIF轉(zhuǎn)成shp就相當(dāng)于切好了。

當(dāng)然這是切了一次按鈕，我們還需要切一次靜態(tài)組（也就是上面那個(gè)彩色的組），按照那個(gè)邊界再切一次。值得注意的一點(diǎn)是，靜態(tài)組都是只有一幀的，但是只要你使用了“存儲(chǔ)為web使用格式”功能保存的圖，不管是png還是gif都會(huì)被強(qiáng)制使用索引色顏色模式，在導(dǎo)入至ImageShaper之前記得把索引色換成RGB再導(dǎo)入，不然ImageShaper會(huì)強(qiáng)制按照你圖片內(nèi)的顏色索引號(hào)碼來對(duì)應(yīng)你的色盤顏色號(hào)碼來制作shp，而不是根據(jù)你圖片內(nèi)的顏色種類來對(duì)應(yīng)你的色盤顏色號(hào)碼，通俗來講就是會(huì)花掉。

這個(gè)方法的好處是一次能切出所有的切片，但是這樣也有一個(gè)壞處，那就是再導(dǎo)出成gif的時(shí)候被PS壓了一次顏色，再導(dǎo)入至ImageShaper進(jìn)行二壓，顏色可能會(huì)失真較多。

2）遮罩

這個(gè)方法其實(shí)在步驟上雖然看起來是一次次的，但是由于這個(gè)方法能一次導(dǎo)出成幀序列，上一種方法還要先導(dǎo)出成GIF再導(dǎo)出成幀序列并且還要考慮索引色轉(zhuǎn)RGB的問題，所以相對(duì)來說在顏色來說要比上一種方法更好，但這種方法并沒有節(jié)省太多時(shí)間反而可能會(huì)花費(fèi)稍微多一點(diǎn)的時(shí)間，所以讀者酌情選擇。

在介紹這個(gè)方法前，我必須先介紹一下ImageShaper里的一個(gè)選項(xiàng)，這個(gè)選項(xiàng)是Zero Fanker給我提供的功能介紹，感謝他的指導(dǎo)。

先不提這個(gè)反人類的GUI，我們看一下這底下的幾個(gè)選項(xiàng)，其中有一個(gè)選項(xiàng)叫“opt Canvas”

這個(gè)選項(xiàng)勾上了有啥作用呢？我以接下來的步驟為例子就能很好的說明了。

假如我們要挖UI中的一個(gè)按鈕，我們以diplobtn為例，這個(gè)按鈕在UI的這里。

我們把這個(gè)按鈕所代表的黃色區(qū)域單獨(dú)選出來，然后復(fù)制到一個(gè)新的圖層中去，并把它單獨(dú)顯示出來。

然后我們把這個(gè)圖層選中，透明度改成100%，把透明部分全部涂成我sidebar的背景色顏色255 0 255紫紅。

然后挖掉黃色

隨后我們使用導(dǎo)出-渲染視頻功能將這個(gè)玩意整體導(dǎo)出成一個(gè)幀序列

導(dǎo)出的幀數(shù)在我們留下這個(gè)按鈕必要的兩幀以后，導(dǎo)出文件夾就是這個(gè)樣子。

下面，我們使用做好的色盤，勾選“opt Canvas”，導(dǎo)入ImageShaper來做成shp，勾選的同時(shí)右邊的“keep centered”也會(huì)被自動(dòng)勾選，記得取消它。

然后我們使用shp builder打開它，我們就會(huì)發(fā)現(xiàn)邊緣的紫紅色已經(jīng)被自動(dòng)的切掉了。原因就在于“opt Canvas”這個(gè)功能就是自動(dòng)把邊框的背景色給切掉，我們利用這個(gè)功能就可以輕松切出無損shp了，當(dāng)然，這么做唯一一點(diǎn)不方便的地方就在于，我們要做一大堆蒙版，但考慮到上一種做法會(huì)影響畫質(zhì)，而且我們切出來的切片也要一個(gè)個(gè)導(dǎo)成png序列，單幀則需要一個(gè)個(gè)換成RGB顏色模式，這種方式確實(shí)值得一試。

以上就是做出所有shp的全部步驟了，下面我們來說一些需要注意的小點(diǎn)。

五.雜項(xiàng)與最終效果

1.打包

做完了以后，看著這一堆shp，首先我們得需要用XCC MIX Editor打包

打開這個(gè)玩意，點(diǎn)擊右邊的new按鈕并命名，以我制作的盟軍UI為例，這個(gè)mix的文件名就應(yīng)該叫sidec01.mix（命名規(guī)則見前文，不再詳細(xì)贅述），把我們做好的shp全部選中并拉進(jìn)去，點(diǎn)compat與save兩個(gè)按鈕，這個(gè)mix就做好了。至于說什么加密啊什么的……反正這個(gè)mix到expandmdXX.mix里也是可以讀取的，你要加密的話加密expandmdXX.mix就好了。

打包完了以后我們將這個(gè)mix丟到游戲根目錄就可以拿進(jìn)游戲里看效果了，如果UI沒任何改變的話，那么一定是rules里寫了Sidebar.YuriFileNames=yes并且同號(hào)的sidec0Xmd.mix擁有你的sidec0X.mix里的同名文件，此時(shí)要想覆蓋掉md的話就需要用到讀取優(yōu)先級(jí)了，也就是說你必須把你的UI的mix命名成sidec0Xmd.mix兵并直接在根目錄使用。這也就是我們下一步需要說到的問題了，尤里復(fù)仇與原版的UI的mix的文件目錄問題。

2.文件目錄

上節(jié)提到，同號(hào)的sidec0Xmd.mix會(huì)自動(dòng)覆蓋掉sidec0X.mix里的同名文件。那么假如我們直接把sidec0X.mix重命名成同號(hào)sidec0Xmd.mix會(huì)咋樣呢？會(huì)報(bào)錯(cuò)。原因是因?yàn)?span id="s0sssss00s" class="font-size-16">sidec0Xmd.mix里面必須含有原版的sidec02md.mix里有的文件，也就是說，你必須得把你的雷達(dá)重命名成radary.shp并必須要以radaryuri.pal為色盤。必須添加bkgdXXy.shp與uibkgdy.pal，你可以對(duì)照原版的sidec02md.mix來比對(duì)一下。

3.顏色詭異換色（步驟四第一種方法“切片”特有）

這個(gè)問題其實(shí)并不是個(gè)問題，只是可能因?yàn)楹鲆暳艘粋€(gè)選項(xiàng)導(dǎo)致的。

我把幀序列拉進(jìn)ImageShaper導(dǎo)出以后，有時(shí)候我會(huì)發(fā)現(xiàn)一些本來不想要它變0號(hào)色的黑色或者大塊顏色變成了詭異的0號(hào)色，就像下面這樣。

但其實(shí)這個(gè)問題不是個(gè)bug，只是因?yàn)闆]勾選上面提到過的“opt Canvas”。勾選后我們再次通過ImageShaper來到出成shp，效果如下：

當(dāng)然，如果你在轉(zhuǎn)換的時(shí)候勾選了這個(gè)玩意——“fixed backcolor”，并把參數(shù)設(shè)置成#000000（也就是十六進(jìn)制黑色）的話，你的黑色就會(huì)被程序自動(dòng)換掉變成0號(hào)色。

為啥這個(gè)方法是切片方法特有呢？原因是如果你是第二種方法那么你必然就會(huì)勾選“opt Canvas”，而且你的原圖中面積最大的顏色鐵定是255 0 255紫，所以根本不會(huì)轉(zhuǎn)換出錯(cuò)。

4.按鈕坐標(biāo)偏移

在注意到了所有所注意到的點(diǎn)以及打包也打包正確以后，一般人就會(huì)把這個(gè)包拿進(jìn)游戲里去檢測檢測，這個(gè)時(shí)候制作者往往就會(huì)突然發(fā)現(xiàn)一個(gè)問題，按鈕歪了。

雖然我也沒搞清楚為啥有些按鈕會(huì)歪（丟人玩意），但是根據(jù)對(duì)應(yīng)按鈕歪的調(diào)節(jié)方向與像素?cái)?shù)目都很固定來看，可能這個(gè)問題又是西木給我喂的一坨排泄物，不過即使是歪了，調(diào)整一下就OK了。根據(jù)我上面說過的上左原則，假如一個(gè)按鈕向左邊歪了一個(gè)像素（意思是我們需要把它往右邊挪一些），那么我們可以直接使用shp builder的“resize canvas”功能，往其左邊加一個(gè)像素就完事了，但假如一個(gè)按鈕往右邊歪了一個(gè)像素（意思是我們需要把它往左邊挪一些）那么我們就只能忍痛割愛，把按鈕左邊的一個(gè)像素給切掉。示意圖如下：

至此，在跨越西木設(shè)立的重重困難與攻克了做UI的相應(yīng)知識(shí)以后，配合一定的做圖技術(shù)，此時(shí)一個(gè)屬于你的UI也就誕生了，快去拿進(jìn)游戲里試一試吧?。ㄒ韵率俏易约号睦?，當(dāng)然，因?yàn)橥祽?，我蘇軍尤里的UI只是改了個(gè)色調(diào)與下面卷軸的按鈕）

最后，今天也進(jìn)入2020年了，先提前祝福所有讀者春節(jié)快樂，也希望各位紅警2modder們能在新的一年里能在紅警2里做出自己想要的mod與功能。