Unity3D引擎与虚拟现实（VR）项目开发（微课版） 课件 第05章 Unity3D图形用户界面基础

第1页第五章Unity3D图形用户界面基础

第2页5.1Canvas画布

设置UI界面，首先在层级面板中创建一个Canvas接着在层级面板中点击Canvas，右键选择UI,弹出二级菜单，可以选择项目所需的UI元素，下面分别介绍常见UI元素的创建和使用方法。第3页5.2Image图片

层级面板中点选Canvas，右键选择UI->Image原始图片是无法导入进Unity里，必须将图片转化成Sprite类型，最后点击Apply按钮。如下图所示。第4页5.2Image图片

将图片拖至Image组件里的SourceImage属性框里，如下图所示：第5页5.2Image图片

Image的重要属性：ImageType1.Simple（基本的）：图片整张全显示，不裁切，不叠加，根据边框大小会有拉伸。2.Sliced（切片的）：图片边框拉伸，图片的四个角会保持原状。3.Tiled（平铺的）：图片平铺拉伸。4.Filled（填充的）：根据填充方式、填充起点、填充比例决定图片显示哪一部分。第6页5.3Text文本框

层级面板中点选Canvas，右键选择UI->TextMeshPro显示一个弹出窗口，点选ImportTMPEssentials按钮。第7页5.3Text文本框

TextMeshPro默认不支持中文，可以自己生成一个中文字体文件供Unity使用。1）按照右边操作示意图，弹出FontAssetCreator窗口。2）按右图所示操作3）完成后按generate后再save一下就生成.asset文件。第8页5.4Button按钮

Button的外观颜色有以下几种类型：1）NormalColor：默认背景颜色2）HighlightedColor：光标经过按钮时的颜色3）PressedColor：鼠标点击按钮时的颜色第9页5.4Button按钮

Button的点击事件响应案例

实现当点击按钮时加载一个三维场景：先设计一个UI界面，创建一个按钮创建一个脚本：1）加上一个Using语句：usingUnityEngine.SceneManagement;2）创建一个方法，在该方法里加入：

SceneManager.LoadScene("场景名字");

第10页5.4Button按钮

3）将脚本绑定到Canvas4）在按钮属性面板中找到OnClick()属性5）点击右下方的加号，出现三个框，将

Canvas拖拽到左下方的框里。

将方法选择

到右边列表框里。如右图红色箭头所示。

第11页5.4Button按钮

6）选择主菜单File-》BuildSetting...,弹出一个新的界面，将加载场景添加到这个新的界面下，如下图所示。

第12页5.5Slider滑动条每个界面都会存在一些控制部件，比如最常见的声音的音量调整、图像的清晰度等等，这些都需要Slider控件来控制如何创建滑动条？

在层级面板中右键选中Canvas，UI-》Slider第13页5.5Slider滑动条Slider的样式颜色设置1）默认滑块背景颜色设置第14页5.5Slider滑动条Slider的样式颜色设置2）滑动条背景颜色设置第15页5.5Slider滑动条Slider的样式颜色设置3）滑块经过的区域颜色改变设置第16页5.5Slider滑动条如何通过滑块控制小方块的旋转速度？Slider控件也可以像Button控件一样可以挂载脚本用来响应事件监听，首先写一个脚本，OnValuechanged方法里是对事件的处理，将脚本挂载到Cube对象上。1）编写脚本，如右图所示2）将这个脚本绑定到Cube第17页5.5Slider滑动条3）在滑动条属性面板找到OnValueChanged组件，进行相应设置。第18页作业1）创建第一个场景，作为游戏启动UI界面：

屏幕的中上方显示一段文本，内容是：“传奇世界”（50号字体，斜体加粗体，文本红色）

屏幕的右上方显示一张图片。屏幕的中央位置放置一个按钮，标题是“StartGame”，默认按钮颜色是黄色，光标经过时变成绿色，点击按钮时变成红色。

当点击按钮时，进入到第二个场景。2）创建第二个场