《游戏场景设计》课件-模块5 Unity UI系统

模块5UnityUI系统START熟悉UGUI的基本控件1认识UGUI的可视控件2认识UGUI的交互控件3目录Contents综合实践-游戏界面制作46熟悉UGUI的基本控件1任务5.1熟悉UGUI的基本控件5.1.1画布CanvasCanvas（画布）是容纳所有UI元素的区域，画布区域在Scene视图中显示为矩形。所有UI元素都必须是画布的子项，并且位于画布矩形区域内，才可以被渲染。创建新的UI元素时，如果场景中还没有画布，系统则会自动创建画布。UI元素将自动创建为此画布的子项。5.1熟悉UGUI的基本控件5.1.2画布中绘制元素的顺序画布中的UI元素按照它们在Hierarchy视图中的显示顺序绘制。首先绘制第一个子项，然后绘制第二个子项，依此类推。如果两个UI元素重叠，则后一个元素将显示在前一个元素之上。更改元素的显示顺序，只需在Hierarchy视图中拖动元素进行重新排序。5.1熟悉UGUI的基本控件5.1.3创建画布画布可以通过菜单或在Hierarchy视图中单击鼠标右键来创建，如下图：5.1熟悉UGUI的基本控件5.1.4画布的渲染模式Canvas组件下面的RenderMode属性决定了UI的渲染模式。Unity共提供了三种渲染模式：ScreenSpace-Overlay、ScreenSpace-Camera和WorldSpace。5.1熟悉UGUI的基本控件5.1.4画布的渲染模式1.ScreenSpace-Overlay模式“ScreenSpace-Overlay”模式即屏幕空间覆盖模式，在该模式下，UI渲染在场景对象上，即UI遮挡了3D游戏对象，永远位于所有物体的前面，如下图所示。ScreenSpace-Overlay

渲染模式UI渲染在物体上面5.1熟悉UGUI的基本控件5.1.4画布的渲染模式2.ScreenSpace-Camera模式“ScreenSpace-Camera”模式即屏幕空间相机模式，在该模式下，当场景中的3D游戏对象距离相机更近时，该游戏对象则会显示在UI的前方，如下图所示。ScreenSpace-Camera渲染模式UI的前面有场景对象5.1熟悉UGUI的基本控件5.1.4画布的渲染模式3.WorldSpace模式WorldSpace模式即世界空间模式，在该模式下，UI被看作是一个3D游戏对象，与场景中的其他游戏对象相交，该模式适合于VR、AR项目UI的制作，如下图所示。WorldSpace

渲染模式WorldSpace模式下

UI视作3D物体5.1熟悉UGUI的基本控件5.1.5CanvasScaler组件CanvasScaler（画布缩放器）组件用于控制画布中UI元素的整体缩放和像素密度。此缩放会影响画布下的所有内容，包括字体大小和图像边框。单击“UIScaleMode”下拉列表，可以看到Unity共支持三种缩放模式，如下图所示。认识UGUI的可视控件2任务5.2认识UGUI的可视控件5.2.1UI控件的布局UI控件可以通过菜单或在Hierarchy视图中单击鼠标右键创建。创建一个UI控件后，组成该UI控件的一个重要组件就是RectTransform（矩形变换组件），也叫做矩形变换工具，位于工具栏中，如下图示。矩形变换工具可对UI元素进行移动、调整大小和旋转角度。用户可通过单击矩形内的任意位置并拖动来对元素进行移动。通过单击边或角并拖动，可调整元素大小。可在稍微远离角点的位置悬停光标，直到鼠标光标看起来像旋转符号，然后单击并向任一方向拖动来进行旋转。5.2认识UGUI的可视控件5.2.2Text控件Text（文本）控件也称为标签（Label），包含一个输入显示文本的区域，并具有设置字体、字体样式、字体大小以及文本是否支持富文本等功能的选项。Text控件可以通过菜单或在Hierarchy视图中单击鼠标右键创建，如下图示。5.2认识UGUI的可视控件5.2.3Image控件Image（图片）控件可以通过菜单或在Hierarchy视图中单击鼠标右键创建，如下图示。5.2认识UGUI的可视控件5.2.3Image控件图片控件创建成功后，在Hierarchy视图中单击该图片，在右边的Inspector视图中可查看该Image控件的属性，如下图示。5.2认识UGUI的可视控件5.2.4RawImage控件RawImage（原始图像）控件采用纹理形式，只有在必要时才使用原始图像（比如：渲染纹理贴图、小地图、图像视频等），大多数情况下使用图像Image。RawImage控件创建并选中后，其Inspector视图，如下图示。5.2认识UGUI的可视控件5.2.5Mask控件Mask（遮罩）不是可见的UI控件，而是一种修改控件子元素外观的方法。遮罩将子元素限制（即“掩盖”）为父元素的形状。因此，如果子项比父项大，则子项仅包含在父项以内的部分才可见。创建遮罩效果，一般需要给父物体添加Mask控件，父物体通过Mask控件属性“ShowMaskGraphic”值设置可见与否，如下图示。认识UGUI的交互控件3任务5.3认识UGUI的交互控件UGUI系统中的交互控件可用于处理交互，主要包括按钮、开关、滑动条、滚动条、下拉菜单、文本输入框等。5.3.1Button控件Button（按钮）控件可响应用户的单击并用于启动或确认操作。可以通过菜单或在Hierarchy视图中单击鼠标右键创建，按钮控件创建成功后，在Hierarchy视图单击该按钮，展开后可以看到它是由“Button”下带“Text”的控件组成的，其中Text控件控制按钮上面的文本内容。如下图示。5.3认识UGUI的交互控件5.3.1UButton控件选中按钮后，在右边的Inspector视图中查看该按钮的属性，可以看到Button控件主要由“RectTransform”“CanvasRenderer”“Image”和“Button”组件组成，其中Image组件决定按钮的外观图片显示。Button控件的核心组件是Button组件5.3认识UGUI的交互控件5.3.2Toggle控件Toggle（开关）控件是让用户打开或关闭某个选项的复选框，例如在游戏期间播放或关闭音乐。用户可以通过菜单或在Hierarchy视图中单击鼠标右键创建Toggle控件，如下图示。5.3认识UGUI的交互控件5.3.2Toggle控件Toggle控件创建成功后，在Hierarchy视图中选择该控件，展开后可以看到Toggle控件由“Background”（图片）、“Checkmark”（图片）和“Label”（文本）三部分组成，其中“Label”标签显示开关的文字内容，“Background”显示开关的背景图片，Checkmark”显示开关的选中标记。用户可以根据需要改变这三部分的值，达到自己想要的外观效果。5.3认识UGUI的交互控件5.3.3ToggleGroup控件ToggleGroup（开关组）控件不是可见的UI控件，而是一种修改一组开关行为的方法。属于同一组的开关将受到约束，即一次只能打开其中一个开关，按下打开其中一个开关便会自动关闭其他开关。当用户必须从互斥的一组选项进行选择时，便可使用开关组，例如选择玩家角色类型、速度设置（慢速、中速、快速等）、预设颜色和一周中的日期等。在场景中可以同时有多个开关组对象，因此可以根据需要创建多个单独的组。5.3认识UGUI的交互控件5.3.3ToggleGroup控件ToggleGroup控件的创建方法如下所示。首先在画布中创建空物体并命名为“ToggleGroup”，选中该物体在Inspector视图中单击下面的“AddComponent”按钮，给该物体添加组件ToggleGroup，如下图所示。5.3认识UGUI的交互控件5.3.4Slider控件Slider（滑动条）控件允许用户通过拖动鼠标从预定范围中选择数值。用户可以通过菜单或在Hierarchy视图中单击鼠标右键创建Slider控件，如下图所示。5.3认识UGUI的交互控件5.3.4Slider控件Slider控件创建成功后，在Hierarchy视图中选中，展开后可以看到Slider控件由“Background”（图片）、“Fill”（图片）和“Handle”（图片）三部分组成，其中“Background”显示滑动条的背景图片或颜色，“Fill”显示滑动后填充的图片或颜色，“Handle”显示滑动控制柄图片。可以根据需要改变这三部分的值，达到自己想要的滑动条外观效果，如下图所示。5.3认识UGUI的交互控件5.3.5Scrollbar控件Scrollbar（滚动条）控件允许用户滚动由于太大而无法完全看到的图像或其他视图，例如文本编辑器侧面的垂直滚动条以及用于查看大型图像或地图某一部分的一对垂直和水平滚动条。用户可以通过菜单或在Hierarchy视图中单击鼠标右键创建Scrollbar控件，如下图所示。5.3认识UGUI的交互控件5.3.5Scrollbar控件Scrollbar控件创建成功后，在Hierarchy视图中选中，展开后可以看到Scrollbar控件由“SlidingArea”下的控制柄“Handle”（图片）组成，“Handle”显示滑动控制柄图片。用户可以根据需要改变其值，达到自己想要的滚动条外观效果，如下图所示。5.3认识UGUI的交互控件5.3.6Dropdown控件Dropdown（下拉列表）控件可用于让用户从选项列表中选择单个选项。此控件会显示当前选择的选项。单击后，此控件会打开选项列表，以便选择新选项。选择新选项后，列表再次关闭，而控件将显示新选择的选项。如果用户单击控件本身或画布内的任何其他位置，列表也将关闭。用户可以通过菜单或在Hierarchy视图中单击鼠标右键创建Dropdown控件，如下图所示。5.3认识UGUI的交互控件5.3.6Dropdown控件下列列表控件创建成功后，在Hierarchy视图中选中，展开后可以看到它是由“Label”（文本）、“Arrow”（图片）和隐藏的模板“Template”组成的，“Label”显示下拉列表中选项的文字内容，“Arrow”为选项右侧的图标（默认为向下的箭头），用户可以根据需要改变这些参数的值，结合模板内容（展开并显示出来进行修改）达到自己想要的下拉列表的外观效果，如下图所示。5.3认识UGUI的交互控件5.3.7InputField控件InputField（输入字段）是一种可编辑文本的控件，与其他交互控件一样，InputField控件本身不是可见的UI元素，必须与一个或多个可视UI元素组合才能显示。用户可以通过菜单或在Hierarchy视图中单击鼠标右键创建InputField控件，如下图所示。5.3认识UGUI的交互控件5.3.7InputField控件InputField控件创建成功后，在Hierarchy视图中选中，展开后可以看到它是由TextArea下的“Placeholder”（文本）和“Text”（文本）组成的，“Placeholder”显示文本框输入前的提示信息，“Text”即为运行时要输入的内容。可以根据需要改变其值，达到自己想要的输入字段外观效果，如下图所示。综合实践-游戏界面制作4任务5.4综合实践-游戏界面制作前面介绍了UI控件的创建及使用方法，下面实现一个较为完整的游戏登录界面和游戏设置界面为例，详细介绍UI控件的综合使用方法。5.4综合实践-游戏界面制作5.4.1设计登录界面通过分析游戏登录界面，可以看出，该面板主要由背景图片、标题图片、标题文本、账号和密码两个文本输入框和一个按钮控件组成。5.4.2设计设置界面通过分析游戏设置界面，可以看出，该面板主要由背景图片、标题图片、标题文本、音量滑动条、音效开关单选按钮、等级单选按钮组和关闭按钮组成。5.4综合实践-游戏界面制作5.4.3实现UI交互设计通过分析游戏登录界面，可以看出，该面板主要由背景图片、标题图片、标题文本、账号和密码两个文本输入框和一个按钮控件组成。1.交互功能分析在登录面板的账号和密码输入框分别