UI编辑器

1. 2D UI编辑器(编辑器1.9.x系列版本)

1.1. 作用及简介

UI编辑器主要用于2D界面的设计与布局，界面的预览以及UI控件的编辑和布局。所用的格式为*.uix，主界面如下所示：
alt
（1）菜单栏；（2）工具栏；（3）节点树；（4）预览窗口；（5）窗口控件；（6）属性窗口。

1.2. 打开方式

UI编辑器有两种打开的方式：

  1. 在主编辑器的资产界面找到对应的UI文件，即后缀名为*.uix的文件。双击则自动打开UI编辑器以及对应的UI文件。
  2. 在主编辑器的菜单栏的窗口菜单下，选中UI编辑器，即可打开。
    alt

1.3. 菜单功能

菜单包含文件、编辑、设置和帮助四项。

1.3.1. 文件菜单(File)

  1. 打开：打开一个.uix文件加载模型。
  2. 保存：保存当前的ui文件。
  3. 关闭：清空当前子编辑器，恢复空场景状态。
    alt

1.3.2. 编辑菜单(Edit)

  1. 撤销操作：执行该操作会撤销上一步对属性的操作，目前一共能记住20步操作。
  2. 重做操作：执行该操作会还原刚刚撤销的操作。
    alt

1.3.3. 设置菜单

点击“设置”按钮，弹出设置对话框，可设置当前子编辑器的相机、画布。

alt

1.3.4. 帮助菜单(Help)

提示当前子编辑器的版本信息。
alt

1.4. 工具栏

工具栏包括三组按钮，分别是基本操作按钮、拾取变换操作按钮和顶点属性展示按钮。

  1. 基本操作按钮：包括保存、撤销、设置、切换编辑/显示模式。对应菜单栏的文件和编辑中的操作，可使操作更方便。
    alt
  2. 拾取变换操作按钮：包括位置、旋转、缩放、针对窗口里的控件进行平移，旋转缩放等操作。
    alt
  3. 模拟窗口预览按钮：点击后会弹出一个新窗口，显示当前预览区的内容，可依据手机的不同型号切换窗口大小。 alt
    alt

    1.5. 节点树

此模块用于显示当前窗口内所存在的控件和各个控件之间的父子关系。支持拖动节点到一个节点下形成父子关系以及复制粘贴节点的操作。每个节点都支持双击可以修改节点的名字这个操作。
alt

1.6. 预览窗口

此模块能最为直观的反应出当前的编辑效果。在编辑模式下，能够支持拾取操作，显示锚点时，需点中锚点所在小包围盒、或x、y轴进行拖动；不显示锚点时，点中节点包围盒即可进行拖动； 支持用户直接在这界面调整UI控件的位置，旋转和缩放各个控件的操作。

编辑模式下，边框为紫色。 alt
alt
显示模式下边框为绿色，显示模式不可编辑UI控件。 alt

1.7. 控件窗口

此模块提供了当前编辑器所能提供的所有UI控件，每个控件都有自己的功能特点。在下一节说明每个控件的属性的时候，再来说他们的功能。每个控件支持拖拽操作，将对应想要添加的控件，鼠标左键点击按住往预览窗口中拖拽，即可在拖拽的位置产生对应的控件，并且也会在节点树中添加当前所添加的控件 。
alt

1.8. 属性窗口

此模块窗口用来编辑和查看对应的控件的信息。每个控件都有统一的名为UINode的属性。所以在这统一说明，而每个控件自己特殊的控件属性，则在接下来详细介绍。而统一的UINode属性如下图所示：
alt

  1. 名称：显示当前选择控件的名字，不支持修改操作，可以在节点树中双击对应节点进行修改。
  2. 位置：显示当前控件所在的位置，支持修改操作。
  3. 缩放：显示当前控件的显示比例，支持修改操作。
  4. 旋转：显示当前控件的旋转角度，支持修改操作。
  5. 局部Z值：代表深度值，值越小则显示的越靠前。只跟自己同层级的比较。
  6. 全局Z值：代表深度值，值越小则显示的越靠前，跟所有层级的控件比较。
  7. 锚点：控件的重心点。
  8. 尺寸：显示当前控件的尺寸大小，支持修改操作。
  9. 是否可见：设置是否在窗口中显示出来，默认显示。 每个控件还拥有一个统一都有的属性，就是布局属性。通过设置布局属性可以更方便地来设置控件的位置：
    1. 当选中启用对齐的功能时候，会显示两个功能选项水平停靠和垂直停靠。 alt
    2. 水平停靠有5中选项可供选中，不停靠，靠左，靠右，居中和左右停靠。当选中靠左或靠右时会出现距离调整的选项来控制控件距离左边或者右边的距离。 alt
    3. 垂直停靠和水平停靠的效果类似，只不过水平挺高是左右侧的停靠，垂直是上下的停靠。

说完统一拥有的属性，接下来介绍每个控件特有的属性：

  • UIScene
    功能特点: 一个UIActor拥有一个UIScene, 类似XEScene, 不过UIScene是显示一个UI界面的, 是UI的根节点. alt
    1. Designresolution: 设计分辨率, 设计分辨率建议采用市场中使用率最高的设备分辨率.
    2. ResolutionPolicy: 适配规则, 对于多种设备分辨率不一致, 我们提供了多种适配方式, 关于适配方式的介绍可以查看UI系统
    3. Custom Policy: 自定义适配规则, 当宽高比大于Custom Aspect属性值时, 适配规则采用UpperResulotionPolicy属性, 否则采用LowerResolutionPolicy属性. alt
    4. Support Bangs: 是否适配刘海屏.
    5. PanelOrder: UI层级(继承自UIPanel的属性, 详情见UIPanel)
    6. AutoBatch: 是否自动合批.
  • Widget
    功能特点：这个控件并没有什么实际上的意义，他就相当于一个空Actor。主要 用处可以是作为某些控件的父节点，类似与文件夹的归纳作用。
    alt
    1. 是否有效：控制控件是否能够生效。
      1. 开启点击事件：控件响应点击事件。
      2. 点击响应位置：含义同属性名；控件响应位置&范围未必同控件的位置&大小一致。
      3. 点击响应范围：含义同属性名。
      4. 传递点击消息：开启后，控件响应点击事件后，点击消息会继续向下传递。
    2. 颜色：设置控件的颜色。
  • Button
    功能特点：作为按钮拥有点击的功能
    alt
    1. 是否有效：控制控件是否能够生效。
      1. 颜色：设置控件的颜色。
      2. 背景图片-常规：正常情况下的按钮显示的图片。
      3. 背景图片-按下：当按钮被按下的时候显示的图片。
    2. 背景图片-禁用：当按钮处于不可点击被禁用的情况下显示的图片。

  • Image
    功能特点：用来显示2d贴图或RenderTexture的控件。
    alt

    1. 是否使用贴图：控件不使用贴图时，以纯色显示。

    2. 使用子视图纹理：开启该选项后，用于将3d模型显示在UI上。

      • 使用主编辑器subview ： 开启此选项后，可以选择主编辑器已编辑好的subview，但不能在UI编辑器中预览。
      • 相机：调整3d模型对应相机的位置、旋转、视角等属性。
      • 模型预览：选择3d模型路径，当前仅支持.dress、.mdl文件，此属性不会保存，仅用于编辑器中预览。 alt

    3. 纹理：使用纹理且不使用子视图时，用于加载贴图,支持格式当前包括：pvr、plist。

      • 选用plist文件后，会提供两种交互方式选择其中小图。 alt
        alt
      • 【说明】当在同一Panel内两控件使用同一plist且存在前后遮挡时，事件点击可能会存在问题，此种情况， 建议在主界面资产模块查找此plist文件，右键创建plist文件的镜像文件，然后对两控件应用不同的plist。 alt
    4. 图像类型：包括simple、9slice、fill三种模式；
      • simple 最常用模式，简单显示贴图。 alt
      • 9slice 九宫格模式，用于图像四角不拉深，中间部分进行拉伸。 alt
      • fill 填充模式。
        • 填充模式：包括横向、纵向、径向90、径向180、径向360度等填充方式
        • 填充起点：图像开始填充的位置
        • 填充数量：范围0 ~ 1
        • 顺时针方向： 用于径向模式时，图像设置的填充方向 image-fill alt
    5. 控件大小为纹理大小：设置控件的大小是否和纹理同等大小。
    6. 左右翻转：设置是否让控件的左右翻转
    7. 控件百分比：同属性名含义、设置控件显示百分比,x:left,y:right,z:top,w:bottom
    8. 使用遮罩： 开启选项后，使用遮罩纹理

    9. 帧动画：根据设置的纹理来将纹理切割成几个小图来形成动画。

      alt

      • UV切割：将纹理分割成几张图片。比如说一张纹理内含有16个图案，这时设置成4,4.。则会切割出16个图案来进行动画循环。
      • FPS：设置动画的帧率。
      • 总帧数：纹理切割后几张成一个循环。 alt
  • EditBox
    功能特点：用于接受文本输入的控件。
    alt
    1. 是否有效：控制控件是否能够生效。
    2. 颜色：设置控件的颜色。
    3. 文本：再次可以输入要显示出来的文字。
    4. 字体：当前所使用的字体(支持系统字体, ttf字体和图片字体)。
    5. 大小：字体显示的大小。
    6. 颜色：设置字体的颜色。
    7. 背景：设置控件的背景图片。
    8. 默认文本：在用户未输入未点击的时候，控件显示的默认文字。
    9. 默认文本字体：显示默认文本使用的字体(支持系统字体, ttf字体和图片字体)。
    10. 默认文本大小：默认字体显示的大小。
    11. 默认文本颜色：默认字体的颜色。
    12. 长度显示：设置最多输入文字的长度。
    13. 编辑类型：有无格式、电子邮件地址、数值、电话号码、链接、小数、单行文本格式选择。
    14. 文本类型：有密码、每个单词首字符大写、每一句首字符大写、所有字符大写、所有字符小写类型作为选择，根据需求选择自己需要的类型。
    15. 确定键类型：有默认、确定、发送、搜索、链接和下一步作为选择。
    16. 布局：设置控件内文件的布局方式有左对齐，居中和右对齐三种。
  • ProgressBar
    功能特点：进度调控件，用来体现当前的进度情况。
    alt
    1. 是否有效：控制控件是否能够生效。
    2. 颜色：设置控件的颜色。
    3. 背景：设置控件的背景图片。
    4. 方向：设置进度条前进的方向。
    5. 进度值：设置进度条整体的大小。 alt
  • Slider
    功能特点：滑动模块控件，通过调整滑块的位置来调整数值。
    alt
    1. 是否有效：控制控件是否能够生效。
    2. 颜色：设置控件的颜色。
    3. 滑过区域图片：被换过的轨道要显示的图片。
    4. 轨道图片：轨道显示的图片。
    5. 滑块常规图片：滑块正常情况下显示的图片。
    6. 滑块按下图片：滑块被按下时显示的图片。
    7. 滑块禁止图片:滑块被禁用时显示的图片。
    8. 进度值：目前所在的位置，这个要相对与下方的属性来的。
    9. 最大值：进度条最大的数值。
    10. 滑块大小: 滑块的大小。
  • Label
    功能特点：标签控件用来显示文字。
    alt
    1. 字体大小：设置字体的大小。
    2. 文本类型：包括系统字体、ttf字体以及图片字体三种类型。
      • 为方便美术同学制作，编辑器全局设置中提供全局默认字体类型设置，设置后，新添加字体控件均会按照此类型设置。 GlobalFontSet
    3. 字体路径：可以输入字体路径来修改字体，支持的格式包括.ttf、.plist。
    4. 文本：输入要显示的文字。
    5. 水平布局：设置字体位于控件的相对位置。
    6. 垂直布局：设置字体位于控件的相对位置。
    7. 文本尺寸：设置能显示文字的长度和高度（即行数）。当为0时表示没有限制。
    8. 字体颜色：设置字体的颜色。
    9. Upper Color ：设置字体渐变色，字体上半部分颜色。
    10. Lower Color ：设置字体渐变色，字体下半部分颜色。
    11. 文字间距 ：设置文字之间的间距。
    12. 行间距 ：设置行和行之间的间距。
    13. 自动换行 ：当文字达到边界后是否自动换行。
    14. 英文单词换行截断：当英文单词来到边界后是否截断。
    15. 描边大小：字体描边大小，ttf或移动端系统字体才生效。
    16. 描边颜色：含义同属性名。
  • CheckBox
    功能特点：多选框用来标记是否被选定，选中与否的状态能够显示在复选框上，支持多选操作。
    alt 
    1. 是否有效：控制控件是否能够生效。
2. 颜色：设置控件的颜色。
3. 背景图片-常规：设置控件正常情况下显示的图片。
4. 选中标记-常规：设置控件正常情况下被点击时才会显示的图片。
5. 背景图片-选中：设置控件被选中状态下才会显示的图片。
6. 背景图片-禁用：设置控件禁用情况下显示的图片。
7. 选中标记-禁用：设置控件禁用情况下被点击时才会显示的图片。
8. 缩放比例（按下时）：设置在点击是所显示出来的图片缩放的比例。
  • RadioButton
    功能特点：基本功能和CheckBox差不多，但是需要配合RadioButtonGroup使用。使得同个RadioButtonGroup里的RadioButton只能被选中一个。
    alt 
    1. 各个功能与CheckBox一致，可参考上方的CheckBox的属性。
  • RadioButtonGroup
    功能特点：与RadioButton配合使用，同个RadioButtonGroup内的RadioButton有互斥的属性，只允许被选中一个。
    alt 
    1. 是否有效：控制控件是否能够生效。
2. 颜色：设置控件的颜色。
3. 允许没有选中：设置是否允许都不选中的情况。
  • ComboBox 功能特点：下拉链表控件，点击下拉按钮，会出现可供选择的链表菜单。点击菜单中的项来使对应功能生效。
    alt 
    1. 是否有效：控制控件是否能够生效。
2. 颜色：设置控件的颜色。
3. 编辑框背景：设置编辑框的背景图片。
4. 下拉按钮背景-常规：设置下拉按钮常规状态下显示的图片。
5. 下拉按钮-选中：设置下拉按钮点击时显示的图片。
6. 下拉列表背景：设置整个下拉列表的背景图片。
7. 下拉项目背景-常规：单个下拉项的正常状态下的背景图片。
8. 下拉项目背景-选中：单个下拉项的被点击状态下的背景图片。
9. 编辑框接收输入：设置编辑框能否能够接收输入信息。
10. 下拉项高度：设置单个下拉项的大小。
11. 颜色：设置下拉项目的颜色。
12. 下拉列表长度：设置下拉列表的长度。
  • Layout
    功能特点：用来布局的的控件，相当于一个容器来接纳一些控件，Layout内的控件会按照设置好的布局方法自动布局。
    alt 
    1. 背景：设置背景图片。
2. 四边填充：距离上下左右的距离
3. Auto Layout: 自动布局，子节点隐藏时，后续节点自动填充，仅支持横向、纵向容器类型。
4. 分隔间距：子控件之间的距离
5. 裁切子节点：当子节点超过自身大小时，是否进行 裁剪
6. 裁切类型：已废弃，后续版本会移除。
7. 容器类型：选择布局内的对齐方式，包括横向、纵向、网格模式。
  • ScrollView
    功能特点：View内可以拥有很多控件或者其他内容，通过垂直滑动或者水平滑动，将在显示区域外的内容显示移动显示区域中。
    alt 
    1. 是否有效：控制控件是否能够生效。
2. 颜色：设置控件的颜色。
3. 背景：设置背景图片。
4. 四边填充：距离上下左右的距离
5. 分隔间距：子控件之间的距离
6. 裁切子节点：当子节点超过自身大小时，是否进行 裁剪
7. 裁切类型：选择裁剪的类型。
8. 容器类型：选择布局内的对齐方式。
9. 方向：设置朝哪个方向滑动能够触发控件。
10. 滚动区域大小：设置滚动的区域的大小。
11. 滚动区域位置：设置滚动的区域位置。
12. 滚动惯性：设置是否具有惯性效果，即当滑动停止后还会滑动一小段距离。
13. 启用滚动条：设置是否显示滚动条。
14. 滚动条宽度：设置滚动条的宽度。
15. 滚动条颜色：设置滚动条的颜色。

  • ListView
    功能特点：列表显示区域，将自身的ListItem的内容显示出来。有可能Item过多无法全都显示出来，可以通过滑动将Item显示出来。
    alt 

    1. 背景：设置背景图片。
2. 四边填充：距离上下左右的距离
3. Auto Layout: 自动布局，子节点隐藏时，后续节点自动填充，仅支持横向、纵向容器类型。
4. 分隔间距：子控件之间的距离
5. 裁切子节点：当子节点超过自身大小时，是否进行 裁剪
6. 裁切类型：已废弃，后续版本会移除。
7. 容器类型：选择布局内的对齐方式。
8. 方向：设置朝哪个方向滑动能够触发控件。
9. 滚动惯性：设置是否具有惯性效果，即当滑动停止后还会滑动一小段距离。
10. 启用滚动条：设置是否显示滚动条。
11. 滚动条宽度：设置滚动条的宽度。
12. 滚动条颜色：设置滚动条的颜色。
13. 横向对齐：  子节点横向对齐方式，包括：靠左、靠右、居中三种方式，容器类型设置为横向或者网格模式 且子节点总宽度小于显示宽度时生效。
14. 垂向对齐：  子节点垂向对齐方式，包括：靠上、靠下、居中三种方式，容器类型设置为垂向或者网格模式 且子节点总高度小于显示高度时生效。

  • TreeView
    功能特点：跟上述的ListView类似，不过这个空间展示方式是树形方式，子项间可以拥有父子关系。
    alt 

    1. 是否有效：控制控件是否能够生效。
2. 颜色：设置控件的颜色。
3. 背景：设置背景图片。
4. 四边填充：距离上下左右的距离
5. 分隔间距：子控件之间的距离
6. 裁切子节点：当子节点超过自身大小时，是否进行 裁剪
7. 裁切类型：选择裁剪的类型。
8. 容器类型：选择布局内的对齐方式。
9. 方向：设置朝哪个方向滑动能够触发控件。
10. 滚动区域大小：设置滚动的区域的大小。
11. 滚动区域位置：设置滚动的区域位置。
12. 滚动惯性：设置是否具有惯性效果，即当滑动停止后还会滑动一小段距离。
13. 启用滚动条：设置是否显示滚动条。
14. 滚动条宽度：设置滚动条的宽度。
15. 滚动条颜色：设置滚动条的颜色
16. 行缩进：设置每行相比于父节点缩进的长度。
17. 行高：设置每一项的高度。
18. 大小：设置每一行的大小。
  • TabView
    功能特点：分页显示，每个标签页对应着不同的内容。通过选中标签页来切换显示的内容。
    alt 
    1. 是否有效：控制控件是否能够生效。
2. 颜色：设置控件的颜色。
3. 标签宽度：设置标签页的宽度。
4. 标签高度：设置标签页的高度。
5. 选中时缩放：设置当点击标签页时，标签页缩放的比例。
6. 标签位置：设置标签显示的位置。
  • Guipage
    功能特点：用来使场景有种灰蒙蒙的效果
    alt 
    1. 是否有效：控制控件是否能够生效。
2. 灰度值：设置控件的灰度，越大越接近黑色。
  • UIFX 功能特点：2d粒子在UI上显示
    alt
    1. FxPath：粒子路径，后缀.fx。
    2. FxLayer：粒子显示层。
      • Before:在UI之前渲染，显示在整体UI后边。
      • Between: 可以同正常UI控件一样参与UI渲染排序，但当前不支持裁剪。
      • After: 在UI之后渲染，显示在整体UI前边。
    3. Fx_AutoPlay : 自动播放
    4. Fx_Restart : 重启
  • VirtualListView
    功能特点：虚拟列表，支持无限数据添加，编辑器端仅编辑属性，不支持添加子节点。 alt 
    1. 使用贴图：背景是否使用贴图显示。
2. 四边填充：距离上下左右边界的距离。
3. 分隔间距：子控件之间的距离。
4. 方向：设置朝哪个方向滑动能够触发控件，包括垂向、横向两种。
5. 布局模式：single,multi,grid三种。
    - single : 单行单列
    - multi: 多行单列或多列单行，固定行数或列数。
    - grid:  网格模式同multi,相对更自由，
6. 弹回效果：滚动区域触底/顶部是否回弹。
7. 滚动惯性：设置是否具有惯性效果，即当滑动停止后还会滑动一小段距离。
  • UIPanel 功能特点：面板控件，用于新版自动合批，添加此控件后，Panel内节点默认会自动合批。 alt
    1. RenderOrder: 用于Panel间的排序，值越小显示越靠前。
      • 需要注意的是：Panel内有子Panel时，子Panel RenderOrder会受到父Panel影响，父Panel调整RenderOrder 其变化量会 同步到子Panel。
    2. Auto Batch: 是否自动合批，默认开启。
    3. 为方便美术同学将老版本uix变更到新版，提供widget->panel转换工具，节点树中选中某Widget，右键选择转换至Panel。 alt

​

2. UI编辑器（编辑器1.10.x-3.x.x系列版本）

2.1. 作用及简介

UI编辑器主要用于2D界面的设计与布局，界面的预览以及UI控件的编辑和布局。所用的格式为*.uix，主界面如下所示：

（1）菜单栏；（2）工具栏；（3）节点树；（4）预览窗口；（5）窗口控件；（6）属性窗口；（7）动画资产窗口

2.2. 打开方式

UI编辑器有两种打开的方式：

  1. 在主编辑器的资产界面找到对应的UI文件，即后缀名为*.uix的文件。双击则自动打开UI编辑器以及对应的UI文件。

  2. 在主编辑器的菜单栏的窗口菜单下，选中UI编辑器，即可打开。

2.3. 菜单功能

菜单包含文件、编辑、设置和帮助四项。

2.3.1. 文件菜单(File)

  1. 新建：暂未实现；
  2. 打开：打开一个.uix文件加载模型；
  3. 保存：保存当前的ui文件；
  4. 关闭：清空当前子编辑器，恢复空场景状态。

2.3.2. 编辑菜单(Edit)

  1. 撤销操作：执行该操作会撤销上一步对属性的操作，目前一共能记住20步操作。
  2. 重做操作：执行该操作会还原刚刚撤销的操作。

2.3.3. 帮助菜单(Help)

提示当前子编辑器的版本信息。

2.4. 工具栏

工具栏包括三组按钮，分别是基本操作按钮、拾取变换操作按钮和便捷操作按钮。

基本操作按钮：包括保存、撤销、切换编辑/显示模式。对应菜单栏的文件和编辑中的操作，可使操作更方便。

拾取变换操作按钮：包括位置、旋转、缩放、针对窗口里的控件进行平移，旋转缩放等操作。

便捷操作按钮：包括显示、预览、2D/3D模式切换、动画资产界面显隐操作。

2.5. 节点树

此模块用于显示当前窗口内所存在的控件和各个控件之间的父子关系。支持拖动节点到一个节点下形成父子关系以及复制粘贴节点的操作。每个节点都支持双击可以修改节点的名字这个操作。界面下方为节点树搜索框，可设定大小写锁定及正则表达式等搜索方式，末尾灰色按钮控制节点树的折叠展开。

2.6. 预览窗口

此模块能最为直观的反应出当前的编辑效果。

编辑模式下，能够支持拾取操作，显示锚点时，需点中x、y轴进行拖动； 支持用户直接在这界面调整UI控件的位置，旋转和缩放各个控件的操作。

显示模式不可编辑UI控件。

2.7. 控件窗口

此模块提供了当前编辑器所能提供的所有UI控件，每个控件都有自己的功能特点。在下一节说明每个控件的属性的时候，再来说他们的功能。每个控件支持拖拽操作，将对应想要添加的控件，鼠标左键点击按住往预览窗口中拖拽，即可在拖拽的位置产生对应的控件，并且也会在节点树中添加当前所添加的控件 。

2.8. 属性窗口

此模块窗口用来编辑和查看对应的控件的信息。

窗口顶部存在节点属性组件的添加按钮，可根据需求添加相应的属性组件模块。

每个控件都有统一的名为UINode的属性。所以在这统一说明，而每个控件自己特殊的控件属性，则在接下来详细介绍。而统一的UINode属性如下图所示：

属性选项介绍：

  1. ID：显示当前选择控件的ID，不支持修改操作。
  2. 名称：显示当前选择控件的名字，不支持修改操作，可以在节点树中双击对应节点进行修改。
  3. 自定义数据：储存一些自定义编辑信息。
  4. 位置：显示当前控件所在的位置，支持修改操作。
  5. 缩放：显示当前控件的显示比例，支持修改操作。
  6. 旋转：显示当前控件的旋转角度，支持修改操作。
  7. 全局Z值：代表深度值，值越小则显示的越靠前，跟所有层级的控件比较（GlobalZOrder作为UI节点的属性，可以修改UI渲染节点提交给渲染队列的顺序；z值越大者越先被渲染，显示越靠后）。
  8. 锚点：控件的重心点。
  9. 尺寸：显示当前控件的尺寸大小，支持修改操作。
  10. 是否可见：设置是否在窗口中显示出来，默认显示。

每个控件还拥有一个统一都有的属性，就是WidgetAlignment属性。通过设置WidgetAlignment属性可以更方便地来设置控件的位置：

属性选项介绍：

  1. 当选中启用对齐的功能时候，会显示五个功能选项组件名字、目标、对齐模式、水平停靠和垂直停靠。
  2. 水平停靠有5中选项可供选中，不停靠，靠左，靠右，居中和左右停靠。当选中靠左或靠右时会出现距离调整的选项来控制控件距离左边或者右边的距离。
  3. 垂直停靠和水平停靠的效果类似，只不过水平挺高是左右侧的停靠，垂直是上下的停靠。

说完统一拥有的属性，接下来介绍每个控件特有的属性：

  • UIScene

    功能特点: 一个UIActor拥有一个UIScene, 类似XEScene, 不过UIScene是显示一个UI界面的, 是UI的根节点。

    属性选项介绍：

    1. Designresolution: 设计分辨率, 设计分辨率建议采用市场中使用率最高的设备分辨率。
    2. ResolutionPolicy: 适配规则, 对于多种设备分辨率不一致, 我们提供了多种适配方式, 关于适配方式的介绍可以查看UI系统。
    3. Custom Policy: 自定义适配规则, 当宽高比大于Custom Aspect属性值时, 适配规则采用UpperResulotionPolicy属性, 否则采用LowerResolutionPolicy属性。alt
    4. Support Bangs: 是否适配刘海屏。
    5. PanelOrder: UI层级(继承自UIPanel的属性, 详情见UIPanel)。
    6. AutoBatch: 是否自动合批。
    7. RenderMode：渲染模式，可选择屏幕区域或是世界区域渲染。
    8. Pos：位置。
    9. Mask：是否启用遮罩。
    10. Use Physical：是否采用物理模拟。

2.8.1. Widget

  • Widget

    功能特点：这个控件并没有什么实际上的意义，就相当于一个空Actor。主要用处可以是作为某些控件的父节点，类似与文件夹的归纳作用。

    属性选项介绍：

    1. 是否有效：控制控件是否能够生效。
    2. 开启点击事件：控件响应点击事件。
      1. 点击响应位置：含义同属性名；控件响应位置&范围未必同控件的位置&大小一致。
      2. 点击响应范围：含义同属性名。
    3. 传递点击消息：开启后，控件响应点击事件后，点击消息会继续向下传递。
    4. 颜色：设置控件的颜色。

2.8.2. Button

  • Button

    功能特点：作为按钮拥有点击的功能

    属性选项介绍：

    1. 背景图片-常规：正常情况下的按钮显示的图片。
    2. 背景图片-按下：当按钮被按下的时候显示的图片。
    3. 背景图片-禁用：当按钮处于不可点击被禁用的情况下显示的图片。
    4. 背景图片-选中：当按钮处于选中状态下显示的图片。
    5. 可选中：设置按钮是否可以被选中。
    6. 设为选中：设置按钮为选中状态。
    7. 开启点击动画：激活点击动画。
    8. 点击缩放：点击后的缩放的比例设置。
    9. 点击平移：点击后按钮的平移设置。

2.8.3. Image

  • Image 功能特点：用来显示2d贴图或RenderTexture的控件。

    属性选项介绍：

    1. SpriteRenderComponent：是否启用组件属性。
    2. Component Name：组件名字，不可更改。
    3. Layer：没有太大的作用，Layer数值不同将影响image控件是否在同一批次合批。
    4. 使用贴图：控件不使用贴图时，以纯色显示。

    5. 使用子视图纹理：开启该选项后，用于将3d模型显示在UI上。

      • 使用主编辑器subview ： 开启此选项后，可以选择主编辑器已编辑好的subview，但不能在UI编辑器中预览。
      • 使用默认配置：是否采用默认的属性配置，选择后将隐藏相机及模型预览选项。
      • 相机：调整3d模型对应相机的位置、旋转、视角等属性。
      • 模型预览：选择3d模型路径，当前仅支持.dress、.mdl文件，此属性不会保存，仅用于编辑器中预览。

    6. 纹理：使用纹理且不使用子视图时，用于加载贴图,支持格式当前包括：pvr、plist.

      • 选用plist文件后，会提供两种交互方式选择其中小图。
      • 【说明】当在同一Panel内两控件使用同一plist且存在前后遮挡时，事件点击可能会存在问题，此种情况， 建议在主界面资产模块查找此plist文件，右键创建plist文件的镜像文件，然后对两控件应用不同的plist。

    7. 图像类型：包括simple、9slice、fill三种模式；

      • simple 最常用模式，简单显示贴图。
      • 9slice 九宫格模式，用于图像四角不拉深，中间部分进行拉伸。
      • fill 填充模式。
        • 填充模式：包括横向、纵向、径向90、径向180、径向360度等填充方式
        • 填充起点：图像开始填充的位置
        • 填充数量：范围0 ~ 1
        • 顺时针方向： 用于径向模式时，图像设置的填充方向

    8. 控件大小为纹理大小：设置控件的大小是否和纹理同等大小。

    9. 左右翻转：设置是否让控件的左右翻转
    10. 控件百分比：同属性名含义、设置控件显示百分比,x:left,y:right,z:top,w:bottom
    11. 使用遮罩： 开启选项后，使用遮罩纹理
    12. 帧动画：根据设置的纹理来将纹理切割成几个小图来形成动画。
      • UV切割：将纹理分割成几张图片。比如说一张纹理内含有16个图案，这时设置成4,4.。则会切割出16个图案来进行动画循环。
      • FPS：设置动画的帧率。
      • 总帧数：纹理切割后几张成一个循环。

2.8.4. EditBox

  • EditBox

    功能特点：用于接受文本输入的控件。

    属性选项介绍：

    1. 文本：再次可以输入要显示出来的文字。
    2. 字体：当前所使用的字体(支持系统字体, ttf字体和图片字体)。
    3. 大小：字体显示的大小。
    4. 颜色：设置字体的颜色。
    5. 背景：设置控件的背景图片。
    6. 默认文本：在用户未输入未点击的时候，控件显示的默认文字。
    7. 默认文本字体：显示默认文本使用的字体(支持系统字体, ttf字体和图片字体)。
    8. 默认文本大小：默认字体显示的大小。
    9. 默认文本颜色：默认字体的颜色。
    10. 长度限制：设置最多输入文字的长度。
    11. 编辑类型：有无格式、电子邮件地址、数值、电话号码、链接、小数、单行文本格式选择。
    12. 文本类型：有密码、每个单词首字符大写、每一句首字符大写、所有字符大写、所有字符小写类型作为选择，根据需求选择自己需要的类型。
    13. 确定键类型：有默认、确定、发送、搜索、链接和下一步作为选择。
    14. 布局：设置控件内文件的布局方式有左对齐、居中和右对齐三种。
    15. 垂直对齐：垂直方向的对齐方式，有上对齐、居中和下对齐三种。

2.8.5. ProgressBar

  • ProgressBar

    功能特点：进度调控件，用来体现当前的进度情况。

    属性选项介绍：

    1. 背景：设置控件的背景图片。
    2. 填充模式：图片的填充模式，分为简单填充及径向填充。
    3. 方向：设置进度条前进的方向。
    4. 进度值：设置进度条整体的大小。
    5. 自动更新：是否启用自动更新。
    6. 更新周期：更新周期的大小设置。
    7. 循环：是否启用循环，默认为启用。

2.8.6. Slider

  • Slider

    功能特点：滑动模块控件，通过调整滑块的位置来调整数值。

    属性选项介绍：

    1. 滑过区域图片：被换过的轨道要显示的图片。
    2. 轨道图片：轨道显示的图片。
    3. 滑块常规图片：滑块正常情况下显示的图片。
    4. 滑块按下图片：滑块被按下时显示的图片。
    5. 滑块禁止图片:滑块被禁用时显示的图片。
    6. 进度值：目前所在的位置，这个要相对与下方的属性来的。
    7. 最大值：进度条最大的数值。
    8. 滑块大小: 滑块的大小。
    9. Ball Rotate：可调整滑块的旋转角度。

2.8.7. Label

  • Label

    功能特点：标签控件用来显示文字。

    属性选项介绍：

    1. FontRenderComponent：是否启用字体渲染属性组件。

    2. Component Name：组件名称，不可更改。

    3. Layer：没有太大的作用，Layer数值不同将影响Label控件是否在同一批次合批。

    4. 字体大小：设置字体的大小。

    5. 文本类型：包括系统字体、ttf字体以及图片字体三种类型。

      • 为方便美术同学制作，编辑器全局设置中提供全局默认字体类型设置，设置后，新添加字体控件均会按照此类型设置。

    6. 文本：输入要显示的文字。

    7. 水平布局：设置字体位于控件的相对位置。

    8. 垂直布局：设置字体位于控件的相对位置。

    9. 文本尺寸：设置能显示文字的长度和高度（即行数）。当为0时表示没有限制。

    10. 字体颜色：设置字体的颜色。

    11. Upper Color ：设置字体渐变色，字体上半部分颜色。

    12. Lower Color ：设置字体渐变色，字体下半部分颜色。

    13. 文字间距 ：设置文字之间的间距，使用非系统字体时该属性生效。

    14. 行间距 ：设置行和行之间的间距，使用非系统字体时该属性生效。

    15. 自动换行 ：当文字达到边界后是否自动换行。

    16. 英文单词换行截断：当英文单词来到边界后是否截断。

    17. 描边大小（outline size）：字体描边大小，ttf或移动端系统字体才生效。

    18. 描边颜色（outline color）：含义同属性名。

2.8.8. RichText

  • RichText

    功能特点：富文本控件支持多文本格式编写，如图片和文字混合编写。

    属性选项介绍：

    1. 文本：输入要显示的文字。
    2. 字体大小：设置字体的大小。
    3. 字体路径：可以输入字体路径来修改字体，支持的格式包括.ttf、.plist。
    4. 字体颜色：设置字体的颜色。
    5. Upper Color ：设置字体渐变色，字体上半部分颜色。
    6. Lower Color ：设置字体渐变色，字体下半部分颜色。
    7. 文字间距 ：设置文字之间的间距。
    8. 行间距 ：设置行和行之间的间距。
    9. 描边大小（outline size）：字体描边大小，ttf或移动端系统字体才生效。
    10. 描边颜色（outline color）：含义同属性名。
    11. Save RichText Str：是否保存富文本字符串。

    注：RichText通过代码层面实现加载图片和文案的混合显示（内部的制作和Label很像）。

2.8.9. CheckBox

  • CheckBox

    功能特点：多选框用来标记是否被选定，选中与否的状态能够显示在复选框上，支持多选操作。

    属性选项介绍：

    1. 使用前景图片：设置是否使用前景图片。
    2. 背景图片-常规：设置控件正常情况下显示的图片。
    3. 选中标记-常规：设置控件正常情况下被点击时才会显示的图片。
    4. 背景图片-选中：设置控件被选中状态下才会显示的图片。
    5. 背景图片-禁用：设置控件禁用情况下显示的图片。
    6. 选中标记-禁用：设置控件禁用情况下被点击时才会显示的图片。
    7. 缩放比例（按下时）：设置在点击是所显示出来的图片缩放的比例。
    8. Select Node Name：设置选择的节点名字。
    9. Select：设置是否选中状态。

2.8.10. RadioButton

  • RadioButton

    功能特点：基本功能和CheckBox差不多，但是需要配合RadioButtonGroup使用。使得同个RadioButtonGroup里的RadioButton只能被选中一个。

    属性选项介绍：

    1. 各个功能与CheckBox一致，可参考上方的CheckBox的属性。
    2. 开启声音：设置是否开启声音。
    3. 声音路径：设置音频文件资源路径。
    4. 声音触发类型：设置声音触发条件，分为按下、抬起和取消。

2.8.11. RadioButtonGroup

  • RadioButtonGroup

    功能特点：与RadioButton配合使用，同个RadioButtonGroup内的RadioButton有互斥的属性，只允许被选中一个。

    属性选项介绍：

    1. 允许没有选中：设置是否允许都不选中的情况。

2.8.12. ComboBox

  • ComboBox

    功能特点：下拉链表控件，点击下拉按钮，会出现可供选择的链表菜单。点击菜单中的项来使对应功能生效。

    属性选项介绍：

    1. 编辑框背景：设置编辑框的背景图片。
    2. 下拉按钮背景-常规：设置下拉按钮常规状态下显示的图片。
    3. 下拉按钮-选中：设置下拉按钮点击时显示的图片。
    4. 下拉列表背景：设置整个下拉列表的背景图片。
    5. 下拉项目背景-常规：单个下拉项的正常状态下的背景图片。
    6. 编辑框接收输入：设置编辑框能否能够接收输入信息。
    7. Item Data：设置每项项目需要存储的数据。
    8. 下拉项高度：设置单个下拉项的大小。
    9. 颜色：设置下拉项目的颜色。
    10. 下拉列表长度：设置下拉列表的长度。

2.8.13. ScrollView

  • ScrollView

    功能特点：View内可以拥有很多控件或者其他内容，通过垂直滑动或者水平滑动，将在显示区域外的内容显示移动显示区域中。

    属性选项介绍：

    1. 背景：设置背景图片。
    2. 容器类型：选择布局内的对齐方式。
    3. 方向：设置朝哪个方向滑动能够触发控件。
    4. 滚动区域大小：设置滚动的区域的大小。
    5. 滚动区域位置：设置滚动的区域位置。
    6. 滚动惯性：设置是否具有惯性效果，即当滑动停止后还会滑动一小段距离。
    7. 启用滚动条：设置是否显示滚动条。
    8. 滚动条宽度：设置滚动条的宽度。
    9. 滚动条颜色：设置滚动条的颜色。

2.8.14. ListView

  • ListView 功能特点：列表显示区域，将自身的ListItem的内容显示出来。有可能Item过多无法全都显示出来，可以通过滑动将Item显示出来。 属性选项介绍：
    1. 背景：设置背景图片。
    2. 方向：设置朝哪个方向滑动能够触发控件。
    3. 滚动惯性：设置是否具有惯性效果，即当滑动停止后还会滑动一小段距离。
    4. 启用滚动条：设置是否显示滚动条。
    5. 滚动条宽度：设置滚动条的宽度。
    6. 滚动条颜色：设置滚动条的颜色。

2.8.15. UIFX

  • UIFX

    功能特点：2d粒子在UI上显示

    属性选项介绍：

    1. Component Name：组件名字，不可更改。
    2. Layer：没有太大的作用，Layer数值不同将影响UIFX控件是否在同一批次合批。
    3. FxPath：粒子路径，后缀.fx。
    4. FxLayer：粒子显示层。
      • Before:在UI之前渲染，显示在整体UI后边。
      • Between: 可以同正常UI控件一样参与UI渲染排序，但当前不支持裁剪。
      • After: 在UI之后渲染，显示在整体UI前边。
    5. Fx_AutoPlay : 自动播放
    6. Fx_Restart : 重启
    7. Use Normal Velocity：

2.8.16. VirtualListView

  • VirtualListView

    功能特点：虚拟列表，支持无限数据添加，编辑器端仅编辑属性，不支持添加子节点。

    属性选项介绍：

    1. 使用贴图：背景是否使用贴图显示。
    2. 四边填充：距离上下左右边界的距离。
    3. 分隔间距：子控件之间的距离。
    4. 方向：设置朝哪个方向滑动能够触发控件，包括垂向、横向两种。
    5. 布局模式：single,multi,grid三种。
      • single : 单行单列
      • multi: 多行单列或多列单行，固定行数或列数。
      • grid: 网格模式同multi,相对更自由，
    6. 弹回效果：滚动区域触底/顶部是否回弹。
    7. 滚动惯性：设置是否具有惯性效果，即当滑动停止后还会滑动一小段距离。

2.8.17. PageView

  • PageView

    功能特点：页面视图，支持分页浏览。

    属性选项介绍：

    1. Add Page：增加可浏览页面。

2.8.18. Panel

  • Panel

    功能特点：面板控件，用于新版自动合批，添加此控件后，Panel内节点默认会自动合批。

    属性选项介绍：

    1. Panel Order: 用于Panel间的排序，值越小显示越靠前。

      • 需要注意的是：Panel内有子Panel时，子Panel Panel Order会受到父Panel影响，父Panel调整Panel Order其变化量会 同步到子Panel。

    2. Auto Batch: 是否自动合批，默认开启。

    3. Show DrawCall：新版本提供的一种展示DrawCall的工具面板，能够罗列出Panel内共使用了多少种类型的材质，并可以调整它们的顺序；调整某个材质的显示顺序时，同时对使用该材质的所用节点同步调整GlobalZOrder。

      • 材质1为使用了ttf类型的字体材质类型，Label0和Label1使用了该中类型的材质；

        材质2为使用了某种贴图材质类型，Image0和Image1使用了该种类型的材质；

      • 点击高亮按钮，左侧可以高亮显示使用了该种材质的节点；

      • 调整使用了ttf的字体材质类型的Z值-2->2，左侧可以看到使用了该种材质的Label0和Label1显示顺序上的变化；

    4. 为方便美术同学将老版本uix变更到新版，提供widget->panel转换工具，节点树中选中某Widget，右键选择转换至Panel。

@Copyright © cosmos 2019 all right reserved，powered by Gitbook修订时间： 2022-03-03 10:01:12

results matching ""

    No results matching ""