第4章 虚拟现实中的界面系统.pptx

第4章

虚拟现实中的界面系统

;课程导入;RawImage与Image组件区别

“RawImage”组件，也称为原始图像组件，其常被用来显示非交互的图像控件，一般用于装饰或者图标等。在Hierarchy面板中，单击鼠标右键→【UI】→【RawImage】，即可创建一个“RawImage”元素，可在Inspector面板查看其组件及参数;“RawImage”和“Image”组件区别：

（1）“Image”组件只能使用Sprite图片，“RawImage”组件通常使用Texture类型图片。

（2）“RawImage”组件只提供了修改UV方法，除此之外都是继承于MaskableGraphic的方法。

（3）“Image”组件通过修改ImageType类型可对图片显示方式进行调整，一共包含了4种：Simple、Sliced、Tiled和Filled。;LayoutGroup组件详解

LayoutGroup（布局组）可以对一组元素进行动态布局，当组内元素数量发生变化时，LayoutGroup组件可以智能的帮助用户重新排版。在Unity的UGUI中，主要分为3种布局方式，分别是：HorizontalLayoutGroup（水平布局组）、VerticalLayoutGroup（垂直布局组）和GridLayoutGroup（网格布局组）。;HorizontalLayoutGroup：即水平布局方式，子元素只会按照水平的方式排列，就算子元素太多超过父元素，也不会换行排列。在Inspector面板中单击【AddComponent】按钮搜索HorizontalLayoutGroup即可添加该组件，“HorizontalLayoutGroup（Script）”组件的属性和功能.

;VerticalLayoutGroup：即垂直布局方式，与“HorizontalLayoutGroup”相对应，同样当元素超过父元素也不会换行排列。在Inspector面板中单击【AddComponent】按钮搜索VerticalLayoutGroup即可添加该组件，“VerticalLayoutGroup（Script）”组件的属性和功能;GridLayoutGroup：即网格布局方式，子元素可以按照面的方式排列，当子元素太多超过父元素，可以进行换行排列。在Inspector面板中单击【AddComponent】按钮搜索GridLayoutGroup即可添加该组件，其组件的属性面板如表;基于VIVEInputUtility插件的UI交互流程

（1）导入SDK：SteamVRPlugin和VIVEInputUtility。

（2）删除场景默认相机，新建空物体：VROrigin。

（3）为“VROrigin”绑定预制体：[CameraRig]和VivePointers。

（4）新建UGUI元素，如Button、Slider等。

（5）删除“EventSystem”游戏对象和“Canvas”游戏对象中的“CanvasScaler??和“GraphicRaycaster”脚本组件，设置“RenderMode”属性为“WorldSpace”。

（6）为“Canvas”游戏对象添加“CanvasRaycastTarget”组件。

（7）设置“Canvas”的大小和位置。

（8）设置UI的大小和位置。

（9）运行测试。;UI序列帧动画实现流程

序列帧动画原理是首先必须要有一个载体，一般是一个图片，然后声明一个数组或List用来存放序列帧，然后再根据需要遍历这个数组替换载体的图片源，这样就实现动画效果了。具体实现流程如下：

（1）导入序列帧图片。

（2）设置图片格式和切割图片。

（3）创建序列帧动画脚本。

（4）挂载脚本，并设置序列帧。

（5）运行测试。;本单元通过2个学习任务，首先介绍了UGUI高级控件属性参数和组合使用方法，其次讲解了UGUI界面静态和动态交互实现方法。通过本单元的学习，使学生能够熟练掌握UGUI高级控件组合应用方法，并能够实现在VR项目中与UI元素的交互。;