Unity AR-VR虚拟现实开发基础（第2版）课件 第5章 Unity3D中的UI系统

Canvas简介目录什么是CanvasCanvas的三种渲染模式Canvas中UI元素的显示顺序什么是Canvas什么是CanvasCanvas是画布的意思，在Unity3D的UI系统中，所有UI元素都必须作为Canvas的子对象存在。场景中的Canvas对象都关联着一个Canvas组件，是所有UI元素的容器。不过一个场景中并不是只能存在一个Canvas，所以可以根据应用的设计需求在场景中使用多个Canvas，而不用把所有的UI元素放置于同一个Canvas下。什么是Canvas在Unity3D的场景视图中，Canvas对象以矩形的形态呈现。通过使用Canvas，我们可以在需要的时候才呈现出UI界面。而在不需要的时候，则可以将其隐藏起来。当我们创建任何一个UI元素的时候，如果场景中没有Canvas对象，Unity3D将自动帮我们创建一个Canvas对象，并将新创建的UI元素添加为Canvas的子对象。什么是CanvasCanvas的三种渲染模式Canvas的三种渲染模式ScreenSpace-Overlay1.ScreenSpace–Overlay（屏幕空间-覆盖）Canvas的默认RenderMode为ScreenSpace-Overlay，此时Canvas下的所有UI元素会直接绘制在游戏窗口的平面上。也就是说，此时Canvas中的UI元素会优先显示在游戏场景中，不会被其他任何对象所遮挡。在该模式下我们无法手动修改Canvas的尺寸等信息，因为Canvas的大小由Game视图的大小决定，而Canvas是覆盖在整个Game视图之上的。ScreenSpace-Camera2.在此模式下，Canvas的显示效果和前者基本一致，只是在Scene视图中有较大区别。将Canvas的RenderMode切换为ScreenSpace-Camera后，需要手动指定RenderCamera（渲染用相机）。ScreenSpace-Camera在ScreenSpaceOverlay/Camera两种模式下，Canvas的尺寸和Game视图的尺寸一致，Canvas会将所有UI元素渲染在屏幕最顶端，不会受到场景中其他任何物体的影响。如果屏幕尺寸改变，Canvas会自动重新适应屏幕尺寸。WorldSpace需要注意的是，在VR项目的开发中，所有Canvas必须设置为WorldSpace。在此模式下，整个Canvas将和其他对象一样作为3D对象存在于场景中。Canvas中UI元素的显示顺序UI元素的显示顺序Canvas中UI元素的显示顺序和它们在Hierarchy层级视图中的显示顺序是一致的。第一个子对象将被首先绘制，然后是第二个子对象，以此类推。当两个UI元素重叠的时候，后绘制的对象将显示在之前绘制的对象之上。UI元素的显示顺序当我们需要调整UI元素的显示顺序时，只需要在Hierarchy视图中通过拖曳的方式来调整顺序即可。UI界面的布局王寒目录矩形工具(RectTool）矩形坐标（RectTransform）轴点（Pivot）锚点（Anchors）矩形工具（RectTool）矩形工具使用矩形工具，我们可以拖动、缩放和旋转各种UI元素当我们选中某个UI元素后，就可以使用鼠标将其移动到画布的合适位置。通过点击和拖曳UI元素的边缘，可以调整它的大小。最后，把鼠标光标放到UI元素的周边，可以看到一个旋转的标记，使用鼠标移动，就可以把UI元素旋转到所需的角度。和其它工具类似，矩形工具的使用也受到锚点和空间的限制。通常情况下，我们可以将其设置为Pivot和Local矩形坐标（RectTransform）矩形坐标在Unity3D中，普通的游戏对象（GameObject）都有一个对应的Transform组件。而对于UI元素，则使用RectTransform组件来代替。RectTransform组件同样有多重属性，如位置、旋转、缩放等。除此之外，它还提供了宽度和高度属性，以便调整矩形的大小。轴点（Pivot）轴点所谓的轴点也就是UI元素的参考坐标系原点。对UI元素的旋转和缩放等操作都是基于轴点的位置来进行的。当我们在工具栏中将Pivot按钮设置为Pivot模式时，RectTransform的轴点可以在Scene场景视图中进行移动锚点（Anchors）锚点在RectTransforms中还包含了另外一个布局概念，也就是锚点。锚点在场景视图中以四个小的圆形手柄来显示，在Inspector视图中显示了锚点的信息。锚点虽然锚点的设置比较复杂，但是Unity3D通过锚点预设（AnchorPreset）按钮让这一操作大大简化。点击锚点预设按钮，就可以从弹出的子菜单中选择所需的锚点预设。UI工具中的视觉元素王寒目录文本（Text）图像（Image）面板（Panel）文本（Text）文本Text文本在UI中通常被称为Label（标签），它有一个文本区域，可以在其中输入我们想要显示的文本。我们可以在Inspector视图中可视化的更改其字体和其它显示属性等。除了基本的Text控件，Unity3D还提供了更为实用的TextMeshPro。TextMeshPro除了可以作为UI控件来添加，还可以直接作为3D对象添加到场景之中。在VR等纯3D场景中，通常我们会倾向于选择TextMeshPro。图像（Image）图像Image控件对象有一个RectTransform组件和一个Image组件。我们可以通过RectTransform组件来设置Image对象在场景中的位置，尺寸大小和其它坐标信息。我们可以通过Image组件来指定图像对象的源图片，色彩，材质等属性。图像需要注意的是，当我们将制作好的美术资源导入到Unity3D后，如果要在用户界面的Image控件对象中使用，必须将其TextureType设置为Sprite(2DandUI)。面板（Panel）面板Panel是一种特殊的UI元素，可以把它看做UI元素的容器，我们可以在上面放置各种UI元素。Panel对象有一个Image组件，可以用来设置背景图片。当Canvas上面有比较多的UI元素时，我们可以考虑使用Panel来组织，从而达到更好的视觉呈现效果。UI工具中的交互元素王寒目录什么是UI交互元素按钮（Button）勾选按钮（Toggle）滑动条（Slider）其它什么是UI交互元素UI交互元素顾名思义就是和用户进行交流互动的界面，在Unity中具有许多的交互元素，例如Button（按钮）；Toggle（切换）；按钮（Button）按钮是各类软件、APP和网站中最常用的交互控件。在Unity3D的UI元素中，按钮同样非常重要。Button元素默认有一个Text元素作为子对象。Button的Inspector视图中能看到，Button由RectTransform组件、Image组件、Button组件构成。其中RectTransform组件和其他UI元素相同，用于控制Button的位置等。Image组件用于显示按钮的背景图，默认为图中的黑色矩形框，而Button组件则用于接收鼠标点击事件等互动。在Button组件的最下方，是一个OnClick()事件，点击右下角的加号可以添加新的按钮事件。我们可以使用它来定义按钮和用户之间的交互时间。勾选按钮（Toggle）Toggle元素的作用就是一个开关，它的视觉呈现是一个勾选框，允许用户开启或关闭某个选项。Toggle元素有两个子对象Background和Label，二者用于控制Toggle的外形，此处就不再赘述。Toggle组件中的参数大部分和Button相同，主要区别在于下方的IsOn属性和事件的改变。当IsOn为勾选状态时，表明此Toggle为开启状态，否则为关闭状态。而最下方的事件不是OnClick()，而是OnValueChanged状态，参数为Boolean。当场景中的Toggle每次被点击时，IsOn的状态都会发生改变，我们可以利用IsOn参数来决定场景中某些组件是否可用。滑动条（Slider）Slider也就是滑动条，可用于控制音量等，比如手机音乐APP的播放进度条就可以用Slider来实现。Slider元素也是由数个Image元素组成的，可拖动的圆环和背景进度条都是一个Image，可通过更换Image中的图片来更改Slider样式。其它交互控件除了以上提到的交互控件，Unity3D中还提供了其它丰富的交互控件，比如Scrollbar（滚动条），Dropdown（下拉列表），InputFiled（文本输入框），ScrollRect（滚动区）等1. 滚动条（Scrollbar）和滚动视图（ScrollView）2.下拉列表3.文本输入框创建项目的UI界面王寒目录案例描述案例实施案例描述在几乎所有的AR/VR应用中，都会有一个UI界面。通过这个UI界面，我们可以跳转到其它界面，输入一些基本信息，或是进行一些基础的设置。在本案例中，我们将一起学习创建一个简单的项目UI界面。完成的界面分别是一个主菜单界面和应用的主界面在主菜单界面点击START按钮，会切换到应用的主场景。在应用主场景点击BACK按钮，会返回菜单界面。最后，在菜单界面中点击QUIT按钮，将退出当前应用返回切换案例实施Step1.创建新项目，命名为MyMenuStep2.安装TextMeshProStep3.导入所需的资源（bg.png,1920x1080）开始前的准备开始前的准备使用快捷键Ctrl+N，创建一个新的场景，使用快捷键Ctrl+S保存，并重命名为GameScene创建主场景在Hierarchy视图中右键单击，选择UI-Image，此时就会在场景中添加一个Image图片元素，同时还会自动添加一个Canvas画布，还有一个EventSystem对象。选中Canvas对象，在Inspector视图中将CanvasScale组件的UIScaleMode设置为ScaleWithScreenSize，这样Canvas对象就会自动覆盖整个界面。然后把ReferenceResolution设置为X:1920,Y:1080，因为这也是图片的大小。选中Image，在Inspector视图中选择SourceImage，将其设置为刚刚添加的bg图片。此外，在RectTransform中将Width和Height属性分别设置为1920和1080。如图5-30所示。添加Image和Canvas对象在Hierarchy视图中右键单击Canvas对象，选择UI-Text-TextMeshPro。此时在Canvas中增加了一个新的子对象Text(TMP)。选中该对象，在Insepctor视图中更改其属性。将RectTransform组件的Width和Height分别设置为600和50.将TextMeshPro-Text(UI)组件中的Text内容更改为“Welcometothisworld!”，将FontSize更改为50。添加文本在Hierarchy视图中选中Canvas对象，右键单击，选择UI-Button-TextMeshPro。此时在场景视图中出现了一个按钮。将其更名为Button_Back使用工具栏上的移动工具调整按钮的位置，然后使用矩形工具调整其大小。然后选中Button对象，在Inspector视图中设置其属性。在Button组件部分设置HighlightedColor（高亮颜色），PressedColor（按下颜色）等，从而让用户可以感受到按钮的作用。添加返回按钮点击Button对象的下三角，选中Text(TMP)，然后在Inspector视图中更改文本为“BACK”,并调整FontSize为50更改按钮上的文本右键单击Hierarchy视图中的Canvas对象，然后选择CreateEmpty，创建一个空白对象，将其更名为Menu。然后将返回按钮拖动为Menu的子对象创建名为Menu的父对象在Unity3D编辑器中使用快捷键Ctrl+N创建一个新的界面，然后使用快捷键Ctrl+S保存，并将其更名为MenuScene创建菜单界面在Hierarchy视图中右键单击，选择UI-Panel，从而添加一个面板。此外，Unity3D还会自动添加一个Canvas对象和EventSystem对象。选中Panel对象，将其更名为Background,然后将其Image组件中的SourceImage设置为此前导入的bg。将color的alpha透明度设置为255。添加和设置Panel右键单击Canvas对象，选择UI-Button-TextMeshPro，创建一个新的按钮，将其命名为Button_Start。使用矩形工具调整按钮的大小，然后点击Button_Start的子对象Text(TMP)，在Inspector视图中更改按钮的文本内容为“START”，并设置各种属性。添加“开始”按钮右键单击Hirarchy视图中的Button_Start，选择Duplicate，从而复制出另一个按钮，将其更名为Button_Quit。使用移动工具将其调整到合适的位置。然后更改按钮的文本内容为QUIT。添加“退出”按钮右键单击Hierarchy视图中的Canvas对象，然后选择CreateEmpty，创建一个空白对象，将其更名为Menu。然后将Button_Start和Button_Quit都拖动为Menu的子对象创建名为Menu的父对象当我们在菜单场景中点击START按钮时，会自动切换到主场景。如果点击QUIT按钮，则退出当前应用。此外，在主场景中点击BACK按钮时，会返回菜单场景。设置按钮的交互操作-交互逻辑 在Unity3D编辑器的Project视图的空白处右键单击，选择Create-C#Script，从而创建了一个C#脚本，将其命名为MenuControl。双击在VisualStudio中将其打开。更改其中的代码创建MenuControl.cs在Hierarchy视图中选中Canvas的子对象Menu，然后点击Inspector视图中的AddComponent，选择Scripts-MenuControl，将刚才所创建