虚拟现实技术与应用（第2版）课件 第七章 图形用户界面-一套完整的UI系统框架

虚拟现实技术与应用第七章图形用户界面—一套完整的UI系统框架Metaverse01UUGUI系统介绍02……

常用的UGUI系统对象03SUPPORTINGTEXTHERESUPPORTINGTEXTHERE

Canvas控件Image控件Panel控件Text控件Button控件InputField控件Tollge控件UGUI综合实例登陆模块menu模块考试须知模块测试题模块.第七章图形用户界面—一套完整的UI系统框架目录CONTENTSUGUI系统介绍

该案例在选用Unity2019.3.5版本，GUI指的是图形用户界面。Unity3D中的图形系统分为OnGUI、NGUI、UGUI等，这些类型的图形系统内容十分丰富，包含游戏中通常使用到的按钮、图片、文本等控件。OnGUI系统是Unity最早期采用的系统，是通过代码驱动的GUI系统，每个控件都是通过代码创建，后期OnGUI系统进展到了NGUI系统，NGUI是严格遵循KISS原则并用C#编写的Unity（适用于专业版和免费版）插件。在Unity4.6以后Unity官方推出了新的UGUI系统，采用全新的独立坐标系，是U3D提供的一套快速且高效的创建UI系统的框架。01UUGUI系统介绍02……

常用的UGUI系统对象03SUPPORTINGTEXTHERESUPPORTINGTEXTHERE

Canvas控件Image控件Panel控件Text控件Button控件InputField控件Tollge控件UGUI综合实例登陆模块menu模块考试须知模块测试题模块.第七章图形用户界面—一套完整的UI系统框架目录CONTENTSCanvas控件

Canvas控件又称“画布”，类似于我们日常使用的白纸，所有的控件必须在Canvas下才可以绘制出来，一个场景中可以有多个Canvas，通过设置Canvas的顺序，得到不同的渲染效果。1.基本属性1.Canvas属性Canvas下一般有四个组件，第一个是RectTransform组件，灰色为当前不可用，在Canvas下新建控件后，每个控件可以在RectTransform下调整位置等信息；Canvas是画布的主要参数，包括渲染模式、画布的绘制顺序等；CanvasScaler组件用于设置处于不同组件下Canvas画布中的元素的缩放模式，常用于UI的适配中；GraphicRaycaster组件用于射线的检测。（1）RenderMode属性设置的画布的渲染模式，其中有三种渲染模式。1）ScreenSpace-Overlay模式：直接在屏幕上渲染显示画布的内容，即使没有摄像机或者画布不在摄像机范围类，对应的UI一定会绘制到屏幕上。在这种模式下内部是集成了一个摄像机，但无法操控这个摄像机。此Canvas下的元素一定绘制在屏幕的最上面（相比ScreenSpace-Camera和WorldSpace），不会被其他模式的Cava或2D/3D物体遮挡。这种模式下的Canvas排序按Canvas组件的SortOrder排序，数值越大，越在上层。如果屏幕调整了大小或者改变了分辨率，此Canvas会自动调整大小。该模式下主要参数如下：

PiexelPerfect：使UI元素像素对应，边缘更加清晰。

SortOrder：渲染顺序，如果设有多个Canvas，会出现遮挡的情况，此时可通过SortOrder对其进行排序，越大越靠近屏幕。

TargetDisplay：目标显示器，指定最终渲染到的显示器，也就是分屏，常用于多屏开发显示。比如有两个屏幕，一个大的显示屏挂在墙上作为展示屏，另一个小屏幕可以作为输入屏幕拿在手中进行控制。

AdditionalShaderChannes：附加着色通道，决定Shader可以读取哪些相关数据。Canvas控件2）ScreenSpace–Camera模式：在这种模式下，是将画布放置在距离摄像机一定距离的视野中，画布的内容都是通过摄像机来绘制，此时的画布会跟随着摄像机的移动而移动。当摄像机被禁用时画布也不会显示出来。该模式下主要参数如下：

RenderCarema：对应的渲染相机，也就是该Canvas显示在哪个Camera前面，不同的Camera渲染顺序可能不同。例如小地图的设置，可以在这里选择渲染小地图的摄像机。

PlaneDistance：设置摄像机距离画布的距离。

SortingLayer：渲染层级，影响渲染顺序。

OrderinLayer：同一渲染层级下的渲染顺序。3）WorldSpace模式：这种模式下画布会被当做世界空间中的一个模型来处理，它不会跟随摄像机的移动，超出摄像机视野则不会再被显示出来，这种模式下可以手动的设置画布的位置以及画布大小，画布不会再自动适配，常用于制作血量条等。Canvas控件（2）CanvasScaler组件：CanvasScaler也是屏幕适配的主要方式，一般通过该组件就可以完成适配，如果有需求，还可以通过Screen.height和Screen.width获取屏幕长宽，然后代码控制UI位置及缩放。UIScaleMode有三种缩放模式：1）ConstantPixelSize模式：固定像素大小，不论屏幕分辨率尺寸大小如何变化，像素保持原有大小不变。

ReferencePixelPerUnit：Unity的1个单位代表多少个像素。2）ScaleWithScreenSize模式：屏幕自适应常用方式

ReferenceResolution：参考分辨率，进行屏幕适配，自动缩放UI大小时，将以此作为参考。3）ConstantPhysicalSize模式：固定物理尺寸，这个模式很少用到。（3）GraphicRaycaster组件：关于UI射线检测的设置。

IgnoreReversedGraphics：是否忽略反转图片的检测。

BlockingObjects：在Canvas前面，可以遮挡射线检测的物体。

BlockingMask：遮挡射线检测的层级。Image控件

Image控件是用来放置图片的控件，除了两个公共的组件RectTransform与CanvasRenderer外，默认的情况下就只有一个Image组件。SourceImage：用于设置面板的背景，要显示的源图像，要想把一个图片赋给Image，需要把图片转换成Sprite（精灵）格式，转化后的精灵图片就可拖放到Image的SourceImage中了。这里的必须选用纹理格式为Sprite（2DandUI）的图片资源。Color：用于设置颜色和透明度。Material：材质，图片叠加的材质。RaycastTarget：射线投射目标，是否作为射线投射目标，关闭之后忽略UGUI的射线检测。另外，和Image控件类似的一个控件是RawImage控件，该控件可以显示任何纹理，而Image只能显示一个Sprite精灵。Panel控件

Panel控件又叫面板，实际上就是一个容器，可以容纳其他的控件。拖动该控件的4个角或者4条边可以放大缩小控件，如图7.13所示。一个Canvas可以有多个Panel控件，每个Panel控件容纳多个其他类型控件，当移动Panel控件时，其他控件也会跟随移动，这样就可以更快速便捷地进行UI布局。Panel控件自带Image组件，可用于设置面板控件的背景，除了Image控件具备的属性外，多了一个ImageType属性，是用来选择图片显示的类型。分为Simple（基本的）：图片整张全显示，不裁切，不叠加，根据边框大小会有拉伸；Sliced（切片的）：图片切片显示；Tiled（平铺的）；FillCenter（填充中心）。Text控件

Text控件也称为标签，Text区域用于输入将显示的文本。它可以设置字体、样式、字号等内容，UGUI中创建的很多UI控件都有一个支持文本编辑的Text控件，如图7.14所示。Font：设置字体，Windows下unity自带字体为Arial，该字体是英文字体，并不包含中文字体，因此如果在应用或者游戏中使用Arial字体，在某些机型上可能显示不全，为此我们需要下载一个外部.ttf格式的字体到Unity内。Font：设置字体，Windows下unity自带字体为Arial，该字体是英文字体，并不包含中文字体，因此如果在应用或者游戏中使用Arial字体，在某些机型上可能显示不全，为此我们需要下载一个外部.ttf格式的字体到Unity内。

FontStyle：设置字体样式。

FontSize ：设置字体大小。

LineSpacing：设置行间距（多行）。

RichText：设置富文本。

Alignment：设置文本在Text框中的水平以及垂直方向上的对齐方式。

HorizontalOverflow：设置水平方向上溢出时的处理方式。分两种：Wrap(隐藏）；Overflow(溢出）。

VerticalOverflow：设置垂直方向上溢出时的处理方式。分两种：Truncate(截断）；Overflow(溢出）。

BestFit：设置当文字多时自动缩小以适应文本框的大小。

Color：设置字体颜色。。Button控件

Button控件即按钮，是应用中最常使用的控件之一，用户通过Button控件的点击来触发相应的事件，完成与虚拟环境的交互。Button是一个复合控件，该控件下会自动生成一个Text子控件，通过此子控件可设置Button上显示的文字的内容、字体、文字样式、文字大小、颜色等。Button控件下挂有一个Image组件和Button组件，Image组件主要用于设置Button的外观，例如按钮的背景图片、颜色等；Button组件用于设置按钮的常用属性。

Interactable：是否启用交互，如果把其后的对钩去掉，此Button在运行时将不可单击，即失去了交互性。

Transition：过渡方式，分为四种：①None：没有过渡方式；②ColorTint：通过颜色改变过渡；③SpriteSwap：通过Sprite精灵改变实验过渡，需要使用相同功能、不同状态的贴图；④Animation：通过动画过渡。其中，ColorTint是最常用也是最常见的过渡方式。主要参数如下所示：

TargetGraphic：设置目标图像。

NormalColor：设置运行时颜色

HighlightedColor：设置高亮色。

PressedColor：设置单击时颜色。

DisabledColor：设置禁用时颜色。

ColorMultiplier：设置颜色倍数。

FadeDuration：设置变化持续的时间。Button是UI中使用频率最高的组件，用户常常通过Button控件来确定其选择行为，当用户单击Button控件时，Button控件会显示按下的效果，并触发与该控件关联的游戏功能。如点击按钮，Text文本的内容变化；点击按钮，Image图片更换等等。Button控件具体步骤如下：第一步，新建一个场景，选择2D模式，在Hierarchy层次面板中新建一个Button（此时会自动生成一个画布），调整Button的大小，使Button处于Canvas的正下方。第二步，选择Button控件，在子层级Text中修改属性Text的值是“确定”，适当修改文本大小。第三步，在Canvas下添加一个Text控件，修改该控件的Text内容为“欢迎使用”，适当修改文字大小。第四步，新建A_ButClick.cs。第五步，A_ButClick.cs挂载在Canvas上，并把对象Text赋予变量Text1。第六步，选择Button控件，在右侧的Inspector面板中找到Button组件，点击OnClick()右下方的“+”号，这里是设定Button的代码挂载的对象和对应的方法。上一步代码挂给了Canvas，因此这里选择Canvas，方法选择A_ButClick下的Queding。第七步，运行程序，点击按钮后，Text文本从“欢迎使用”变成了“再见”。InputField控件

InputField控件是一个复合控件，包含Placeholder与Text两个子控件。

Interactable：设置是否启用InputField组件。勾选表示输入字段可以交互，否则表示不可以交互。

Transition：设置当正常显示、突出显示、按下或禁用时输入字段的转换效果。Transition下的参数可参考上一个Button控件。

Navigation：设置导航功能。

TextComponent：设置此输入域的文本显示组件，用于显示用户输人的文本框。

Text：设置此输入域的初始值。

CharacterLimit：设置此输入域最大的输入字符数，0为不限制输入字符数。

ContentType：此输入域的内容类型，包括数字、密码等，常用的类型如下：①Standard：允许输人任何字符，只要是当前字体支持的即可；②Autocorrected：自动校正输入的未知单词，并建议更合适的替换候选对象，除非用户明确地覆盖该操作，否则将自动替换输入的文本；③IntegerNumber：只允许输入整数；④DecimalNumber：允许输入整数或小数；⑤Alphanumeric：允许输入数字和字母；⑥Name：允许输入英文及其他文字，当输人英文时能自动提示姓名拼写；⑦EmailAddress：允许输入一个由最多一个@符号组成的字母数字字符串；⑧Password：输入的字符被隐藏，只显7K星号；⑨Pin：只允许输入整数。输入的字符被隐藏，只显示星号；⑩Custom：允许用户自定义行类型、输入类型、键盘类型和字符验证。

LineType：设置当输入的内容超过输入域边界时的换行方式，包括三种，①SingleLine：超过边界也不换行，继续向右延伸此行，即输入域中的内容只有一行；②MuhiLineSubmit：允许文本换行。只在需要时才换行；③MultiLineNewline：允许文本换行。用户可以按回车键来换行。

Placeholder：设置此输入域的输入位控制符，对于任何带有Text组件的物体均可设置此项。Tollge控件

Toggle控件也是一个复合性的控件，包含一个Background和一个Label控件。Background是一个图像控件，而其子控件Checkmark也是一个图像控件，其Label控件是一个文本框，通过改变它们所拥有的属性值，即可改变Toggle的外观，如颜色、字体等。⚫IsOn：设置复选框默认是开还是关。⚫ToggleTransition：设置渐变效果。⚫Graphic：用于切换背景，更改为一个更合适的图像。⚫Group：设置多选组。在开发中发现，一个画布下可以放置多个Toggle控件，运行时，这几个Toggle控件可以同时被勾选，这种情况多选题可以，如果只能有一个选项就可以使用ToggleGroup组件来控制，ToggleGroup组件就是对同一组复选框进行约束，使每次只能打开一个复选框。01UUGUI系统介绍02……

常用的UGUI系统对象03SUPPORTINGTEXTHERESUPPORTINGTEXTHERE

Canvas控件Image控件Panel控件Text控件Button控件InputField控件Tollge控件UGUI综合实例

登陆模块menu模块考试须知模块测试题模块.第七章图形用户界面—一套完整的UI系统框架目录CONTENTSUGUI综合实例这是一个基于Unity3D实现的简易考题系统，该系统有一个登陆页面，用户名是admin，密码也是admin。当用户输入错误，系统提出重新输入，输入正确后跳转到menu页面，menu页面的功能是用来选择希望跳转的场景，点击场景名，可进入对应的场景。场景1中是考试须知，该场景中有一个滚动文本框，用来显示考试须知的内容；场景2是与Unity相关的选择题，回答错误会跳到回答错误页面，回答正确会给出提示。流程图如下所示：

登录模块

1.登录页面第一步，新建项目，将场景改成2by3方便制作用户界面。在Scene面板中选择2D模式，在Game面板中选择合适的分辨率。将素材图片复制到Textures中，在Project面板中点击图片，更改类型为Sprite，点击Apply添加成功。第二步，在Hierarchy面板中右击鼠标在UI选择栏中新建一个Canvas。第三步，右击Canvas新建一个Panel，将Panel命名为main-Panel，右击main-Panel新建一个Image，在SourceImage选择框中选择背景图片素材。

登录模块第四步，右击main-Panel新建一个Text，将Text命名为Text-username，将文本框移动到合适的位置，设置文本框和框内字体大小，输入文本“Username：”。第五步，右击main-Panel新建一个Text，将Text命名为Text-Password，将文本框移动到合适的位置，设置文本框和框内字体大小，输入文本“Password：”。第六步，右击main-Panel新建一个InputField，将InputField命名为InputField-username，将输入框移动到合适的位置，设置输入框和框内字体大小，展开InputField在Placeholder中输入文本“输入用户名”。第七步，复制InputField-username，更名为InputField-Password并移动到合适的位置，更改Placeholder中的文本为“输入密码”，第八步，右击main-Panel新建一个Button。将Button命名为Button-Enter，将按钮移动到合适的位置，设置按钮和按钮内字体大小，输入文本“Enter”。可以自行设置button的颜色，

登录模块2.登录错误页面第九步，隐藏main-Panel，右击Canvas新建一个Panel，将Panel命名为Panel-Wrong，右击Panel-Wrong新建一个Image，自行设置背景图片。第十步，右击Panel-Wrong新建一个Text，将文本框移动到合适的位置，设置文本框和框内字体大小，输入文本“输入不正确，请重新输入！”。第十一步，右击Panel-Wrong新建一个Button。将Button命名为Button-Wrong，将按钮移动到合适的位置，设置按钮和按钮内字体大小，输入文本“确定”。3.用户信息验证第十二步，新增一个脚本“Main.cs”，输入判断用户信息的代码。第十三步，将Main.cs挂给Cavas，点击登陆页面的Button，将Denglu()的方法给Button的Onclick事件。第十四步，设置登陆错误页面到登陆页面的返回功能。menu模块1.考试场景选择页面第十五步，隐藏Panel-Wrong，右击Canvas新建一个Panel，将Panel命名为Panel-menu，右击Panel-menu新建一个Image，自行设置背景图片。第十六步，右击Panel-menu新建一个Text，将Text命名为Biaoti，将文本框移动到合适的位置，设置文本框和框内字体大小，输入文本“这里将显示所选择的场景名”。第十七步，右击Panel-menu新建一个Text-menu，将文本框移动到合适的位置，设置文本框和框内字体大小，输入文本“点击此处进入相应场景”。（选择哪个场景，点击这里就可以进入对应场景）第十八步，右击Panel-menu新建一个Button。将Button命名为Button-ksxz，将按钮移动到合适的位置，设置按钮和按钮内字体大小，输入文本“考试须知”。第十九步，右击Panel-menu新建一个Button。将Button命名为Button-ceshiti，将按钮移动到合适的位置，设置按钮和按钮内字体大小，输入文本“测试题”。menu模块2.menu模块的交互功能第二十步，在Main.cs中新增如下代码；publicGameObjectksxz;publicGameObjectceshiti;以上两句是定义“考试须知页面”和“测试页面”这两个跳转对象；第二十一步，点击Button-ksxz，可以在Text-menu显示“考试须知”，在Main.cs中新增如下代码：publicTextbiaoti;publicvoidKsxz()//第一幕标题改变的代码

{

biaoti.text="考试须知";}在menu页面选择Button-ksxz，添加OnClick()，拖入Canvas，选择上面新建的方法。实现点击考试须知按钮，标题变成考试须知。第二十二步，点击Button-ceshiti，可以在Text-menu显示“考试题”。考试须知模块1.考试须知页面第二十三步，隐藏Panel-menu，右击Canvas新建一个Panel，将Panel命名为Panel-ksxz，右击Panel-ksxz新建一个Image，自行设置背景图片。第二十四步，右击Image新建一个Text，自行编辑一段考试须知文字（尽量多到当前的Text文本框承载不下），使文本框覆盖Image；在Image控件右侧点击“AddComponent”，添加一个Mask组件，多出的文字消失了。第二十五步，在Image控件右侧点击“AddComponent”，添加一个ScrollRect组件，将Text拖至Content选择框中。第二十六步，右击Image控件，新建一个子控件Scrollbar。刚刚建好的Scrollbar在画面上一般是横向的，而且比较小，我们可以调整其方向和大小。选择Scrollbar，在右侧检视面板，找到Direction的设置，选择垂直的“BottomToTop”，再将Scrollbar放置在右侧合适的位置。第二十七步，点击Image，在右侧检视面板，找到之前新增的ScrollRect，将Scrollbar拖到VerticalScrollbar中，进度条会自动和文本匹配。拖拽Scrollbar，可以显示被遮罩隐藏的文本。第二十八步，右击Panel-ksxz新建一个Button。将按钮移动到合适的位置，设置按钮和按钮内字体大小，输入文本“返回”。我们可以在该页面顶端加一个标题，写上“测试须知”。考试须知模块1.2考试须知模块交互第二十九步，返回按钮的功能（返回到menu）。在Main.cs中新增如下代码：publicvoidKsxzfanhui()//第二幕的返回代码

{

ksxz.SetActive(false);menu_panel.SetActive(true);}选择返回按钮，添加OnClick()，拖入Canvas，选择返回Panel-menu的方法。第三十步，在menu页面设置跳转场景文本Text-menu，添加Button组件，是该文本成为一个可交互的按钮，在main.cs中添加跳转到任意场景的代码。测试题模块1.测试题页面第三十一步，隐藏Panel-ksxz，右击Canvas新建一个Panel，将Panel命名为Panel-ceshiti，右击Panel-ceshiti新建一个Image，自行设置背景图片。第三十二步，右击Panel-ceshiti新建一个Text，将文本框移动到合适的位置，设置文本框和框内字体大小，输入文本“测试题”。第三十三步，右击Panel-ceshiti新建一个Text（1），将文本框移动到合适的位置，设置文本框和框内字体大小，输入文本“Unity3D支持下类哪种编程语言？”。第三十四步，右击Panel-ceshiti新建一个Toggle，将复选框移动到合适的位置。一个Toggle包含Background和Label两个控件，选择Label控件，在右侧检视面板，设置text文本为“C语言”，可以调节该文本的大小和字体。第三十五步，复制三个Toggle，将复选框移动到合适的位置，更改文本为“python”、“C#”、“C++”。第三十六步，右击Panel-ceshiti新建一个子控件Button。将按钮移动到合适的位置，设置按钮和按钮内字体大小，输入文本“确定”。第三十七步，如果是单选题，也就是每次只能选中一个复选框，就需要在Panel上添加一个ToggleGroup组件。选择Panel-ceshiti，在右侧监视面板，选择AddComponent，输入ToggleGroup并添加。第三十八步，为每个Toggle设置Group的来源。以Toggle1为例，选择Toggle1，在右侧监视面板，设置Group为Panel-ceshiti(ToggleGroup)，如图7.57所示。这样就可以设置为单选了。Toggle2-Toggle4以同样的方法设置。测试题模块2.恭喜过关页面第三十九步，隐藏Panel-ceshiti，右击Canvas新建一个Panel，将Panel命名为answer-right，右击answer-right新建一个Text，将文本框移动到合适的位置，设置文本框和框内字体大小，输入文本“恭喜过关”。右击answer-right新建一个Button。将按钮移动到合适的位置，设置按钮和按钮内字体大小，输入文本“返回”。3.回答错误页面第四十步，隐藏Panel-ceshiti，右击Canvas新建一个Panel，将Panel命名为answer-wrong，右击answer-wrong新建一个Text，将文本框移动到合适的位置，设置文本框和框