• 前言

在鋼4mod制作中，稍微進階的制作當屬ui制作，其中既包含了原版中本來存在的一些頁面修改，也包括新加的Scripted Gui。

在一些大型mod中，gui的大量修改可以讓mod變得更“酷炫”（沒錯就是指TNO

然而無論是原版還是wiki可能對于scripted gui的教程都略顯簡陋，不易理解，甚至部分內(nèi)容沒有相關(guān)說明（gridbox，scrollbar等等），加之其制作難度略大（需要大量運用變量，數(shù)組），讓GUI修改成為鋼4mod制作的一大難題

那么本教程將對鋼4mod中有關(guān)GUI的內(nèi)容進行說明，這將會是一個大坑，以及受限于當前資料，有些內(nèi)容可能無法完全涉及或者有錯漏，還請海涵！

觀前提示，gui制作可能會涉及大量variable，array，meta_effect，flag，event_target的操作，如有不適請立刻打開wiki！

1.了解鋼4GUI原理

請允許我借用正經(jīng)編程的術(shù)語，鋼4的UI大致分為兩部分，一部分是“前端”，用于創(chuàng)建圖像文本界面；另一部分是“后端”用于鏈接和執(zhí)行相關(guān)的UI互動。

對于絕大部分游戲原版ui來說，“后端”代碼無法觸及，只能進行“前端”修改，如更改圖像位置，插入新圖像/文本框之類

但是對于scripted gui（新加自定義界面）就可以進行相應(yīng)的“后端”編輯，令它可以完成相應(yīng)的效果

不難看出，UI本質(zhì)就是圖像操作于游戲內(nèi)容的交互，以玩家為媒介，溝通起一條鏈接游戲圖像文件和代碼分配的橋梁

因此，UI與美工深度綁定，好比布料和裁縫，好的裁縫（代碼）需要有豐富精良的布料（美工）才能制作出一件完美的藝術(shù)品

所以開始ui制作之前，你得找到一個好美工

2.ui文件構(gòu)成

首先是“前端”文件，在游戲文件夾目錄下

gfx文件夾中儲存了游戲會調(diào)用的圖像素材，在原版中，絕大部分圖像以dds格式儲存，但是，也可以使用png格式，二者互有優(yōu)劣，對于dds文件，其能儲存通道信息，游戲自帶的圖像處理器可以依靠他進行渲染；對于png文件，其能保存透明部分，同時便于使用

interface文件夾中，儲存了鋼4GUI的“前端”代碼（后綴為.gui），以及gfx圖像的注冊文件（后綴為.gfx），因此在使用新加圖像文件時，請一定要記得在游戲中注冊

然后是“后端”文件，位于common文件夾中

通常而言，scripted_gui文件本身就可以單獨完成相關(guān)的ui“后端”編輯，但是如果需要相對復雜的ui編寫，其余內(nèi)容必不可少

后續(xù)會在使用到的時候進行相關(guān)介紹

3.創(chuàng)建一個新的ui界面

了解了基本的gui構(gòu)成，讓我們實踐一下，創(chuàng)建一個自己的新頁面

以mod開局介紹界面為例

首先讓我們打開ps，構(gòu)思一下這個界面會是什么樣子的，以下借用kr的開局介紹圖像素材

（才不是因為我不會美工

可以看到，我打算制作的新ui分為四個部分，一個背景，一個圖像，一個按鈕，一個文本框，那么接下來我需要把這個界面用游戲的代碼表達出來

第一步，注冊相關(guān)圖像文件

第二步，編輯前端文件

首先新建一個.gui文件（你可以選擇復制一個原版的并且將它清空）

接下來我們需要創(chuàng)建一個“窗口”，containerWindowType，它是鋼絲最普遍的一種窗口，所有“元件”（圖像，文本，按鈕）都必須儲存在一個容器之中。

創(chuàng)建之前我們先回到之前ps的頁面，確定一下我們需要多大的窗口（依據(jù)背景圖像），要讓他出現(xiàn)在哪里（畫面正中心）于是有：

orientation：窗口相對于屏幕的方位，默認情況以屏幕左上角為原點，x以右為正方向，y以下為正方向。center則將相對方位的原點改為屏幕中心為原點（相較于原來的位置，在1920x1080分辨率下，position為：x = 960?y = 540）

兩圖為position x =0 y=0時，不同的orientation

origo：窗口的基準點，position的x，y值即為基準點的位置，默認為整個窗口的右上角，center則將窗口基準點定為整個窗口的中心點

兩圖為相同position，相同orientation，不同origo

moveable：窗口可以拖動

clipping：是否會裁剪超框的圖像/文本框

然后，我們需要往里添加元件，參考我們在ps里的設(shè)計，一個logo，一個按鈕，一個文本框

p社gui元件堆疊方式與圖層相同，從下往上堆積，寫在下方的元件會疊在寫在上方的元件，窗口的背景永遠位于最下方

所以我們這樣寫

這三個元件分別為：按鈕（buttonType），文本框（instantTextBoxType），圖標（iconType），體現(xiàn)在ps圖層大概是這樣的

注意，元件中position的位置則是以整個窗口的左上角為原點，元件的左上角為基準點，根據(jù)x，y來排布

name為每個元件名稱，orientation為元件相對于窗口的位置，spriteType為引用的圖像文件（先前注冊過的）

每項元件都有一些自己的設(shè)置，但不是本次的重點，這部分詳解將會在后續(xù)的文章中列出

以上，前端頁面的創(chuàng)建就完成了。

第三步，編輯后端文件

在common/scripted_gui中新建一個文件

我們先需要將前端界面與后端代碼進行關(guān)聯(lián)

context_type定義了前端窗口類型：玩家窗口（player_context），默認作用域（scope）會設(shè)置為這個界面所展現(xiàn)給的tag

window_name則指向這個后端代碼所對應(yīng)的前端窗口，還記得它嗎

我們需要讓歡迎窗口在開始游戲時顯示，點擊按鈕時關(guān)閉，于是選擇country_flag作為檢測條件（trigger）

目前的代碼將會把這個歡迎窗口呈現(xiàn)給擁有flag為welcome的國家，點擊按鈕的時候會清空flag然后讓窗口消失，接下來配合on_action將這個flag在游戲開始時設(shè)置

最后用debug模式進入游戲測試

可以看見我們成果創(chuàng)建界面了

但是里面元件卻凌亂的一塌糊涂，用控制臺指令gui，鼠標指針移動到元件上方，修改x，y值令它排布出我們需要的樣子

最后進行文本內(nèi)容的本地化并且為按鈕加上一個文本

創(chuàng)建一個新的界面，大功告成

寫在后面，UI的制作不是一件一蹴而就的事情，這需要你有足夠的耐心和充足的代碼積累，對你的美工也是一個不小的考驗，希望我的教程能給予打算嘗試或者正在制作的modder一點微不足道的幫助

同時鳴謝@CleverCrafty 大佬給予我的不小幫助讓我可以開這個史詩級巨坑

希望能填完吧