钢铁雄心4 GUI教程 P7gridboxType(三)

注:观前提示,gridboxType与数组紧密结合,在观看前请确保你有足够的有关array的知识

扇形议会原址链接:https://github.com/Flaxbeard/hoi4-parliament-diagram
这一P将以TNO最富盛名的扇形议会和滑动条按钮为例子,完成girdbox最后的补充

前两期介绍了有关gridbox的工作原理和使用,最后值得一提的是,gridbox所列举的每个元件,都可以单独分配effects或者properties,后者可以更改的不止有帧数/图像,还有它们的坐标,也就是意味着,你可以通过单独设置x坐标数组与y坐标数组,令gridbox这栋大楼变成任何你需要的形状

扇形议会:
首先参照P7(二),制作一个8x8规格的方形议会
先前详细介绍过,这里就只展示关键部分了
素材准备

前端设计


后端编写



接下来,在properties中,将被列举的窗口下的iconType关联两个坐标数组和帧数数组
正如之前提过的,gridboxType的一大应用,即批量为相同规格的元件依据数组分配不同的图像,
更进一步,gridboxType所依据生成的数组,为其中列举的每一个窗口都赋予了其对应在数组中的位次(index)和数值(value),并且将这两个信息储存在dynamic_lists所定义的临时变量中(此处规定index = idx,即idx这个临时变量)
因此,即使properties中:x,y,frame,关联了与gridbox依据生成的数组(parliament_seats)所不同的其它数组(x,y,frame对应的其它数组),但是依然可以通过临时变量(idx)来正确地“定位”到gridbox所生成的每个不同窗口

将gridbox高和宽改为100%并且设置slotsize

尽管我们写了横向最大为1,但是通过关联坐标的数组,我们依然可以令被列举的窗口内的元件正常显示
接下来只需要提前写好每个议席图标的x,y值,令64个议席圆组成一个扇形就可以了

帧数数组同理,素材准备中我们将蓝色规定为第一帧,红色为第二帧
依据生成的数组(parliament_seats)中64个变量值均为1,但是帧数数组(array_f_array)为1,2参半,所生成的图像也将是红蓝参半而不是纯蓝色

可以看见,64个图标排布出一个扇形,同时颜色也按照帧数数组来显示

基于上述介绍的,我们只需要排布出x,y数组就可以将正方形议会改装成扇形的,圆形的,甚至任意形状的议会了(当然工作量随着你席位数量上升而成指数级增长就是了)

滑轮按钮:
注:区别于P6滑轮,这里介绍的是类似使用滑条增减某个变量,代替传统的加减号按钮

基于上文介绍的扇形议会,接下来我们将使用一个滑轮控制64个议席的红蓝占比,
尽管P社提供了scrollbarType,但是很遗憾它并不开放编辑,所以我们需要用一些特殊方式实现滑轮
我们将gridbox关联一个含有按钮(buttonType)的窗口,列举一个从0到100的按钮组,然后将它们排列成一个横行,就可以模拟出滑轮条的效果

素材准备
一个两帧图像,第一帧是初始图像,第二帧是点击图像,

一个圆形游标,通过将x坐标与变量关联模拟滑块移动

前端编写
将slotsize大小改为方形按钮大小就可以实现横向的紧密排列,纵向最多1行,横向为0~100的按钮组


后端编写:
首先展开一个数值从0~100的数组,并且设置初始状态下,游标的x坐标关联的变量值

将该数组与gridbox关联

为按钮分配点击效果
我们现在得到了0~100的方形按钮组成的一个滑条,
当我们点击滑条某一点的时候,查询该点的按钮在整个滑条中对应的数值(v),然后将对应值转化为比例乘上64,得到红蓝席位数量,
然后通过先前为议会帧数关联的帧数数组(array_f_array)来改变议席的颜色


再补充上游标的x坐标关联的变量运算,令每次点击后游标x更改为滑条对应的位置


理论上整个滑条制作就结束了,但是为了让滑轮看起来更真实一点,我们再加入左右两个加减按钮,让玩家可以通过按钮轻微地移动滑块


进入游戏测试:

附录1:
通过Python生成x,y坐标数组
TNO制作组Flaxbeard分享了一个扇形议会的生成器(项目地址:https://github.com/Flaxbeard/hoi4-parliament-diagram)
可以通过它生成对应的x,y坐标数组,简化工作量


生成器可以去原项目连接处下载,我也会打包装进代码文件放在评论区
该生成器需要安装Python 3和Pillow库
Python 3: https://www.python.org
Pillow: https://python-pillow.org

附录2:
为gridbox生成的buttonType分配点击帧
这不是一个必须内容,但是可能对于制作其它的gridbox提供帮助
我们制作按钮时特意区分了两个帧效果,点击后的滑条将变更为两个红色正方形,与一般按钮不同,为gridbox生成的按钮分配点击帧的时候会面临无法正确定位的问题

例如:如果使用的是简单的buttonType而非关联gridbox生成的,我们可能会将每个buttonType命名为“button_number”的形式,区分0~100的按钮,然后分别写在properties下写frame
但是如果使用的gridboxType会出现一个问题,为buttonType分配图像只能使用被列举的元件的name,如下

我们需要正确定位到玩家点击的按钮是所生成的哪一个,然后只为对应的那个按钮分配点击帧,有以下两个思路:
一、关联帧数数组:

在点击按钮效果下插入一段更新帧数数组的effect

可以看见点击帧可以正确的显示

二、使用temp variable(临时变量)
这是一个高级制作手段
注意到临时变量可以存在于block块中(effect块或trigger块),而visible是实时更新的,即每次更改gridbox时,重新判断一次
每次点击gridbox中的组件,都将检测一次trigger并且设置一个临时变量,
先前的点击效果中,我们定义了一个变量(current_int)并且每次点击时,都将它的值改为关联数组(slider_buttons)中对应变量(slider_buttons^v)的值


每次点击按钮时,都会更新一次GUI并且检测一次trigger,当检测到某个按钮被点击的时候,设置临时变量为2,其余的按钮则为1,
由于这个临时变量只存在于trigger组块中,因此每个被生成的按钮都独立分配点击帧,而不会互相干扰
检测按钮被点击的trigger原理:当某个按钮在关联数组中对应的变量值,等于点击效果设置的这个变量值时,该按钮即为被点击的那个



gridbox终于第二次完结了,接下来还会继续介绍hoi4-scripted-graphs所使用的样例,敬请期待