经过前3个P的讲解想必你以及可以独立完成一些简单ui的制作了，那么接下来将开启一些稍微复杂的内容，本篇将以TNO的美国大选界面为例，将讲解地图互动型界面的制作，以及三个主要元件：iconType，buttonType，instantTextboxType的综合使用

(资料图)

由于地图互动需要使用的素材十分海量，这里直接“借用”TNO素材了

依旧让我们开始构思一个界面：一张美国地图，将50个州的州界划分出来

我们想要实现的效果，是点击不同区域，展示某个区域内包含的州，然后点击每个州时，显示不同的信息

预计将要制作两个界面，第一个，将美国按大区区分，地图点选的是不同大区

第二个，点选大区之后，在大区中可以点击不同的州，查看进一步的详情

素材准备

你也许会感觉奇怪，为什么还需要强调准备素材

因为界面很简单，但是需要构思如何实现这个交互

我们将每个分区的边界制作成按钮（buttonType），将每个州地图分离出来，制作成图标（iconType），然后在这个窗口中将它们“拼接”出一张地图

值得注意的是，当buttonType使用的图像资源是多帧时，第二/第三帧会分别作为点击时/悬停时，的图像，因此我们需要这样制作按钮：

利用按钮悬停分配第三帧，模拟出选区的效果，同时利用transparencecheck使得透明图层部分可以与其他边界按钮拼接

注意，此处需要将第一帧按钮区域用颜色填充，然后将颜色图层透明度修改为1%

完全透明的第一帧会令transparencecheck将这个按钮完全隐藏，无法点击，透明度调整为1%，合并图层后的效果如下所示

注册时标注noOfFrames = 3（分3帧），transparencecheck = yes（透明/Alpha通道黑色部分无视点选）

然后制作第二个界面需要的素材，点开大区后放大背景，以及50个州每个州的图标

首先是局部放大的背景，

然后是各州的图标，注意如果准备区分颜色来模拟各州支持率变化，可以通过分多个帧然后用frame来控制

图像注册时需要使用noOfFrames来标注该图像为几帧

切片工具有助于你完成准确的多帧图像制作

前端设计-界面一

图像素材制作完成后，让我们开始进行前端界面构建，这是一个极其需要耐心的过程，

因为我们需要像“拼图”一样，将大区按钮与50个州在我们创建的窗口中“拼”成一张选区地图

后端编写-界面一

在我们构想的第一个界面（如果你完成了的话）

可以基本完成各个分区的按钮显示，接下来我们需要为每个按钮分配不同效果，以在第二个界面中进行区分，这里选择使用变量+flag共同完成，

变量进行区分显示的大区，flag控制显示第二个界面

前端设计-界面二

最痛苦的环节到来了，因为前一个界面只需要我们按照大区进行拼接，但是第二个界面就要求我们在大区轮廓上，拼接每一个州了，以大选页面为例，需要拼接50个州

注意，由于每个大区详细显示共用同一个界面，点选不同大区的时候这个界面不改，只是切换内部显示内容，方便编写我们在这个界面的窗口下直接建立另一个窗口，

子窗口的位置变更时，下含的所有元件位置都将一起变更

以现在的这个子窗口为例：我们将所有新英格兰大区下的州，全部填写在这个子窗口下，当完成新英格兰大区各个州按钮位置的编排后，可以直接改变该子窗口xy值来完成另一个大区的编排

以下为东海岸大区的子窗口

后端编写-界面二

区别于前面介绍的parent _window_token/name，scripted gui中的子窗口无需单独列出，

可以直接在主窗口下填写相关元件的triggers，effects等等

先为每个州的图片添加点击效果，点击不同的州设置不同的变量，以显示每个州的图片文本等

尽管各个州按钮的元件写在其所属大区的窗口下，但是因为大区窗口本身定义在“voting_regions_overview”这个界面下，我们直接在这个窗口下填写相关后端编写。

然后为每个大区对应的州添加显示条件，以实现点击时的切换效果

只有目前变量为对应大区的变量，下属的各个州图标才会显示

为各州分配不同的帧图像改变颜色状态，此处frame = 可以直接填一个变量，不过我偷懒了

最后为每个州编写对应scripted loc

到这里，整个界面制作就已经完工了，但是还有一个问题，需要一个打开大选界面的按钮，我们加一个TNO特有的红色箭头动画（添加动画详情请看P3（三））

前端设计-界面三

后端编写-界面三

非常简单的一个写法，通过flag设置提醒箭头只会在没有打开界面的时候显示，并且将这个按钮设置为只有USA可见

最后进入游戏测试

附录1：

关于制作地图互动素材的一些建议：

使用VSC，安装钢4mod插件，将你的mod文件添加到工作区，这里以原版为例

顶部选择查看-命令面板，预览世界地图

取消选择“快速绘制”，“显示便签”，“显示补给”，

右方箭头导出地图

导出的地图使用Photoshop可以很方便地制作icon/button素材

附录2：

三种基本元件的常用相关附加效果一览，以下每项附加效果均为选填，当你需要某个功能的时候再加上

iconType：承接各种图像资源

buttonType：附带点击效果，多帧图像时第二帧为点击时图像，第三帧为悬浮按钮上方时图像

instantTextBoxType：承接文本，文本内容可以通过本地化使用scripted loc

P社虽然提供了众多的元件，但是仅有这三种支持在scripted gui中完成后端编写（gridbox例外，后续更新会详细介绍）

因此，这三中元件组合运用便可以搭建出各种奇妙的界面，至于最终可以完成什么样子的界面，就需要发挥你的想象力了

篇幅原因，完整代码将会打包并且在评论区提供下载链接

第一个模板总算是完结了，以后还会继续更新一些模板gui的讲解，敬请期待