• 产品手册
  • Y3功能手册
  • UI编辑器
  • 案例

文本(label)控件使用说明

1.文本控件

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

lable1

2.创建文本控件

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

lable2

3.文本控件各项属性解析

3.1 绑定属性

lable3

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

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

当变量和单位属性发生变化时,相应的产生UI属性的变化

绑定界面只支持选择全局变量

lable4

绑定单位/玩家属性

lable5

常用属性公式:

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

3.2 多语言按钮

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

lable6

3.3 敏感词检测

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

4. 字体相关

属性功能备注
字体调整文字的字体,如需使用编辑器内没有的字体可以先将字体导入资源管理器然后从字体列表里面选择
字体颜色调整文字的颜色
对齐方式设置文字在文本框内的对齐方式
间距设置文字的字间距和行间距
文字效果设置文字的效果:加粗;描边;阴影;斜体;下划线;删除线加粗、描边效果互斥
超框处理设定文字超出文本框后的处理方法

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

lable7

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

lable8

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

lable9 lable9

宽度自适应(9月底上线):当文字内容超出设置的框体大小时,会自动调整文本框的宽度

lable10

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

lable11

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

lable12

技能选择

Y3中界面模块相关变量类型共有五种

【元件】【元件类型】【元件预设】【界面控件】【界面控件类型】

【界面编辑器】基本概念

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

VT1

实战案例

案例工程:界面类型说明案例工程

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

1.界面UI制作

VT2

很明显,这个界面最主要的就是三个技能选择框

由于三个按钮的结构都是一样的,我们可以使用【自定义元件】来提高复用性,新建自定义元件【技能选择】

(使用【自定义元件】的话,我们可以在触发器中获取【元件】。【元件】与【界面控件】相比下的优点是,元件支持同步,同时也可以使用自定义键值)

VT3 VT4

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

VT5VT6

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

VT7 VT8

2.界面逻辑

我们在游戏初始化时对界面进行初始化

首先,我们将选择三个技能类型作为界面显示的信息

VT9

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

我们可以通过三种方式获取【元件】

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

VT10VT11VT12

【元件预设】就是画板上放置的【自定义元件】

接下来,我们用ECA【元件-获得玩家的元件实例】将【元件预设】转化为【元件】

VT13

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

VT14

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

VT15

最后,我们需要设置技能选择框的事件响应

我们希望点击技能选择框后,可以提示我们选择技能的信息。

因此,我们使用ECA【自定义值-设定自定义键值】来将【技能类型】设置为技能选择框【元件】的自定义键值,然后设置界面事件,大功告成!

VT16

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

VT17 VT18

方式二:通过【界面控件】获取元件。

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

VT19

方式三:通过【元件类型】创建元件

处理与方式一相同,我们可以通过ECA【元件-创建元件】传入技能选择【元件类型】来动态创建元件

VT20

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

VT21

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

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

各个界面类型介绍

接下来逐一分析这些类型及相互之间的关联与区分

1.【界面控件类型】

【界面控件类型】包含UI编辑器中的【官方控件】和【官方元件】(【官方控件】和【官方元件】是编辑器内置的界面部件,可以直接放置在【画板】中使用,也可以此为基础创建【自定义元件】)

我们可以在触发器中用ECA【界面-创建界面控件】传入参数【界面控件类型】从而动态创建界面控件

VT22

2.【界面控件】

【界面控件】包含界面编辑器中的【画板】和【画板内容】,我们也可以在触发器中动态创建。

比如使用ECA【界面-创建界面控件】通过传入参数【界面控件类型】从而动态创建界面控件

VT23

相关ECA

a.界面-获取指定命名的子控件

获得【玩家】【界面控件】下名称为【字符串】的子控件

b.界面-获得界面控件的父控件

获得【玩家】的【界面控件】的父控件

c.元件-通过元件路径获取元件实例下的控件

获得元件实例【元件】中路径为【字符串】的控件

d.界面-创建界面控件

为【玩家|玩家组】创建控件,父控件为【界面控件】,控件类型为【界面控件类型】

3.【元件类型】

界面编辑器中用户制作的【自定义元件】,可在ECA中用【元件类型】表示

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

VT24

4.【元件】

在触发器中,我们可以使用ECA【元件-创建元件】创建【元件类型】对应的【元件】。

【元件】与【界面控件】的不同在于,【界面控件】不支持自定义键值,而【元件】数据可以设置自定义键值。用户可以根据自己的需求选择合适的类型使用。

相关ECA

a.元件-创建元件

以【界面控件】作为父节点给【玩家】创建【元件类型】的拷贝实例

b.元件-获取控件所属的元件实例

获取【玩家】的【界面控件】所属的元件实例

c.元件-获得玩家的元件实例

获得玩家的元件实例【元件预设】

5.【元件预设】

UI编辑器中,用户手动设置在画板中的【自定义元件】,其根结点在ECA中用【元件预设】表示

我们可以通过ECA【元件-获得玩家的元件实例】将【元件预设】转换为【元件】

VT25

Q&A

1.希望介绍一下各个界面类型以及相互之间的联系

答:用户在编辑UI过程中,有些UI部分会需要重复利用,比如玩家自制的商品显示槽。因此UI编辑器提供了【自定义元件】可以复用UI。以此在ECA中引入了【元件类型】【元件预设】【元件】的概念与【自定义元件】对应。

画板中的所有节点都可以在触发器中用【界面控件】获取,但【界面控件】数据不支持自定义键值。而元件则解决了这个问题,【元件】可以设置自定义键值,用户可以在根据需求在【元件】上附加数据。

【自定义元件】在ECA中可以用【元件类型】获取,从而创建对应的【元件】;当用户手动将【自定义元件】放置到画板中时,可以在触发器中用【元件预设】变量获取,可以通过【元件-获得玩家的元件实例】转化为【元件】。

2.对于ECA【元件-获取控件所属的元件实例】,画板上将其他的界面控件作为【元件预设】的子控件,能否获取到【元件】?动态创建界面控件到【元件】作为子控件,是否可以获取到【元件】?

答:都是可以获取到的。只要界面控件路径位于【元件】子级路径下,使用ECA【元件-获取控件所属的元件实例】,就可以获取到所属的元件实例。