星火萌新笔记-UI篇-UI基础

计划做一个类似幸存者危城一样探索打怪捡垃圾的游戏，因为需要的功能更多是UI功能，例如搜索箱子，武器装备合成，武器融合等。所以计划先从UI学起。 笔记暂时以UI跟触发器为主，不涉及云变量等复杂的内容。笔记的内容比较基础，琐碎。

一、UI的基础操作

1、UI的类型与ID

UI的UI类型通常用于根据子控件/下属控件获取UI时使用场景示例：

UI的类型可通过对UI添加事件查看

UI的ID即数遍ID，通常用于生成UI时使用场景示例：         

2、UI通用属性设置

设置UI属性时，使用变量先保存查找到的UI，然后基于变量对UI的属性进行设置。

在变量类型使用错误时，UI的正确类型与变量设定的类型相同的变量可以正常设置；变量类型存在的而UI类型不存在的属性则会产生错误提示。

2.1布局-位置

位置分为相对位置与绝对位置绝对位置不受自动布局的影响，默认父控件的左上角为（0,0）点相对位置，受自动布局的影响，即受对齐方式、锚点位置与边距的影响

2.2布局-排列方式（锚点）

UI锚点的位置会影响UI的排列方式例如：当UI的锚点为左上角时，会按照居左局上排列当UI锚点为中间时，会按照水平居中，垂直居中排列当UI锚点为右下角时，会按照居右局下排列横向排列方式对应字符串

竖向排列方式对应字符串

2.3图片

2.4颜色

颜色格式为#000000（三个16进制（#(00~ff)(00~ff)(00~ff)）用这个颜色格式无法设置透明度

或者也可以用rgba(255,255,255,100)用这个格式可以设置透明度

2.5渲染层级

控件显示时，相同渲染层级的控件，位于列表下方的会遮挡位于列表上方的，子控件会遮挡父控件。

当多个控件拥有同一个父控件（或者同为页面层级）时，渲染层级可以影响控件的显示位置，渲染层级较大的控件会显示在上面（层级大的遮挡层级小的）

例如：有以下几个控件，渲染层级都是默认的0，当我们将香蕉放置在背包区域时，香蕉被背包遮挡。

如果想要使香蕉显示在背包上方，直接调整香蕉的层级是达不到想要的效果的，因为香蕉跟背包区域不在同一个父物体下，应该找到同一个父物体下的控件，即应该调高商店页面的渲染层级。

3、特殊UI说明

3.1可附着面板（attachable_panel）可以附着在地图单位身上的面板，有以下特殊属性

需要使用触发器绑定附着的单位

绑定后，面板会跟随物体的移动而移动，可用于制作血条、名称显示等功能

3.2动态文本（transition_label）

动态文本包含的第一段数字内容在进行改变时，预制有一个数值的改变动画

第一个参数可以点进去调节数值动画的曲线，第二个参数是数值动画的总时间，单位为毫秒。例如：我们要将“让123乘456”改变为“让234乘567”只有123→234会有数值动画，而456→567则没有。

在实际应用过程中，我们有时候也需要读取文本包含的数值信息，对包含的数值信息进行加减。文本信息截取的计算方式为：一个文字占3个位置，一个数字占1个位置，截取时需要从开始截取内容所在的位数截取到结束截取内容所在位数+1位例如：让123乘456

要截取“让”字就需要从0-3截取“乘”字就需要从6-9文字截取不全会显示为问号

正确截取演示：

3.3多功能格子

4、为UI添加事件

4.1直接添加

4.2多个UI共用一个事件

4.3动态添加事件

4.3.1无参数事件

4.3.2带参数事件

4.3.3特殊参数说明

4.4特殊UI事件的说明

4.4.1拖拽

On-drop：当结束拖放时的位置上有开启可拖放的控件时触发，目标控件触发on-dropped对应触发器事件：

On-throw：当结束拖放时的位置上无可拖放的控件时触发对应触发器事件：

4.4.2拖放

on-dropped：当有控件放置到此控件上时触发对应触发器事件：

5、UI动态生成

UI动态生成有两种方式：直接生成UI页，生成单个UI并调节属性

5.1生成UI页

生成UI页可使用以下语句

需要注意的是，这里需要填写是通过点击UI列表右上加号创建的UI页（即与mainpage同一层级）生成UI页后最好保存至数组中。以方便之后的读取使用。

5.2生成单个UI生成单个UI

需要使用以下语句生成

完整的动态生成UI包括以下几个步骤：

5.2.1生成UI

5.2.2绑定父子关系/将UI保存至全局变量（数组、表等）

5.2.3调节UI宽度高度、位置、图片等信息

5.2.4为UI添加事件，并传递合适的参数