ICE Lab Inc. Copyright 2023, All rights reserved.

（這篇文章是因?yàn)閯?dòng)態(tài)字?jǐn)?shù)怕不夠，所以用專欄發(fā)）

由于本篇專欄不是教程，所以對(duì)模板內(nèi)容相關(guān)功能的介紹我不做過多解讀。如有疑問，請(qǐng)參考制作UI全過程詳情CV4310623。

如果你要做紅警2里一個(gè)陣營的UI，一般來說你需要?jiǎng)?chuàng)建以下文件：首先是右邊的主UI；其次是下方的功能按鈕條UI；再然后是雷達(dá)動(dòng)畫部分；以及sidebttn選項(xiàng)按鈕與powerp電力單元格部分；如果你想要做出電力間有間隔的效果你還需要?jiǎng)?chuàng)建一個(gè)pwrlvl的文件；最后如果你想做一個(gè)適配你個(gè)人電腦屏幕的自定義背景，你也可以新建一個(gè)暫停時(shí)背景的圖片。

這些工作里最重要也是最難的就是以下三件事：1.如何在右部UI中正確找到按鈕位置與電力位置，2.如何快速制作雷達(dá)屏動(dòng)畫，3.如何切分下部UI相應(yīng)按鈕的位置。我發(fā)的模板所要解決的也就是這三個(gè)重點(diǎn)問題。

本模板為psd文件，請(qǐng)使用合理版本的Photoshop來打開它。目前暫不考慮制作兼容其他修圖軟件的模板。

一.右側(cè)UI按鈕位置

本文所指右側(cè)UI是下面這種右側(cè)UI，這是Ingame的右側(cè)UI，而不是開啟游戲后游戲主菜單。

一般來說，制作UI的modder會(huì)新建一個(gè)168*366的畫布，在這個(gè)畫布上畫好一個(gè)完整的UI后再按照相應(yīng)位置來切割不同部分，本UI模板的第一部分功能的目的就是解決這個(gè)過程中產(chǎn)生的問題。

解壓UI模板壓縮包后，如果你需要做一個(gè)盟軍UI或是需要做一個(gè)你自己的mod里首個(gè)陣營（是否為首個(gè)按注冊(cè)順序?yàn)闇?zhǔn)）的UI，請(qǐng)打開壓縮包內(nèi)的“盟軍按鈕位置案例”來作為參考，如果你需要做其他陣營的UI（包括蘇軍UI，你自己的mod內(nèi)非首個(gè)陣營原創(chuàng)陣營的UI，多個(gè)其他陣營的UI），請(qǐng)打開壓縮包內(nèi)的“蘇軍按鈕位置案例”來作為參考。

每個(gè)陣營UI模板都有四個(gè)部分，默認(rèn)打開文件時(shí)，背景區(qū)域劃分與按鈕遮罩為隱藏的，原版UI示意與按鈕區(qū)域劃分是顯示的。

使用模板的第一步則是將“button place”部分，“plate”部分與“bkgd place”部分復(fù)制到你自己的右側(cè)UI項(xiàng)目文件內(nèi)。如果你做的是第一陣營的UI則復(fù)制盟軍文件內(nèi)的兩組，非第一陣營的UI則復(fù)制蘇軍文件內(nèi)的兩組。

首先，我們知道繪制UI時(shí)modder就需要根據(jù)不同部位來決定自己繪制的樣式。將bkgd place組轉(zhuǎn)為可見狀態(tài)，其中不同名字的遮罩便代表了該遮罩下代表的UI文件。當(dāng)你反選遮罩可見狀態(tài)時(shí)，你便可以單獨(dú)輸出這部分的幀序列，從而能快速建構(gòu)該部分的shp文件。

當(dāng)然，快速導(dǎo)出只是遮罩功能的其中之一，當(dāng)你在繪制UI時(shí)，這些遮罩可以幫助你設(shè)置功能區(qū)輔助線，從而讓你繪制UI按鈕或是特效時(shí)不會(huì)越界。

bkgd place組解決的是背景的劃分問題。而對(duì)于最令人頭疼的按鈕劃分問題，該模板則使用了button place組與plate組來解決。

在模板的制作流程上，我自然是導(dǎo)出了原版mix內(nèi)所有的按鈕并將其拼接來對(duì)應(yīng)UI模板。然而，西木在原版的UI里便是bug百出。原版的盟軍按鈕里，diplobtn與optbtn向下偏離了一格，tab02、tab03、r-dn與r-up均向右偏離了一格，diplobtn、optbtn、r-dn與r-up的按鈕尺寸均擴(kuò)大了一圈；在原版蘇軍按鈕里，r-dn向右偏離了一格。這也直接導(dǎo)致了如果你按原版UI來切按鈕，那么切出來的按鈕必然是有bug的。所以本模板修改了UI內(nèi)西木留下的所有bug。直接使用模板內(nèi)的按鈕位置來進(jìn)行切分操作是不會(huì)有任何偏離的。

按鈕的使用方法不是簡單的反選。在我之前寫的介紹UI制作的專欄里（CV4310623）已經(jīng)介紹了先創(chuàng)造一個(gè)遮罩圖層然后按照按鈕位置挖孔的方法，詳情我就在此不介紹了。對(duì)于一般的UI制作者來說，模板里的plate組便是已經(jīng)挖好孔的遮罩。如果你不做超過原版按鈕大小的按鈕，那么你可以直接使用plate組內(nèi)的遮罩進(jìn)行按鈕切分。

當(dāng)然，如果你是一個(gè)ui進(jìn)階玩家，你可以用button place組來手切按鈕區(qū)域，這是因?yàn)閁I按鈕有個(gè)原則叫“上左原則”，簡單介紹就是，UI按鈕其實(shí)只是按上左坐標(biāo)對(duì)齊的，也就是說你可以把按鈕做小一點(diǎn)，也可以把按鈕做大一點(diǎn)。比如r-dn與r-up這兩個(gè)按鈕，假如你要做一種點(diǎn)擊了它倆就產(chǎn)生向下的拖影光的效果，那么你的r-dn與r-up按鈕就必須往下擴(kuò)展大一些了。此時(shí)按鈕位置在這個(gè)時(shí)候就僅為確定按鈕左上坐標(biāo)的作用，建立的按鈕孔遮罩則需要根據(jù)你自己的按鈕影響范圍來確定。如果我此時(shí)直接給了個(gè)簡單粗暴的遮罩，那么這種拖影效果便無法在這種遮罩下完成，這也是我沒有建議所有人都用遮罩的原因。

在電力部分上：在盟軍的模板內(nèi)，電力部分的右側(cè)我給了一條線，這條線便是powerp.shp在UI上右側(cè)對(duì)齊的基準(zhǔn)線。按照這個(gè)線的區(qū)域，你可以把電力條弄窄一點(diǎn)或者寬一點(diǎn)，甚至如果你弄一個(gè)很寬的電力條，并把中間部分用0號(hào)色填充，你還能做出UI兩側(cè)電力條的效果，亦或是你在電力條右側(cè)填充一定長度的0號(hào)色而做出把電力弄到UI右側(cè)的效果，也是可以的。

蘇軍模板里這根基準(zhǔn)線與畫布左側(cè)平齊，這是因?yàn)樘K軍的電力條坐標(biāo)是從UI最左側(cè)開始的，換句話說，除盟軍UI外，其他陣營的UI在電力條顯示位置上均沒有最左邊坐標(biāo)位置的限制。

解決了按鈕劃分，背景劃分與電力位置的問題后，右側(cè)UI的主要問題也基本得到了解決。

二.雷達(dá)光屏模板

如果你想做一個(gè)貼近紅警2半寫實(shí)效果的UI，那么對(duì)雷達(dá)光屏閃爍特效的復(fù)刻一定是你需要解決的重大問題。該模板內(nèi)的雷達(dá)模板案例就能解決這個(gè)問題。

打開雷達(dá)模板案例的psd文件，你可以看見如下界面：

乍一看有點(diǎn)蒙？將左邊的兩個(gè)輔助圖層取消勾選，然后再勾選原版組為可見，默認(rèn)的蘇軍雷達(dá)光屏效果就出來了。

雷達(dá)模板的使用便如右側(cè)的輔助圖層所描述的那樣，把你制作的UI使用radar遮罩將雷達(dá)部分切出來，并將這個(gè)圖片替換雷達(dá)模板的示意圖層即可完成雷達(dá)光屏的制作。

如果你是只想換原版雷達(dá)的背景圖，以盟軍為例，將“原版”組內(nèi)盟軍圖層在時(shí)間軸選中第一幀時(shí)設(shè)置為可見，拉入你想要的圖片并替換掉“把這張圖換成你要的雷達(dá)部分的圖片”圖層。你自定義的雷達(dá)特效就呼之欲出了。

三.下側(cè)UI按鈕位置

當(dāng)你需要手切下側(cè)按鈕UI位置時(shí)該怎么辦？誠然之前我已經(jīng)介紹了切下方按鈕的方式，不過如果有一個(gè)模板能提供現(xiàn)成的方案，那不是更加節(jié)省大家的時(shí)間嗎？

打開壓縮包內(nèi)的“下側(cè)按鈕劃分”，你可以發(fā)現(xiàn)右側(cè)有一個(gè)plate組。該模板的使用方式與右側(cè)UI的按鈕遮罩相似，我在此也就不做贅述了。你可以將這個(gè)組復(fù)制到你自己做的下方UI內(nèi)，也可以直接以這個(gè)文件為底，直接創(chuàng)建一個(gè)新的下方UI文件。

四.后記

本專欄僅介紹模板功能，至于UI為啥這么做，切按鈕到底是什么，0號(hào)色透明問題以及按鈕位置，偏移，雷達(dá)光屏區(qū)域等UI細(xì)節(jié)問題，詳情可閱讀“如何輕松搞定UI？紅警2陣營UI制作全解析”專欄CV4310623。

下載地址將放在評(píng)論區(qū)，祝大家有了這個(gè)模板以后都能做出自己心儀的UI。