跳转至

3.4 UI系统介绍

该篇会为您介绍如何使用阿凡达中的UI视口。

平面控件

基础控件(快速创建)

这里将为您介绍制作UI界面是最常使用的三个节点。

  1. 标签:用于显示文字
  2. 按钮:创建按钮
  3. 纹理图:主要用于背景或静态图像

imageCover

标签

标签 会将文本打印到屏幕上。您可以在属性栏的“标签”部分找到其所有属性。将文本写入文本属性。您可以分别使用对齐垂直对齐将文本水平和垂直对齐。勾选自动换行属性可以让文本在达到标签的最大宽度时换到下一行。文字裁剪的作用则是可以让标签进行任意程度的缩放,当标签大小小于字体大小时,字体会被裁剪。

imageCover

按钮

按钮 节点可任意创建一个可以点击的按钮。您可以在属性栏为其添加文本图片。启用扁平可以让按钮扁平化。勾选扩大图标可以按钮中的图片按照按钮大小成比例放大。

在“基础按钮”部分,您会看到一些复选框,这些复选框可更改按钮的行为。切换模式打开时,按下该按钮将在活动状态和正常状态之间切换。默认情况下,禁用会使它禁用。行为模式触发按钮可以决定按钮的行为模式和触发的按键。

imageCover

纹理图

纹理图 在UI内显示纹理或图像。它提供了多种缩放模式,设置拉伸模式属性可以更改其行为:

  • 拉伸并缩放(兼容):仅当扩展属性启用时,才可以缩放纹理以适合节点的边界。否则,其行为类似于保持模式。
  • 缩放:缩放纹理以适合节点的边界。
  • 平铺:使纹理重复,但不会缩放。
  • 保持保持居中:强制纹理分别保持其原始大小,分别位于框架的左上角或中心
  • 保持比例保持比例居中:可缩放纹理,但强制保持其原始纵横比(分别位于框架的左上角或中心)。
  • 保持比例覆盖:工作方式与保持比例居中相同,但较短的一侧适合边界矩形,而另一侧适合于节点的边界。

您可以调制TextureRect的颜色。展开属性画布->可见性,找到调节属性,单击调节属性,然后使用颜色选择器。

imageCover

界面介绍

2D视口工具栏

接下来将从左向右为您介绍2D视口工具栏经常使用的功能。 imageCover

第一个箭头状的按钮为 选择模式 。将鼠标悬停在按钮上可以看到其详细信息。

imageCover

在该模式下,您可以通过键盘按键+鼠标的方式实现节点的移动,旋转,缩放。

如果您不习惯使用键盘+鼠标的操作模式,您可以通过点击这三个按钮在移动,旋转,缩放这三种模式下进行切换。 imageCover

下一个按钮可以防止节点因为误点击而移动: imageCover 顾名思义,选个一个节点,点击这个按钮后,节点后会出现该图标,同时该节点的子节点在场景中全部都无法通过鼠标选中(但是在场景树中还是可以选择)

关于第六个和第七个按钮: imageCover 通过鼠标悬停的详细信息可以清楚的知道其用途。 点击左边按钮后,您可以通过点击场景中的某一处知道该处有多少个重合的节点。 imageCover 而右边的这个锁形状的按钮可以锁定节点的位置,相关节点锁定后节点位置和场景树上都会出现该图标。

第八个按钮的作用设置对象的旋转中心: imageCover 一般来说节点默认的旋转中心实在该节点的左上角,点击该按钮后,您可以将选中节点的旋转中心设置在任意位置。

第九个按钮为平移模式: imageCover 点击该按钮后,您可以通过按住鼠标左键在场景中滑动实现画面的平移。

第十个按钮为标尺模式: imageCover 在这个模式下,您可以通过按住鼠标左键进行长度,角度的测量。

接下来的三个按钮都是与吸附相关的: imageCover 这三个按钮可以控制吸附功能的开关,吸附的对象和方式。

视图按钮: imageCover 这个部分管理着场景中一些辅助条件的显影,你可以按照您的喜好进行针对性调整。

UI元素的基本操作

UI工作区设置大小和位置

关于UI元素大小和位置的设置您直接在场景中进行大致的调整排版,然后在属性栏中的 UI组件->矩形 中进行微调即可。 imageCover

锚点的作用

锚点 表示每条边的参照值。这个参照值是 相对于父节点的百分比取值 。 UI相关的节点具有位置和大小,它们也具有锚点和边距。锚定义节点的左,上,右和下边缘的原点或参考点。节点默认的锚点位置在场景中坐标的原点,可以通过鼠标拖动对锚点位置进行修改。

在IdeaVR中,锚点的作用是给UI自适配用的。一般来说您不需要手动调整锚点,在布局按钮中已经有常用的锚点组合。 imageCover

注意

  • 布局按钮仅在选择节点后才会显示。

UI元素的制作与修改

平面UI自适应窗口大小

如果您通过鼠标拖拽元素进行排布的方式制作出了一个UI界面,那么您很可能会碰到UI没法自适应窗口大小的问题。

这类问题的原因通常是没有正确设置锚点导致的。您只需要使用布局中的方法进行简单的修改即可。

以上图中的demo为例,您首先需要调整根节点的锚点位置,如果您需要整个UI界面全部自适应窗口大小,那么在布局中选择“整个矩形”即可:

之后,只需要将您希望自适应窗口大小的元素在布局中选择“保持长宽比”:

再次运行您会发现,进行过以上操作的元素已经可以自适应屏幕大小了:

在布局中还有很多锚点和边距的调整方案,您可以随意探索。

空间UI的实现原理与制作方法

关于空间UI的实现原理,实际上就是使用Viewport节点,将制作好的UI作为反照率纹理呈现到3D场景创建的网格节点(MeshInstance)上。接下来将为您介绍具体步骤:

  1. 将刚刚制作的UI保存为一个场景。
  2. 创建一个新的3D场景。 imageCover
  3. 创建一个Viewport节点。 imageCover
  4. 将UI场景放到Viewport节点下。
  5. 将viewport大小调整为ui界面的大小。
  6. 新建一个MeshInstance节点,创建一个PlaneMesh网格,新建一个spatialmaterial材质,勾选资源标签下的“本地化到场景”或点击材质球下拉列表,选择“本地化到场景”选项。 imageCover 找到反照率一栏,创建一个viewporttexture(视口纹理),并将视窗路径调整为刚才创建的Viewport节点。
  7. 回到viewport节点,勾选“透明的背景”,然后将网格的大小调整至您希望的大小即可。

以上就是空间UI的制作方法。

主题设置与修改

这里将为您介绍修改平面控件的颜色,字体的基本方法。

关于颜色的修改,所有基础的平面控件节点的属性中都会有 画布 。找到这一栏,在 颜色调节 中可以进行相关控件自身及其子节点的颜色修改。而 自身颜色调节 只针对于控件本身颜色进行修改。

关于字体的修改,Button和Label节点可以对字体的样式,颜色,大小进行修改。在节点属性中的 UI控件 中找到 自定义字体 ,创建一个“DynamicFont”,在其中的“字体数据”中可以导入您自己的字体,并且在“设置”中可以调整字体的大小,勾选“使用过滤器”可以让字体变的光滑。

您也可以在 自定义颜色 中对字体颜色进行修改。