滑块使用向导创建滑块为游戏界面添加音量调节滑块NGUI从入门到实战大学霸

滑块使用向导创建滑块NGUI从入门到实战大学霸

2.6  滑块滑块使用向导创建滑块NGUI从入门到实战大学霸

滑块（Slider）组件在游戏中常用于调节音量、亮度等等参数。本节就来说明在Unity中，使用NGUI创建及使用滑块的方法。

2.6.1  使用向导创建滑块滑块使用向导创建滑块NGUI从入门到实战大学霸

创建滑块的步骤如下：

（1）在Hierarchy视图里的Panel对象下，新建一个空对象，并命名为Volume。

（2）打开UI控件创建向导，并设置其下列属性，如图2-70所示。

q  Templete：Slider；

q  Empty：Dark；

q  Full：Light；

q  Thumb：Highlight；

q  Add to：Volume；

图2-70  使用向导创建滑块

（3）返回到Hierarchy视图，查看使用向导创建的滑块。读者会发现它是由3个其它对象Background、Foreground和Thumb组成的，如图2-71所示。可以看作是3个Sprite，分别表示滑块的背景色、前景色和滑块。

图2-71  位于Volume空对象下，新创建的滑块

（4）在Hierarchy视图里选中新创建的滑块（即Slider对象），在Inspector视图里看到除了Transform和Box Collider组件外，还有UISlider(Script)组件，如图2-72所示。

图2-72  UISlider(Script)组件

q  Value：记录当前滑块所表示的值，这个值位于0~1之间；

q  Steps：记录滑块在0~1之间，一共有几个可以表示的值；

q  Direction：表示滑块的种类；即此滑块是水平的，还是垂直的；

q  Foreground：表示作为滑块前景色的Sprite；

q  Thumb：表示作为滑动部分的Sprite；

（5）使用向导创建的滑块，如图2-73所示。

图2-73  使用向导创建的滑块（Scene视图里的效果）

2.6.2  示例：为游戏界面添加音量调节滑块滑块使用向导创建滑块NGUI从入门到实战大学霸

在玩游戏的过程中，很多游戏都运行玩家调节音量，那么本小节就使用学到的知识，创建一个音量调节滑块作为示例，如图2-74所示。

 

图2-74  音量调节滑块示例

具体的操作步骤如下：

（1）在Hierarchy视图里，为Panel对象添加一个子对象，并命名为Volume。

（2）在Hierarchy视图里，选中Nickname对象下的Background子对象，然后按下快捷键Ctrl+D，来获得此对象的一个拷贝，将它拖动到Volume对象下。在Inspector视图里设置下列属性：

q  Dimensions：320×135；

（3）为Volume对象下的Background添加UIAnchor(Script)组件，设置下列属性，使其位于游戏界面左侧靠下的位置，如图2-75所示。

q  Container：Window；

q  Pixel Offset：X：-420，Y：-90；

图2-75  位于游戏界面左侧靠下位置上的Background滑块使用向导创建滑块为游戏界面添加音量调节滑块NGUI从入门到实战大学霸

（4）拷贝Nickname对象下的Label对象到Volume对象下，并完成下列设置，如图2-76所示。

q  Container：Background；

提示：此Background为Volume的子对象。

q  Label的文本：[AAFFFF]Volume；

 

图2-76  Game视图中的效果

（5）在Hierarchy视图里，为Volume对象添加一个滑块Slider，向导各属性的设置与上一小节相同。为Slider对象添加UIAnchor(Script)组件，并设置下列属性：

q  Container：Background；

提示：此Background是Volume的子对象。

q  Pixel Offset：X：-100，Y：-23；

完成以上设置以后，在Scene视图中看到的效果如图2-77所示。绿色框线所在的位置就是滑块，因为被其它控件挡住了，所以才没有看到具体的滑块控件。

 

图2-77  Scene视图中的效果图

（6）在Hierarchy视图里，选中Slider的子对象Background，然后在Inspector视图里设置下列属性，令其以特定的颜色显示与游戏界面。

q  Depth：3；

q  Color Tint：R：80，G：220，B：85，A：255；

（7）在Hierarchy视图里，选中Slider的子对象Foreground，然后在Inspector视图里设置下列属性：，令其以特定的颜色在游戏界面中显示。

q  Depth：4；

q  Color Tint：R：95，G：255，B：190，A：255；

（8）在Hierarchy视图里，选中Slider的子对象Thumb，然后在Inspector视图里设置下列属性：，令其以特定的颜色显示与游戏界面。

q  Depth：5；

q  Color Tint：R：100，G：255，B：250，A：255；

（9）在完成了以上的所有操作以后，音量调节滑块就会完美的呈现在游戏的界面中了，如图2-78所示。

 

图2-78  目前游戏背景的效果图

（10）虽然音量滑块本身已经被添加到了游戏界面中，但是这个控件却没有实现它本应实现的功能，就是调节游戏的音量，因此接下来的任务就是编写脚本实现这个功能。首先，游戏本身应该可以播放音乐，而且就在游戏被启动的时候就播放。为了做到这一点，需要在Hierarchy视图里选中Main Camera对象，然后为其添加Audio Source组件。方法是在Unity中，单击Component|Audio|Audio Listener命令。最后设置此组件下的如下属性，如图2-79所示。

q  Audio Clip：Music1；

提示：此属性用于设置游戏播放的声音片段。而Music1是本示例中，作者导入的一个mp3铃声，读者可以自行选择其它的铃声。

 

图2-79  为Main Camera对象添加Audio Source组件，并设置其Audio Clip属性

（11）在Project视图里，新建一个C#脚本，命名为VolumeManager。打开此脚本并添加下面的代码：

01     using UnityEngine;

02     using System.Collections;

03

04     public class VolumeManager : MonoBehaviour

05     {

06              UISlider slider;

07              void Awake()

08              {

09                       slider = GetComponent<UISlider>();

10                       slider.value = NGUITools.soundVolume;

11              }

12              public void OnVolumeChanger()

13              {

14                       NGUITools.soundVolume = UISlider.current.value;

15                       AudioListener.volume = UISlider.current.value;

16              }

17     }

将此脚本赋予Slider对象。

q  脚本09行，建立了脚本与UISlider(Script)组件的关联；

q  脚本10、14行，都使用了NGUITools.soundVolume，此变量的值可以永久性的保存，即使是游戏关闭以后。因此，前者的作用是将这个变量中的值赋予滑块，而后者则是将玩家对音量的设置存储与这个永久性的变量中；

提示：这么做的效果就是，每次游戏被启动的时候，游戏的音量都会被设置为游戏上次关闭前所使用的音量，玩家无需继续调节。

q  脚本12~16行，OnVolumeChanger()是自定义的被声明为公有的方法，它的作用是记录当前游戏的音量（脚本14行），以及设置当前游戏播放的音量（脚本15行）；

（12）在Hierarchy视图里，选中Slider对象，然后设置其下列属性，如图2-80所示。

q  Notify：Slider；

q  Method：VolumeManager.OnVolumeChanger；

图2-80  设置Slider对象，UISlider(Script)组件下的属性

提示：此属性设置的目的是，当玩家在游戏界面中，使用滑块调节了音量，那么就会触发脚本VolumeManager中OnVolumeChanger()方法的调用，从而实现了调节游戏音量的目的。

（13）在完成了以上的所有操作以后，即可运行游戏。游戏运行的同时，声音开始播放，读者此时可以使用滑块调节音量。关闭游戏再重新运行，读者会发现调节音量的滑块就位于上次关闭游戏时所设置的位置滑块使用向导创建滑块为游戏界面添加音量调节滑块NGUI从入门到实战大学霸。