經(jīng)過(guò)前3個(gè)P的講解想必你以及可以獨(dú)立完成一些簡(jiǎn)單ui的制作了，那么接下來(lái)將開(kāi)啟一些稍微復(fù)雜的內(nèi)容，本篇將以TNO的美國(guó)大選界面為例，將講解地圖互動(dòng)型界面的制作，以及三個(gè)主要元件：iconType，buttonType，instantTextboxType的綜合使用

由于地圖互動(dòng)需要使用的素材十分海量，這里直接“借用”TNO素材了

依舊讓我們開(kāi)始構(gòu)思一個(gè)界面：一張美國(guó)地圖，將50個(gè)州的州界劃分出來(lái)

我們想要實(shí)現(xiàn)的效果，是點(diǎn)擊不同區(qū)域，展示某個(gè)區(qū)域內(nèi)包含的州，然后點(diǎn)擊每個(gè)州時(shí)，顯示不同的信息

預(yù)計(jì)將要制作兩個(gè)界面，第一個(gè)，將美國(guó)按大區(qū)區(qū)分，地圖點(diǎn)選的是不同大區(qū)

第二個(gè)，點(diǎn)選大區(qū)之后，在大區(qū)中可以點(diǎn)擊不同的州，查看進(jìn)一步的詳情

素材準(zhǔn)備

你也許會(huì)感覺(jué)奇怪，為什么還需要強(qiáng)調(diào)準(zhǔn)備素材

因?yàn)榻缑婧芎?jiǎn)單，但是需要構(gòu)思如何實(shí)現(xiàn)這個(gè)交互

我們將每個(gè)分區(qū)的邊界制作成按鈕（buttonType），將每個(gè)州地圖分離出來(lái)，制作成圖標(biāo)（iconType），然后在這個(gè)窗口中將它們“拼接”出一張地圖

值得注意的是，當(dāng)buttonType使用的圖像資源是多幀時(shí)，第二/第三幀會(huì)分別作為點(diǎn)擊時(shí)/懸停時(shí)，的圖像，因此我們需要這樣制作按鈕：

利用按鈕懸停分配第三幀，模擬出選區(qū)的效果，同時(shí)利用transparencecheck使得透明圖層部分可以與其他邊界按鈕拼接

注意，此處需要將第一幀按鈕區(qū)域用顏色填充，然后將顏色圖層透明度修改為1%

完全透明的第一幀會(huì)令transparencecheck將這個(gè)按鈕完全隱藏，無(wú)法點(diǎn)擊，透明度調(diào)整為1%，合并圖層后的效果如下所示

注冊(cè)時(shí)標(biāo)注noOfFrames = 3（分3幀），transparencecheck = yes（透明/Alpha通道黑色部分無(wú)視點(diǎn)選）

然后制作第二個(gè)界面需要的素材，點(diǎn)開(kāi)大區(qū)后放大背景，以及50個(gè)州每個(gè)州的圖標(biāo)

首先是局部放大的背景，

然后是各州的圖標(biāo)，注意如果準(zhǔn)備區(qū)分顏色來(lái)模擬各州支持率變化，可以通過(guò)分多個(gè)幀然后用frame來(lái)控制

圖像注冊(cè)時(shí)需要使用noOfFrames來(lái)標(biāo)注該圖像為幾幀

切片工具有助于你完成準(zhǔn)確的多幀圖像制作

前端設(shè)計(jì)-界面一

圖像素材制作完成后，讓我們開(kāi)始進(jìn)行前端界面構(gòu)建，這是一個(gè)極其需要耐心的過(guò)程，

因?yàn)槲覀冃枰瘛捌磮D”一樣，將大區(qū)按鈕與50個(gè)州在我們創(chuàng)建的窗口中“拼”成一張選區(qū)地圖

后端編寫-界面一

在我們構(gòu)想的第一個(gè)界面（如果你完成了的話）

可以基本完成各個(gè)分區(qū)的按鈕顯示，接下來(lái)我們需要為每個(gè)按鈕分配不同效果，以在第二個(gè)界面中進(jìn)行區(qū)分，這里選擇使用變量+flag共同完成，

變量進(jìn)行區(qū)分顯示的大區(qū)，flag控制顯示第二個(gè)界面

前端設(shè)計(jì)-界面二

最痛苦的環(huán)節(jié)到來(lái)了，因?yàn)榍耙粋€(gè)界面只需要我們按照大區(qū)進(jìn)行拼接，但是第二個(gè)界面就要求我們?cè)诖髤^(qū)輪廓上，拼接每一個(gè)州了，以大選頁(yè)面為例，需要拼接50個(gè)州

注意，由于每個(gè)大區(qū)詳細(xì)顯示共用同一個(gè)界面，點(diǎn)選不同大區(qū)的時(shí)候這個(gè)界面不改，只是切換內(nèi)部顯示內(nèi)容，方便編寫我們在這個(gè)界面的窗口下直接建立另一個(gè)窗口，

子窗口的位置變更時(shí)，下含的所有元件位置都將一起變更

以現(xiàn)在的這個(gè)子窗口為例：我們將所有新英格蘭大區(qū)下的州，全部填寫在這個(gè)子窗口下，當(dāng)完成新英格蘭大區(qū)各個(gè)州按鈕位置的編排后，可以直接改變?cè)撟哟翱趚y值來(lái)完成另一個(gè)大區(qū)的編排

以下為東海岸大區(qū)的子窗口

后端編寫-界面二

區(qū)別于前面介紹的parent _window_token/name，scripted gui中的子窗口無(wú)需單獨(dú)列出，

可以直接在主窗口下填寫相關(guān)元件的triggers，effects等等

先為每個(gè)州的圖片添加點(diǎn)擊效果，點(diǎn)擊不同的州設(shè)置不同的變量，以顯示每個(gè)州的圖片文本等

盡管各個(gè)州按鈕的元件寫在其所屬大區(qū)的窗口下，但是因?yàn)?strong>大區(qū)窗口本身定義在“voting_regions_overview”這個(gè)界面下，我們直接在這個(gè)窗口下填寫相關(guān)后端編寫。

然后為每個(gè)大區(qū)對(duì)應(yīng)的州添加顯示條件，以實(shí)現(xiàn)點(diǎn)擊時(shí)的切換效果

只有目前變量為對(duì)應(yīng)大區(qū)的變量，下屬的各個(gè)州圖標(biāo)才會(huì)顯示

為各州分配不同的幀圖像改變顏色狀態(tài)，此處frame = 可以直接填一個(gè)變量，不過(guò)我偷懶了

最后為每個(gè)州編寫對(duì)應(yīng)scripted loc

到這里，整個(gè)界面制作就已經(jīng)完工了，但是還有一個(gè)問(wèn)題，需要一個(gè)打開(kāi)大選界面的按鈕，我們加一個(gè)TNO特有的紅色箭頭動(dòng)畫（添加動(dòng)畫詳情請(qǐng)看P3（三））

前端設(shè)計(jì)-界面三

后端編寫-界面三

非常簡(jiǎn)單的一個(gè)寫法，通過(guò)flag設(shè)置提醒箭頭只會(huì)在沒(méi)有打開(kāi)界面的時(shí)候顯示，并且將這個(gè)按鈕設(shè)置為只有USA可見(jiàn)

最后進(jìn)入游戲測(cè)試

附錄1：

關(guān)于制作地圖互動(dòng)素材的一些建議：

使用VSC，安裝鋼4mod插件，將你的mod文件添加到工作區(qū)，這里以原版為例

頂部選擇查看-命令面板，預(yù)覽世界地圖

取消選擇“快速繪制”，“顯示便簽”，“顯示補(bǔ)給”，

右方箭頭導(dǎo)出地圖

導(dǎo)出的地圖使用Photoshop可以很方便地制作icon/button素材

附錄2：

三種基本元件的常用相關(guān)附加效果一覽，以下每項(xiàng)附加效果均為選填，當(dāng)你需要某個(gè)功能的時(shí)候再加上

iconType：承接各種圖像資源

buttonType：附帶點(diǎn)擊效果，多幀圖像時(shí)第二幀為點(diǎn)擊時(shí)圖像，第三幀為懸浮按鈕上方時(shí)圖像

instantTextBoxType：承接文本，文本內(nèi)容可以通過(guò)本地化使用scripted loc

P社雖然提供了眾多的元件，但是僅有這三種支持在scripted gui中完成后端編寫（gridbox例外，后續(xù)更新會(huì)詳細(xì)介紹）

因此，這三中元件組合運(yùn)用便可以搭建出各種奇妙的界面，至于最終可以完成什么樣子的界面，就需要發(fā)揮你的想象力了

篇幅原因，完整代碼將會(huì)打包并且在評(píng)論區(qū)提供下載鏈接

第一個(gè)模板總算是完結(jié)了，以后還會(huì)繼續(xù)更新一些模板gui的講解，敬請(qǐng)期待