控件编辑

控件是界面编辑的基本单位，你可以使用控件在玩家界面中显示图片或、文字以及动效。

选中控件后，可以在控件的高级设置中修改控件的外观、交互设定，以及给控件添加动画。

控件外观设置

在高级设置左上角，可以修改控件样式，更换控件使用的图片（文本控件为切换样式）。

控件在游玩时是否可见受以下属性影响

属性名称	功能入口	功能描述
默认显示	控件高级设置	控制控件在游戏初始化时是否显示
按玩家显示	控件高级设置	控制指定玩家界面游戏初始化时是否显示
使控件显示\隐藏的事件	控件高级设置-事件	控件收到指定事件后会显示\隐藏
设置控件可见性	蛋码-界面分类	蛋码可以动态修改控件的显隐
所在画布的可见性	画布设置；蛋码设置画布可见性	依赖所在画布的可见性
不透明度	控件高级设置	控件及其父控件不透明度为0时表现接近不可见，但仍能交互

控件支持的特殊显隐逻辑：

• 拍照时隐藏：玩家在地图里使用相机拍照时会自动隐藏该控件。
• 观战时隐藏：玩家被观战时，观战界面不会显示该控件。
• 自动隐藏：组件切换到显示状态后，经过x秒进入隐藏状态。
• 点击自动隐藏：玩家点击控件后，该控件会消失（只在点击玩家的界面生效）。

控件支持调整以下表现：

• 图片叠加色\文本色\文本背景色
• 宽度\高度
• 旋转角度
• 不透明度（子级会继承和叠加父级控件的不透明度）
• 水平\垂直翻转
• 可拖动（开启后玩家可以移动控件位置）

九宫拉伸

九宫拉伸设置可以改变控件的拉伸区域。其原理是将图形分成九份，拉伸图片时只改变中间的部分，保留边角形状。

如下图所示，修改按钮的九宫拉伸方式后，对它进行左右拉伸只会加长中间部分，对比直接进行缩放的图形形状更加自然，能够让按钮兼容不同长度的文本。

利用九宫属性的拉伸原理，你也可以对控件图片进行各种形式的再造。

屏幕适配

控件的屏幕适配属性用于调整控件在不同分辨率上的表现，可以解决不同玩家设备上ui控件位置偏移的问题。

1. 屏幕适配功能的本质是通过控制子级与父级（没有父级控件则默认为画布）的边距来确定控件的相对位置。

2. 屏幕适配可以选择控制单个或多个方向上的开关，但水平与左右、垂直与上下是互斥的。

3. 边距有两种填写模式，第一种是百分比，百分比代表着边距与控件绑定的父级的比值，边距会根据具体的画布比例改变。

   例：左侧20%意味着控件左侧据画布左侧始终保持五分之一画布的距离

第二种是像素，它代表着边距将被设定为固定长度，不跟随显示比例改变。

例：左侧20px意味着控件左侧与画布左侧始终保持20个像素的距离。

开启方向后，系统可以根据控件当前位置自动计算出边距，水平和垂直方向只支持使用比例。

控件有两种适配表现，一种是根据显示分辨率变化进行拉伸，另一种是保持控件显示的相对位置。

空节点的使用

在自适应布局中，我们可以使用空白节点作为工具来确保布局的一致性和美观。

空白节点就是没有任何内容的节点，可以是删掉图片的图片控件，也可以是没有文字的文字控件，任何控件都可以充当这个空白节点。

我们可以把自适应控件都绑定到同一个空白节点上，再利用空白节点对画布进行自适应，这样可以最大程度避免自适应对总体布局的影响。

点击左上角设置>编辑设置可以更改画布分辨率，预览在其他分辨率上的控件显示效果。

富文本

开启文本控件的富文本属性后，文本可以携带格式和样式信息。

比如，在纯文本里会显示"#R 文本"，而在富文本中，#R将会作为颜色格式信息，使文本内容呈现为红色。

开启富文本开关后，你可以通过文本编辑框右上角的按钮进入富文本编辑模式，你可以在这里直接编辑文本颜色和加粗、下划线、删除线等简易格式。

修饰符

使用富文本修饰符可以编辑更复杂的文本样式。

富文本修饰符以"#f"开始，使用"()"将修饰词包裹，衔接要修饰的内容文字，"#"（字母L小写）结束。

例如：#f(c:00ffo0)文字

如果需要同时启用多个修饰词，使用"|" （竖线）分割即可。

例如：#f(c:00ffO0|s:20)内容

目前支持的修饰符如下：

修饰类型	修饰符	举例
颜色修饰符	#f(c:颜色)	#f(c:00ff00)文字
字号	#f(s:字号)	#f(s:20)文字
描边	#f(o:颜色1O:大小)	#f(o:00ff00J0:2)文字
外发光	#f(g:颜色IG:大小)	#f(g:00ffOOlG:0.2) 文字
投影	#f(y：颜色|Y:偏移)	#f(y:00ffO0|Y:2,-2)文字
中划线	#f(h：颜色)	#f(h:00ff00)文字
下划线	#f(u:颜色)	#f(u:00ffoo)文字

预设颜色码

为了方便使用，我们提供了一批预设颜色，可以代替颜色码使用，具体如下：

R(红）、G（绿）、B（蓝）、Y（黄)、W（白）、K（黑）、U（紫）、O橙）、P（粉）、D（金）

例如"c:ffo000"也可以用"c:R"表示。

文字出框与自动缩放

富文本还常用于解决文本出框问题。

当你使用蛋码动态填入文本内容，或者地图在海外版本里被翻译成其他文字时，经常会出现文本长度超出控件大小的情况，导致文本显示不全。

使用富文本的出框显示方案和自动缩放设置可以改善显示效果。

自动缩放字号开关开启时，文本内容超出控件大小时会自动缩小字号以适应。

当自动缩放最小字号也无法容纳全部文本时，富文本将应用<文字出框显示方案>里选择的方案。

显示方案	描述
超框截断	不显示超出部分
超框换行显示	超出部分进行换行显示
显示省略号	即将超框时，最后一个字符显示为省略号
竖向滚动	超出部分竖向滚动显示
横向滚动	超出部分横向滚动显示（该方案会导致文本强制垂直居中）

以上为文本适应控件大小的处理方式，我们还提供控件大小适应文字的处理方式。

打开富文本后，屏幕适配属性上方会出现<控件大小自适应>开关。

自适应宽度或高度时，不可使用自动缩放字号和超框方案以及对应的对齐方式。

自适应宽度时，文本超框会自动增加宽度;

自适应高度时，文本超框会自动换行，控件高度自动向下适应。

启用自适应后，控件大小变化时，其子级的屏幕适配位置也会发生变化。

字间距、行间距

开启富文本的文本支持调整字间距和行间距，设置为负数时文字会产生重叠效果。

渐变字

开启富文本的渐变设置可以将文本设置为渐变色效果。

渐变支持设置2~5种颜色，可以设置渐变轴角度，但是无法调整不同颜色的渐变比例。

渐变色是针对一个文本控件里的所有内容设置，而非单行文本设置的。

控件交互设置

控件支持点击、长按和拖动交互。

多个可以交互的控件重叠时，交互只会触发层级最高的控件交互事件。

控件触发的事件都附带触发玩家参数，并非全局事件，比如通过点击控件事件触发其他控件的显示只会对点击了的玩家的界面生效，不会对所有玩家的界面生效。

在蛋码中只有指定的积木可以接收界面发出的事件。

<仅向界面发送>属性开启后，只有界面会接收到该控件发送的事件,蛋码和其他组件与逻辑（例如运动器）将无法收到该控件发送的事件。

如果该控件发送的事件只是为了影响界面，打开该选项可以优化地图性能。

禁用控件交互

控件支持禁用交互。

在高级设置-事件页下关闭<可以交互>开关即可禁用控件的所有交互识别。

禁用后，多个控件重叠时可以穿透点击到下一级的控件，也不会影响玩家对场景中支持屏幕交互的组件和视角的操作。

点击、长按和拖动

控件可以识别点击和长按，点击、长按和松开均可触发自定义事件。

点击和按下的区别

需要注意的是，点击实际上就是按下再立刻松开的操作，因此点击通常也会触发按下事件和松开事件。按下则只会触发按下事件。

可以理解为：点击=按下+松开；按下=按下

因此，不建议同时启用点击、按下和松开触发事件的交互反馈。

• 按下后，系统会根据自定义的<长按触发时间>判定是否触发长按触发事件。

• 在高级设置-基础页中，可以开启<可拖动>功能，打开后玩家按住控件可以移动控件位置。

• 控件支持配置点击、按下和松开（抬起）时的音效。

特殊控件的滑动交互

手势区域可以识别八个主要方向的滑动手势；使用列表作为父级时，滑动可以改变其子级控件可见范围。

控件动画设置

控件支持添加动画效果，在高级设置-动画页中可创建控件动画。

控件动画支持复制粘贴在其他同类型控件使用。

控件动画具有以下属性：

属性	描述
动画名称	动画名称，能够根据名称在蛋码中引用。
是否循环播放动画	打开后，控件动画会循环播放。
相对坐标系	影响控件位移的相对坐标系。使用自身坐标系时，动画会进行整体偏移；使用画布坐标系时，控件会移动到编辑动画时的画布位置；以父级坐标系时，重复播放会回到初始位置，父级移动也可以跟随移动。
使动画开始的事件	界面收到自定义事件后会播放该动画，控件不显示时也会生效。 蛋码<设置控件动画状态>中的播放命令也可以触发动画播放。
使动画暂停的事件	界面收到自定义事件后会暂停播放该动画，控件不显示时也会生效。 蛋码<设置控件动画状态>中的暂停命令也可以使动画暂停。
使动画继续播放的事件	处于播放状态的动画收到自定义事件后会继续播放该动画，控件不显示时也会生效。 蛋码<设置控件动画状态>中的恢复命令也可以恢复动画播放。
重置动画事件	该属性会影响一个控件上的所有动画，触发自定义事件时会立刻停止该控件的动画并使控件回到初始位置。 蛋码<重置界面动画>也可以重置控件动画。
自动播放动画	用于指定游戏开始时该控件自动播放的动画，添加控件动画后可以选择。
到达发送事件	关键帧属性，可以在动画进行到某个关键帧时发送自定义事件。

如何制作控件动画

1. 简易位移动画

   控件动画的制作和“沿路点运动”的设置相似，添加关键帧后，移动、旋转或缩放代表这个关键帧的控件，系统会自动计算上一帧到这一帧的运动过程。通过修改持续时间可以调整动画播放的速率。

   左侧齿轮可以复制粘贴和调整关键帧顺序，右侧箭头可以跳转到帧属性编辑界面，通过修改数值制作更精细的变化。

2. 添加特殊动画

   点击帧属性齿轮还可以编辑更多关键帧属性。在普通的位移动画基础上还可以制作更复杂的属性变化，比如图片可以修改叠加色、文本可以修改字号、内容等。