3.4 UI系统介绍¶
该篇会为您介绍如何使用阿凡达中的UI视口。
平面控件¶
基础控件（快速创建）¶
这里将为您介绍制作UI界面是最常使用的三个节点。
- 标签：用于显示文字
- 按钮：创建按钮
- 纹理图：主要用于背景或静态图像
标签¶
标签 会将文本打印到屏幕上。您可以在属性栏的“标签”部分找到其所有属性。将文本写入文本属性。您可以分别使用对齐和垂直对齐将文本水平和垂直对齐。勾选自动换行属性可以让文本在达到标签的最大宽度时换到下一行。文字裁剪的作用则是可以让标签进行任意程度的缩放，当标签大小小于字体大小时，字体会被裁剪。
按钮¶
按钮 节点可任意创建一个可以点击的按钮。您可以在属性栏为其添加文本和图片。启用扁平可以让按钮扁平化。勾选扩大图标可以按钮中的图片按照按钮大小成比例放大。
在“基础按钮”部分，您会看到一些复选框，这些复选框可更改按钮的行为。切换模式打开时，按下该按钮将在活动状态和正常状态之间切换。默认情况下，禁用会使它禁用。行为模式和触发按钮可以决定按钮的行为模式和触发的按键。
纹理图¶
纹理图 在UI内显示纹理或图像。它提供了多种缩放模式，设置拉伸模式属性可以更改其行为：
- 拉伸并缩放（兼容）：仅当扩展属性启用时，才可以缩放纹理以适合节点的边界。否则，其行为类似于保持模式。
- 缩放：缩放纹理以适合节点的边界。
- 平铺：使纹理重复，但不会缩放。
- 保持和保持居中：强制纹理分别保持其原始大小，分别位于框架的左上角或中心
- 保持比例和保持比例居中：可缩放纹理，但强制保持其原始纵横比（分别位于框架的左上角或中心）。
- 保持比例覆盖：工作方式与保持比例居中相同，但较短的一侧适合边界矩形，而另一侧适合于节点的边界。
您可以调制TextureRect的颜色。展开属性画布->可见性，找到调节属性，单击调节属性，然后使用颜色选择器。
动态纹理图
纹理图支持添加GIF格式的动图作为纹理贴图，实现动态效果，首先将GIF动图导入文件系统：
将动图拖入到纹理图的纹理属性中，即可实现动态的纹理贴图：
效果如下：
简单按钮信号实现
- 为纹理图添加脚本
- 找到按钮信号选择连接信号为纹理图
- 将“可见性”用鼠标拖入交互编辑器中连接
效果展示 
界面介绍¶
2D视口工具栏¶
接下来将从左向右为您介绍2D视口工具栏经常使用的功能。 
第一个箭头状的按钮为 选择模式 。将鼠标悬停在按钮上可以看到其详细信息。
在该模式下，您可以通过键盘按键+鼠标的方式实现节点的移动，旋转，缩放。
如果您不习惯使用键盘+鼠标的操作模式，您可以通过点击这三个按钮在移动，旋转，缩放这三种模式下进行切换。 
下一个按钮可以防止节点因为误点击而移动： 
顾名思义，选个一个节点，点击这个按钮后，节点后会出现该图标，同时该节点的子节点在场景中全部都无法通过鼠标选中（但是在场景树中还是可以选择）
关于第六个和第七个按钮： 
通过鼠标悬停的详细信息可以清楚的知道其用途。 点击左边按钮后，您可以通过点击场景中的某一处知道该处有多少个重合的节点。 
而右边的这个锁形状的按钮可以锁定节点的位置，相关节点锁定后节点位置和场景树上都会出现该图标。
第八个按钮的作用设置对象的旋转中心： 
一般来说节点默认的旋转中心实在该节点的左上角，点击该按钮后，您可以将选中节点的旋转中心设置在任意位置。
第九个按钮为平移模式： 
点击该按钮后，您可以通过按住鼠标左键在场景中滑动实现画面的平移。
第十个按钮为标尺模式： 
在这个模式下，您可以通过按住鼠标左键进行长度，角度的测量。 
接下来的三个按钮都是与吸附相关的： 
这三个按钮可以控制吸附功能的开关，吸附的对象和方式。
视图按钮： 
这个部分管理着场景中一些辅助条件的显影，你可以按照您的喜好进行针对性调整。
UI元素的基本操作¶
UI工作区设置大小和位置¶
关于UI元素大小和位置的设置您直接在场景中进行大致的调整排版，然后在属性栏中的 UI组件->矩形 中进行微调即可。 
锚点的作用¶
锚点 表示每条边的参照值。这个参照值是 相对于父节点的百分比取值 。 UI相关的节点具有位置和大小，它们也具有锚点和边距。锚定义节点的左，上，右和下边缘的原点或参考点。节点默认的锚点位置在场景中坐标的原点，可以通过鼠标拖动对锚点位置进行修改。 
在IdeaVR中，锚点的作用是给UI自适配用的。一般来说您不需要手动调整锚点，在布局按钮中已经有常用的锚点组合。 
注意
- 布局按钮仅在选择节点后才会显示。
UI元素的制作与修改¶
平面UI自适应窗口大小¶
如果您通过鼠标拖拽元素进行排布的方式制作出了一个UI界面，那么您很可能会碰到UI没法自适应窗口大小的问题。
这类问题的原因通常是没有正确设置锚点导致的。您只需要使用布局中的方法进行简单的修改即可。
以上图中的demo为例，您首先需要调整根节点的锚点位置，如果您需要整个UI界面全部自适应窗口大小，那么在布局中选择“整个矩形”即可：
之后，只需要将您希望自适应窗口大小的元素在布局中选择“保持长宽比”：
再次运行您会发现，进行过以上操作的元素已经可以自适应屏幕大小了：
在布局中还有很多锚点和边距的调整方案，您可以随意探索。
空间UI的实现原理与制作方法¶
关于空间UI的实现原理，实际上就是使用Viewport节点，将制作好的UI作为反照率纹理呈现到3D场景创建的网格节点（MeshInstance）上。接下来将为您介绍具体步骤：
- 制作一个UI并将它保存为场景
- 创建一个新的3D场景。
- 创建一个Viewport节点。
- 将UI场景放到Viewport节点下。
- 将viewport大小调整为ui界面的大小。
- 新建一个MeshInstance节点
创建一个PlaneMesh网格 
新建一个spatialmaterial材质 
点击材质球下拉列表，选择“本地化到场景”选项。 
- 点击材质球展开参数，找到漫反射下的纹理参数，点击下拉菜单创建一个ViewporTtexture（视口纹理）
将视窗路径调整为刚才创建的Viewport节点。 
- 点击MeshInstance网格实例中的网格展开参数，找到翻面，勾选“启用”，然后将网格的大小位置调整至您希望的大小位置即可。
以上就是空间UI的制作方法。
主题设置与修改¶
这里将为您介绍修改平面控件的颜色，字体的基本方法。
关于颜色的修改，所有基础的平面控件节点的属性中都会有 画布 。找到这一栏，在 颜色调节 中可以进行相关控件自身及其子节点的颜色修改。而 自身颜色调节 只针对于控件本身颜色进行修改。 
关于字体的修改，Button和Label节点可以对字体的样式，颜色，大小进行修改。在节点属性中的 UI控件 中找到 自定义字体 ，创建一个“DynamicFont”，在其中的“字体数据”中可以导入您自己的字体，并且在“设置”中可以调整字体的大小，勾选“使用过滤器”可以让字体变的光滑。 
您也可以在 自定义颜色 中对字体颜色进行修改。 