BAIM#1112

Y3中界面模块相关变量类型共有五种
【元件】【元件类型】【元件预设】【界面控件】【界面控件类型】


一.【界面编辑器】基本概念
我们先浏览一下界面编辑器界面来了解一些基本概念。

二.实战案例
案例工程： 界面类型说明案例工程.7z (1.76 MB, 下载次数: 15)

2024-3-29 16:13 上传

点击文件名下载附件

接下来，我们通过实战对界面各类型加以理解，一起制作类幸存者游戏中常见的【技能选择界面】

1.界面UI制作


很明显，这个界面最主要的就是三个技能选择框。
由于三个按钮的结构都是一样的，我们可以使用【自定义元件】来提高复用性，新建自定义元件【技能选择】
（使用【自定义元件】的话，我们可以在触发器中获取【元件】。【元件】与【界面控件】相比下的优点是，元件支持同步，同时也可以使用自定义键值）





然后在画板上拖放三个技能选择框【自定义元件】，这里我们使用【列表】来方便的进行排版。


最后，我们再添加背景，要制作的界面就完成了。



2.界面逻辑

我们在游戏初始化时对界面进行初始化
首先，我们将选择三个技能类型作为界面显示的信息


接下来，我们需要设置三个技能选择框【自定义元件】的文本，图标信息以及事件响应。我们需要用获取【元件】进行相关设置。
我们可以通过三种方式获取【元件】

方式一：通过【元件预设】获取【元件】




【元件预设】就是画板上放置的【自定义元件】
接下来，我们用ECA【元件-获得玩家的元件实例】将【元件预设】转化为【元件】


使用ECA【元件-通过元件路径获取元件实例下的控件】获取【元件】下的子控件


设置各个子控件的文本或图片


最后，我们需要设置技能选择框的事件响应
我们希望点击技能选择框后，可以提示我们选择技能的信息。
因此，我们使用ECA【自定义值-设定自定义键值】来将【技能类型】设置为技能选择框【元件】的自定义键值，然后设置界面事件，大功告成！


运行游戏，选择其中任意技能，可以看到日志窗口打印选择的技能名称。




方式二:通过【界面控件】获取元件。
我们可以通过ECA【界面-获取指定命名的子控件】，通过传入父控件的方式获取升级选择框对应的【界面控件】，再用【元件-获取控件所属的元件实例】得到对应的【元件】


接下来的处理与方式一相同。

方式三：通过【元件类型】创建元件
我们可以通过ECA【元件-创建元件】传入技能选择【元件类型】来动态创建元件


由于需要设置界面适配，因此我们用ECA【元件-通过元件路径获取元件实例下的控件】，路径为空字符串【""】,可以获取到对应根节点【界面控件】，然后设置界面适配。


接下来的处理与方式一相同。
通过这三种方式的使用介绍，我们对于各界面类型的使用有了一定的了解，可以在各类型介绍中看到更多各类型的区别与联系。





三.各个界面类型介绍
接下来逐一分析这些类型及相互之间的关联与区分
1.【界面控件类型】
【界面控件类型】包含UI编辑器中的【官方控件】和【官方元件】（【官方控件】和【官方元件】是编辑器内置的界面部件，可以直接放置在【画板】中使用，也可以此为基础创建【自定义元件】）
我们可以在触发器中用ECA【界面-创建界面控件】传入参数【界面控件类型】从而动态创建界面控件


2.【界面控件】
【界面控件】包含界面编辑器中的【画板】和【画板内容】，我们也可以在触发器中动态创建。
比如使用ECA【界面-创建界面控件】通过传入参数【界面控件类型】从而动态创建界面控件


相关ECA
a.界面-获取指定命名的子控件
获得【玩家】【界面控件】下名称为【字符串】的子控件
b.界面-获得界面控件的父控件
获得【玩家】的【界面控件】的父控件
c.元件-通过元件路径获取元件实例下的控件
获得元件实例【元件】中路径为【字符串】的控件
d.界面-创建界面控件
为【玩家|玩家组】创建控件，父控件为【界面控件】，控件类型为【界面控件类型】

3.【元件类型】
界面编辑器中用户制作的【自定义元件】，可在ECA中用【元件类型】表示
我们可以在触发器中用【元件类型】变量获取【界面编辑器】中用户制作的【自定义元件】，可以通过ECA【元件-创建元件】传入参数【元件类型】创建对应的【元件】






4.【元件】
在触发器中，我们可以使用ECA【元件-创建元件】创建【元件类型】对应的【元件】。
【元件】与【界面控件】的不同在于，【界面控件】不支持自定义键值，而【元件】数据可以设置自定义键值。用户可以根据自己的需求选择合适的类型使用。
相关ECA
a.元件-创建元件
以【界面控件】作为父节点给【玩家】创建【元件类型】的拷贝实例
b.元件-获取控件所属的元件实例
获取【玩家】的【界面控件】所属的元件实例
c.元件-获得玩家的元件实例
获得玩家的元件实例【元件预设】


5.【元件预设】
UI编辑器中，用户手动设置在画板中的【自定义元件】，其根结点在ECA中用【元件预设】表示
我们可以通过ECA【元件-获得玩家的元件实例】将【元件预设】转换为【元件】



三.Q&A
1.希望介绍一下各个界面类型以及相互之间的联系
答：用户在编辑UI过程中，有些UI部分会需要重复利用，比如玩家自制的商品显示槽。因此UI编辑器提供了【自定义元件】可以复用UI。以此在ECA中引入了【元件类型】【元件预设】【元件】的概念与【自定义元件】对应。
画板中的所有节点都可以在触发器中用【界面控件】获取，但【界面控件】数据不支持自定义键值。而元件则解决了这个问题，【元件】可以设置自定义键值，用户可以在根据需求在【元件】上附加数据。
【自定义元件】在ECA中可以用【元件类型】获取，从而创建对应的【元件】；当用户手动将【自定义元件】放置到画板中时，可以在触发器中用【元件预设】变量获取，可以通过【元件-获得玩家的元件实例】转化为【元件】。
2.对于ECA【元件-获取控件所属的元件实例】，画板上将其他的界面控件作为【元件预设】的子控件，能否获取到【元件】？动态创建界面控件到【元件】作为子控件，是否可以获取到【元件】？
答：都是可以获取到的。只要界面控件路径位于【元件】子级路径下，使用ECA【元件-获取控件所属的元件实例】，就可以获取到所属的元件实例。