【Y3编辑器】界面编辑器的案例教学

453 阅读12分钟

文本(label)控件使用说明

文本控件 

文本控件可以在界面上显示一段不可交互的文本。

创建文本控件

打开界面编辑器,从上方控件栏拖拽文本控件放置在画布中。或者在左下方节点处右键新建控件-文本控件

文本控件各项属性解析 

1. 绑定属性

点击绑定按钮进行绑定,再次点击绑定按钮可以断开绑定。

UI控件属性与变量&单位属性进行绑定

当变量和单位属性发生变化时,相应的产生UI属性的变化 绑定界面只支持选择全局变量。

绑定单位/玩家属性

常用属性公式:

  • %d:整数(只能用于原始数字是整数的情况)
  • %.0f:取整后的小数(只能用于原始数字是浮点数的情况)
  • %.2f:保留小数点后两位,同理可设置%.3f......

2. 多语言按钮

点击开启后会生成对应的多语言key和内容。可以在主界面功能栏的细节-语言设置找到

3. 敏感词检测

接入了敏感词检测系统,开启后会在平台运行地图时会自动屏蔽词库内的敏感词。

字体相关

1. 超框处理 截断文本:超出文本框部分的文字替换成"..."

框体自适应:当文字内容超出设置的框体大小时,会自动调整文本框的高度

字体自适应:框的大小固定,文本内容超出的时候自动调整文本字体大小。需要设置最小字体大小

宽度自适应:当文字内容超出设置的框体大小时,会自动调整文本框的宽度

不处理:不做任何处理,超出文本框外的文字在框外显示

动态设置文本内容和绑定属性相关eca

技能选择

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

【界面编辑器】基本概念

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

实战案例

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

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【元件-获取控件所属的元件实例】,就可以获取到所属的元件实例。

Y3编辑器已为众多游戏开发者带来千万营收,欢迎大家下载Y3编辑器,创作属于自己的百万爆款游戏!更多保姆级新手教程,点击领取。