第3章　Unity3D引擎的脚本编程-3.2图形用户界面UGUI

.Unity3D引擎的脚本编程

3.2图形用户界面UGUI

.目录.7

.用脚本来控制UI元素的交互

.2.图像Image

.3.文本Text

.4.按钮Button

.5.开关Toggle

.1

.画布Canvas

.6.滑块Slider

1.

画布Canvas

图形用户界面（GraphicalUserInterface，GUI）是游戏中重要的组成部分之一。

Canvas是所有GUI的根节点，是承载所有UI元素的区域，所有UI元素都是Canvas的子对象。在菜单中选择“GameObject”→“UI”→“Canvas”，即可在场景中创建一个Canvas。若场景中没有EventSystem物体，这时系统会自动创建一个EventSystem。

创建画布如图所示，Scene面板中的白色矩形就是画布。2.

图像Image

以添加背景图像为例，讲解Image的使用方法。

操作步骤如下：

（1）在Hierarchy面板中单击鼠标右键，选择“UI”→“Image”，创建一个Image类的对象，其会被自动添加到Canvas下，与Canvas形成父子关系；将其改名为Background。；（2）添加背景图像：将准备好的背景图像拖曳到Inspector面板下Background中的Image组件的SourceImage字段中；将图像的PosX、PosY、PosZ值均设为0，图像出现在画布的中心位置；（3）调整背景图像，使图像平铺满整个画布；可在Inspector面板的Background中单击“SetNativeSize”按钮，调整图像和Canvas属性，将图像的大小设置为1920×548。修改Canvas的CanvasScaler组件，将缩放模式设置成ScaleWithScreenSize，参考尺寸设置为1920×548。3.文本Text

文本是UI中很常见的组件，在Hierarchy面板中单击鼠标右键，选择“UI”→“Text”，创建一个Text类的对象，其会被自动添加到Canvas下。Text组件如图所示，在Inspector面板中的Text中，可输入需要显示的文字，设置字体、大小、对齐方式、颜色等。4.按钮Button

在图形用户界面中，按钮是交互性很强的控件，按钮响应单击事件，如常用的确定按钮和取消按钮。在Hierarchy面板中单击鼠标右键，选择“UI”>“Button”，创建一个Button类的对象，其自动添加到Canvas之下。Button控件默认包括一个文本控件Text，用来显示按钮上的文字，Text元素是可选的，若按钮是以图像的形式呈现，则可删除此Text元素。例如，在背景中添加一个“确定”按钮，通过图像切换呈现按钮的不同状态。

具体操作步骤如下：（1）在Hierarchy面板中单击鼠标右键，选择“UI”→“Button”，创建一个Button类的对象，将按钮改名为ComformBt，并调整按钮的大小和位置。（2）将已准备好的图像导入到Assets文件夹下，精灵图像的处理如图所示。将TextureType设置成Sprite(2DandUI)、SpriteMode设置成Multiple后，单击“SpriteEditor”按钮，再单击“Slice”按钮，将图像分割成多张独立的图像，并将分割后的图像应用在按钮上。4.按钮Button

例如，在背景中添加一个“确定”按钮，通过图像切换呈现按钮的不同状态。

具体操作步骤如下：（3）如图所示，将4种状态的按钮图像分别拖曳到Button组件对应位置。

按钮不同状态下的贴图效果如图所示，可以看到按钮未单击、鼠标指针经过按钮、单击按钮会呈现出不同的图像样式。5.Toggle开关

Toggle（开关）是一个复选框，用于实现选项的勾选/不勾选操作，适合制作开关类按钮。默认的Toggle由4个游戏对象组成，如图所示，包含Toggle（开关）本体、Background（背景图像）、Checkmark（勾选图，默认为“

”）和Label（文本）。

例如，在场景中添加音乐开关，控制背景音乐的播放与停止，具体操作步骤如下：

1．在场景中添加背景音乐

Hierarchy面板中选中“MainCamera”，Inspector面板中单击“AddComponent”按钮，添加AudioSource和AudioListener组件；

Project面板中，将Assets中的音乐拖曳到Inspector面板中的“AudioClip”处，勾选“PlayOnAwake”复选框，如图所示。5.Toggle开关

例如，在场景中添加音乐开关，控制背景音乐的播放与停止，具体操作步骤如下：

2．添加音效控制开关

Hierarchy面板中单击鼠标右键，选择“UI”→“Toggle”，创建一个Toggle类的对象，并将开关改名为Toggle_sound；

调整开关大小和位置。本例中使用图像来制作开关，不需要文本组件，因此删除开关下的Label对象。

Hierarchy面板中选中“Toggle_sound”，取消选中Toggle组件中的“IsOn”复选框。

将准备好的两张图像导入Assets文件夹下，并将图像转换成Sprite(2DandUI)贴图类型，分别将其拖曳到对应的“SourceImage”中，设置开关图像如图所示。5.Toggle开关

例如，在场景中添加音乐开关，控制背景音乐的播放与停止，具体操作步骤如下：

3．将MainCamera的AudioSource组件的mute（静音）和Toggle关联

Hierarchy面板中选中“Toggle_sound”，在Inspector面板中Toggle组件的OnValueChanged(Boolean)下面单击“+”按钮添加新事件。

将MainCamera对象拖曳到RuntimeOnly下方，然后在NoFunction下拉列表中选择“AudioSource”→“(Dynamicbool)mute”。创建并关联事件如图所示。运行游戏，单击开关按钮并尝试打开和关闭音乐。添加了音乐控制开关按钮的场景图状态如图所示。6.滑块Slider

默认的Slider由4个游戏对象组成，Slider组件如图3-39所示，包括Slider（滑块）本体、Background（背景图像）、Fill（填充）和Handle（滑动柄）。

例如，在音乐开关旁边增加一个滑块来调节音量大小，具体操作步骤如下：

1．设置Slider将Slider改名为Slider_volume，并调整其位置及大小，将滑块移动到音乐开关按钮右侧。为滑块的每个部分设置相应的图像：分别选择Background、Fill、Handle，将准备的3张图像拖曳到对应的“SourceImage”属性框中。

2．将MainCamera的AudioSource组件的volume（音量）和Slider关联

Hierarchy面板中选中“Slider_volume”，在Inspector面板中Slider组件的OnValueChanged(Single)下面单击“+”按钮添加新事件。

将MainCamera对象拖曳到RuntimeOnly下方，然后在NoFunction下拉列表中选择“AudioSource”→“(Dynamicbool)volume”。创建并关联事件如图所示。7. 用脚本来控制UI元素的交互

Button、Toggle、Slider元素都是交互类的UI元素。可通过组件自带的脚本控制交互操作，也可编写脚本来灵活控制UI元素的交互。

制作一组技能冷却图标，来讲解用脚本监听和触发UI交互事件。通过脚本实现监听鼠标指针经过、鼠标指针离开和鼠标单击事件，具体操作步骤如下：

1．技能冷却图标界面

Hierarchy面板中单击鼠标右键，在弹出的快捷菜单中选择“CreateEmpty”，创建一个空物体，将其改名为Bar。选中“Bar”，单击鼠标右键，在弹出的快捷菜单中选择“UI”→“Image”，创建图像，将其改名为Background并添加到Bar之下；将准备好的图像拖曳到Background的“SourceImage”中，作为背景图像；调整Background的大小和位置。选中“Bar”，单击鼠标右键，在弹出的快捷菜单中选择“CreateEmpty”，创建空物体，将其改名为item；

在item之下，新建3个图像对象，分别对应icon冷却图标、buffer蒙版和frame图标边框。将准备好的3张图像拖曳到对应的“SourceImage”中，并按顺序叠放，技能冷却图标界面如图所示。设置buffer的Image属性，将图像类型设置成Filled，选择360度填充，从顶部开始。将frame对象设置为不可见：在其Inspector面板中，将取消其名字前的复选框。7. 用脚本来控制UI元素的交互

通过脚本实现监听鼠标指针经过、鼠标指针离开和鼠标单击事件，具体操作步骤如下：2.编写脚本：实现鼠标指针经过技能冷却图标时显示绿色边框，鼠标指针离开时绿色边框消失的效果。

Project面板中，选择“Assets”→“Scripts”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“Create”→“C#Script”，新建脚本文件BarCtrl.cs。。本实例要监听鼠标指针经过、鼠标指针离开和鼠标单击事件，脚本需继承对应的事件监听接口IPointerEnterHandler、IPointerExitHandler、IPointerClickHandler

。脚本中需要重写接口中的事件处理函数OnPointerEnter、OnPointerExit、OnPointerClick。3．实现技能冷却效果技能冷却就是用脚本控制buffer对象，当单击图标时，将buffer对象中的FillAmount属性值从1逐渐减到0。脚本中增加变量speed，用于控制图像填充的速度；变量img用来存放将要修改属性的图像对象。动态修改buffer对象中的FillAmount值，此段代码放在Update()函数中。游戏每运行一帧，FillAmount值递减一次，直到FillAmount值为0