钢铁雄心4 GUI教程 P1创建一个新的界面

• 2023-01-28 02:57:35来源：哔哩哔哩

前言

(相关资料图)

在钢4mod制作中，稍微进阶的制作当属ui制作，其中既包含了原版中本来存在的一些页面修改，也包括新加的Scripted Gui。

在一些大型mod中，gui的大量修改可以让mod变得更“酷炫”（没错就是指TNO

然而无论是原版还是wiki可能对于scripted gui的教程都略显简陋，不易理解，甚至部分内容没有相关说明（gridbox，scrollbar等等），加之其制作难度略大（需要大量运用变量，数组），让GUI修改成为钢4mod制作的一大难题

那么本教程将对钢4mod中有关GUI的内容进行说明，这将会是一个大坑，以及受限于当前资料，有些内容可能无法完全涉及或者有错漏，还请海涵！

观前提示，gui制作可能会涉及大量variable，array，meta_effect，flag，event_target的操作，如有不适请立刻打开wiki！

1.了解钢4GUI原理

请允许我借用正经编程的术语，钢4的UI大致分为两部分，一部分是“前端”，用于创建图像文本界面；另一部分是“后端”用于链接和执行相关的UI互动。

对于绝大部分游戏原版ui来说，“后端”代码无法触及，只能进行“前端”修改，如更改图像位置，插入新图像/文本框之类

但是对于scripted gui（新加自定义界面）就可以进行相应的“后端”编辑，令它可以完成相应的效果

不难看出，UI本质就是图像操作于游戏内容的交互，以玩家为媒介，沟通起一条链接游戏图像文件和代码分配的桥梁

因此，UI与美工深度绑定，好比布料和裁缝，好的裁缝（代码）需要有丰富精良的布料（美工）才能制作出一件完美的艺术品

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

2.ui文件构成

首先是“前端”文件，在游戏文件夹目录下

gfx文件夹中储存了游戏会调用的图像素材，在原版中，绝大部分图像以dds格式储存，但是，也可以使用png格式，二者互有优劣，对于dds文件，其能储存通道信息，游戏自带的图像处理器可以依靠他进行渲染；对于png文件，其能保存透明部分，同时便于使用

interface文件夹中，储存了钢4GUI的“前端”代码（后缀为.gui），以及gfx图像的注册文件（后缀为.gfx），因此在使用新加图像文件时，请一定要记得在游戏中注册

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

通常而言，scripted_gui文件本身就可以单独完成相关的ui“后端”编辑，但是如果需要相对复杂的ui编写，其余内容必不可少

后续会在使用到的时候进行相关介绍

3.创建一个新的ui界面

了解了基本的gui构成，让我们实践一下，创建一个自己的新页面

以mod开局介绍界面为例

首先让我们打开ps，构思一下这个界面会是什么样子的，以下借用kr的开局介绍图像素材

（才不是因为我不会美工

可以看到，我打算制作的新ui分为四个部分，一个背景，一个图像，一个按钮，一个文本框，那么接下来我需要把这个界面用游戏的代码表达出来

第一步，注册相关图像文件

第二步，编辑前端文件

首先新建一个.gui文件（你可以选择复制一个原版的并且将它清空）

接下来我们需要创建一个“窗口”，containerWindowType，它是钢丝最普遍的一种窗口，所有“元件”（图像，文本，按钮）都必须储存在一个容器之中。

创建之前我们先回到之前ps的页面，确定一下我们需要多大的窗口（依据背景图像），要让他出现在哪里（画面正中心）于是有：

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里的设计，一个logo，一个按钮，一个文本框

p社gui元件堆叠方式与图层相同，从下往上堆积，写在下方的元件会叠在写在上方的元件，窗口的背景永远位于最下方

所以我们这样写

这三个元件分别为：按钮（buttonType），文本框（instantTextBoxType），图标（iconType），体现在ps图层大概是这样的

注意，元件中position的位置则是以整个窗口的左上角为原点，元件的左上角为基准点，根据x，y来排布

name为每个元件名称，orientation为元件相对于窗口的位置，spriteType为引用的图像文件（先前注册过的）

每项元件都有一些自己的设置，但不是本次的重点，这部分详解将会在后续的文章中列出

以上，前端页面的创建就完成了。

第三步，编辑后端文件

在common/scripted_gui中新建一个文件

我们先需要将前端界面与后端代码进行关联

context_type定义了前端窗口类型：玩家窗口（player_context），默认作用域（scope）会设置为这个界面所展现给的tag

window_name则指向这个后端代码所对应的前端窗口，还记得它吗

我们需要让欢迎窗口在开始游戏时显示，点击按钮时关闭，于是选择country_flag作为检测条件（trigger）

目前的代码将会把这个欢迎窗口呈现给拥有flag为welcome的国家，点击按钮的时候会清空flag然后让窗口消失，接下来配合on_action将这个flag在游戏开始时设置

最后用debug模式进入游戏测试

可以看见我们成果创建界面了

但是里面元件却凌乱的一塌糊涂，用控制台指令gui，鼠标指针移动到元件上方，修改x，y值令它排布出我们需要的样子

最后进行文本内容的本地化并且为按钮加上一个文本

创建一个新的界面，大功告成

写在后面，UI的制作不是一件一蹴而就的事情，这需要你有足够的耐心和充足的代码积累，对你的美工也是一个不小的考验，希望我的教程能给予打算尝试或者正在制作的modder一点微不足道的帮助

同时鸣谢@CleverCrafty 大佬给予我的不小帮助让我可以开这个史诗级巨坑

希望能填完吧

标签： 鼠标指针 INTERFACE ARRAY FLAG SCOPE debug模式 Trigger UI界面 游戏测试 图像处理 一蹴而就 NAME 一个大坑 绝大部分 微不足道 WIKI 大功告成 LOGO

延伸阅读

推荐阅读

猜您喜欢