4.1 图形用户界面组件
开发过程中，经常会用到图形用户界面组件，因为，在一个项目中一般少不了按钮、文本框、图片的插入以及滑杆等控件的应用，通过合理地设计可以搭建出优美的图形用户界面。所示一般的游戏设置界面和帮助界面都是通过图形用户界面组件中的各个控件的合理使用搭建而成的。
在此首先要声明，图形用户界面组件的绘制的位置是通过坐标定位的，这里以屏幕左上角的坐标位置为（0,0），屏幕右下角的位置为（Screen.Width,Screen.Heigth），并且坐标的单位为像素进行开发的。
4.1.1 图形用户界面组件的变量
Unity 提供了丰富的图形用户界面组件变量，通过这些变量，可以在整体上对图形用户界面组件做相应的设置，从而实现特定的开发需求。下面将对图形用户界面的部分组件的常用变量进行详细的介绍，具体的变量信息如表4-1所示。
表4-1 图形用户界面组件的变量
1．Skin皮肤
Skin变量是在总体上对使用的皮肤风格进行设置，在开发过程中可以通过改变Skin的总体风格来改变图形用户界面的风格，如果读者将其设置为NULL，皮肤将会恢复到默认的统一的皮肤。具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量 JavaScript / Skin.js。
1 var s1 : GUISkin[]; //声明一个GUISkin数组
2 private var hSliderValue : float = 0.0; //声明私有变量hSliderValue
3 private var vSliderValue : float = 0.0; //声明私有变量vSliderValue
4 private var hSValue : float = 0.0; //声明私有变量hSValue
5 private var vSValue : float = 0.0; //声明私有变量vSValue
6 private var cont : int = 0; //声明私有计数器cont
7 function Update() { //声明Update方法
8 if(Input.GetKeyDown(KeyCode.Space)) //对键值状态进行判定
9 cont++; //计数器count自加
10 }
11 function OnGUI() { //声明OnGUI方法，用于创建GUI组件
12 GUI.skin = s1[cont%s1.Length]; //确定数组序列
13 if(s1.Length == 0){ //若数组长度等于0
14 Debug.LogError("Assign at least 1 skin on the array"); //打印提示信息
15 return;
16 }
17 GUI.Label (Rect (10, 10, 100, 20), "Hello World!"); //画标签
18 GUI.Box(Rect(10, 50, 50, 50), "A BOX"); //画一个盒子
19 if (GUI.Button(Rect(10,110,70,30), "A button")) //若单击按钮
20 Debug.Log("Button has been pressed"); //打印提示信息
21 hSliderValue = GUI.HorizontalSlider (Rect (10, 150, 100, 30), hSliderValue, 0.0, 10.0); //画水平滑杆
22 vSliderValue = GUI.VerticalSlider (Rect (10, 170, 100, 30), vSliderValue, 10.0,0.0);
//画垂直滑杆
23 hSValue = GUI.HorizontalScrollbar (Rect (10, 210, 100, 30), hSValue, 1.0, 0.0, 10.0); //画水平滚动条
24 vSValue = GUI.VerticalScrollbar (Rect (10, 230, 100, 30), vSValue, 1.0, 10.0,0.0);//画垂直滚动条
25 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出所设计的图形用户界面，如图4-1所示。
▲图4-1 游戏预览面板中显示的图形用户界面
提示
在此读者只需在视觉感官上有一个大体的了解和认识，稍后的章节将对每个小图形用户界面组件的创建和脚本的挂载进行介绍，使读者在根本上学会图形用户界面组件的应用与场景的合理搭建。
2．color变量
color变量是总体上图形用户界面组件的颜色，在开发过程中可以通过设置color的值来改变图形用户界面组件的颜色，进而实现开发的具体需求，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / color.js。
1 function OnGUI() { //声明OnGUI方法
2 GUI.color = Color.yellow; //将颜色设置为黄色
3 GUI.Label (Rect (10, 10, 100, 20), "Hello World!"); //画一个标签
4 GUI.Box(Rect(10, 50, 50, 50), "A BOX"); //画一个盒子
5 GUI.Button(Rect(10,110,70,30), "A button"); //画一个按钮
6 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出对颜色变量的设置效果，如图4-2所示。
3．backgroundColor变量
backgroundColor 变量是总体上图形用户界面组件的背景颜色，在开发过程中可以通过设置backgroundColor的值来改变图形用户界面组件的颜色，进而实现开发的具体需求，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / backgroundColor.js。
1 function OnGUI() { //声明OnGUI方法
2 GUI.backgroundColor = Color.yellow; //将背景颜色设置为黄色
3 GUI.Button(Rect(10,10,70,30), "A button"); //画一个按钮
4 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出对背景颜色变量的设置效果，如图4-3所示。
▲图4-2 游戏预览面板中所显颜色变量的设置结果
▲图4-3 背景颜色变量设置结果
4．contentColor变量
contentColor 变量是对图形用户界面组件中的文本进行着色，在开发过程中可以通过设置contentColor的值来改变图形用户界面组件中文本的颜色，进而实现开发的具体需求，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / contentColor.js。
1 function OnGUI() { //声明OnGUI方法
2 GUI.contentColor = Color.yellow; //将文本颜色设置成黄色
3 GUI.Button(Rect(10,10,70,30), "A button"); //画一个按钮
4 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出对文本颜色变量的设置效果，如图4-4所示。
5．changed变量
changed变量是检测输入数据是否发生改变，若改变则返回true。在开发过程中可以通过调用changed变量来检测输入数据是否发生改变，若改变则返回true，并根据需要执行相应的操作或是打印一些提示信息，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / changed.js。
1 varstringToEdit:String="Modifyme.";//声明一个字符串stringToEdit，并且内容为“Modifyme.”
2 function OnGUI () { //声明OnGUI方法
3 //绘制一个单行文本编辑框，并将输入的数据赋给变量stringToEdit
4 stringToEdit = GUI.TextField (Rect (10, 10, 200, 20), stringToEdit, 25);
5 if (GUI.changed) //调用changed变量，检测输入数据是否发生改变
6 Debug.Log("Text field has changed.");//若检测到输入数据发生改变，则打印提示信息
7 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出使用changed变量的效果，如图4-5所示。若改变文本输入框内的内容时，在状态栏内就会显示出“Text field has changed”的提示信息。
▲图4-4 文本颜色变量的设置结果
▲图4-5 changed变量的调用结果
6．enabled变量
enabled 变量是控制图形用户界面组件是否被启用。在开发过程中可以对 enabled 变量的boolean值进行设置，来控制一些图形用户界面组件的启用情况，以达到在开发中所要实现的具体效果，这个是实际开发中经常遇到的问题，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / enabled.js。
1 //声明一个初始值为true的Boolean型变量allOptions
2 var allOptions : boolean = true;
3 //分别声明初始值为true的Boolean型变量extended1和extended2
4 var extended1 : boolean = true;
5 var extended2 : boolean = true;
6 function OnGUI () { //声明OnGUI方法
7 //在自定义的区域内绘制一个名字为Edit All Options的开关，其初始状态为allOptions
8 allOptions = GUI.Toggle (Rect (0,0,150,20), allOptions, "Edit All Options");
9 //将allOptions的值赋给enabled组件
10 GUI.enabled = allOptions;
11 // 分别在各个自定义的区域内绘制两个开关
12 extended1 = GUI.Toggle (Rect (20,20,130,20), extended1, "Extended Option 1");
13 extended2 = GUI.Toggle (Rect (20,40,130,20), extended2, "Extended Option 2");
14 //将enabled组件的值置为true
15 GUI.enabled = true;
16 // 在自定义的区域被绘制一个名字为OK的按钮，并判断按钮是否被按下
17 if (GUI.Button (Rect (0, 60, 150, 20), "Ok"))
18 print ("user clicked ok"); //若按钮被按下，则打印提示信息
29 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出使用enabled变量的效果，如图4-6和图4-7所示。
▲图4-6 组件在启用状态效果图
▲图4-7 组件在禁用状态效果图
7．tooltip变量
tooltip变量是提示框变量，即当读者创建一个GUI组件，读者就可以传入一个工具用作提示，这是通过改变内容参数采取一个定制的GUIContent对象，而不仅仅是通过在一个字符串来显示。这里可以根据开发的实际需要，来制定不同的提示。
下面将用一个鼠标单击按钮来显示提示信息的例子说明tooltip变量的具体应用，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / tooltip1.js。
1 function OnGUI () { //声明OnGUI方法
2 // 绘制一个按钮，按钮的名字设置为Click me，并设置提示信息This is the tooltip
3 GUI.Button(Rect(10,10,100,20),GUIContent("Clickme","Thisisthetooltip"));
4 // 绘制一个标签，并将提示信息赋给标签
5 GUI.Label (Rect (10,40,100,40), GUI.tooltip);
6 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出使用tooltip变量的效果，如图4-8和图4-9所示。
▲图4-8 显示按钮
▲图4-9 鼠标触发提示信息
读者还可以使用元素的顺序，以创建“层次”工具提示，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / tooltip2.js。
1 function OnGUI () {//声明OnGUI方法
2 //在自定义的区域内绘制一个Box，Box中的内容为Box，且提示信息为this box has a tooltip
3 GUI.Box (Rect (5, 35, 220, 150), GUIContent ("Box", "this box has a tooltip"));
4 //在自定义的区域内绘制一个名字为No tooltip here的按钮
6 GUI.Button (Rect (10, 90, 200, 20), "No tooltip here");
7 //在自定义的区域内绘制一个按钮，按钮的内容为I have a tooltip，且提示信息为The button //overrides the box
9 GUI.Button (Rect (10, 120, 200, 20),GUIContent ("I have a tooltip", "The button overrides the box"));
11 //在自定义的区域内绘制一个标签，标签显示的内容为GUI.tooltip提供的信息
13 GUI.Label (Rect (10,60,200,40), GUI.tooltip);
14 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出使用tooltip变量的效果，如图4-10和图4-11所示。
▲图4-10 提示一
▲图4-11 提示二
tooltip变量作为工具提示框变量，其还可以用来实现一个OnMouseOver/ OnMouseOut邮件系统，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / tooltip3.js。
1 var lastTooltip : String = " "; //声明一个字符串为空的lastTooltip
2 function OnGUI () { //声明OnGUI方法
3 GUILayout.Button (GUIContent ("PlayGame", "Button1"));//通过GUI的布局管理器绘制一个按钮Button1
4 GUILayout.Button (GUIContent ("Quit", "Button2"));//通过GUI的布局管理器绘制个按钮Button2
5 if (Event.current.type == EventType.Repaint && GUI.tooltip != lastTooltip){ //对当前事件进行判定
6 if (lastTooltip != "") //若lastTooltip不等于空
7 //若lastTooltip不等于空，则发送消息
8 SendMessage (lastTooltip + "OnMouseOut", SendMessageOptions.DontRequire-Receiver);
9 if (GUI.tooltip != "") //若GUI.tooltip不等于空
10 //若GUI.tooltip不等于空，则发送消息
11 SendMessage (GUI.tooltip + "OnMouseOver", SendMessageOptions.DontRequire-Receiver);
12 lastTooltip = GUI.tooltip; //将lastTooltip的值置为GUI.tooltip
13 } }
14 function Button1OnMouseOver () { //声明Button1OnMouseOver方法
15 Debug.Log ("Play game got focus"); //打印提示信息
16 }
17 function Button2OnMouseOut () { //声明Button2OnMouseOut方法
18 Debug.Log ("Quit lost focus"); //打印提示信息
19 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出使用tooltip变量的效果，如图4-12所示。
8．depth变量
depth 变量是按当前深度排序执行当前图形用户界面控件的行为，因此在搭建图形用户界面时，在场景中的组件按照 depth 变量的深度排序的，一般情况下在最上面的先执行。这在开发过程中是经常遇到的情况，因此必须学会。
▲图4-12 邮件系统预览界面
下面将用两个按钮按深度进行排序，并分别执行按钮的操作，第一个按钮的具体使用如下面的代码片段1所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / depth1.js。
1 class depth1 extends MonoBehaviour { //声明一个类depth1，并继承类MonoBehaviour
2 static var guiDepth : int = 0; //声明一个初始值为0的静态整型变量guiDepth
3 function OnGUI() { //声明OnGUI方法
4 GUI.depth = guiDepth; //将GUI.depth设置为guiDepth
5 if(GUI.RepeatButton(Rect(0,0,100,100), "GoBack")) {//绘制一个名字为GoBack 的RepeatButton
6 guiDepth = 1; //若持续按下按钮GoBack，guiDepth变量置为1
7 depth2.guiDepth = 0; //depth2.guiDepth的值置为0
8 } } }
第二个按钮的具体实现如下面的代码片段2所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/变量JavaScript / depth2.js。
1 class depth2 extends MonoBehaviour { //声明一个类depth1，并继承类MonoBehaviour
2 static var guiDepth : int = 1; //声明一个初始值为1的静态整型变量guiDepth
3 function OnGUI() { //声明OnGUI方法
4 GUI.depth = guiDepth; //将GUI.depth设置为guiDepth
5 if(GUI.RepeatButton(Rect(50,50,100,100), "GoBack")) {//绘制一个名字为GoBack 的RepeatButton
6 guiDepth = 1; //若持续按下按钮GoBack，guiDepth变量置为1
7 depth1.guiDepth = 0; //depth1.guiDepth的值置为0
8 } } }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出使用depth变量的效果，如图4-13所示。
▲图4-13 depth变量的调用结果
上面介绍的这些变量在项目的开发过程中是经常用到的，需要一起相互配合才能发挥其强大的功能，只有将这些变量在整体上融会贯通才能搭建出具有实际应用价值的图形用户界面，才能在实际的项目中得到应用。
4.1.2 图形用户界面中的常用控件
Unity 提供了丰富的图形用户界面控件，通过这些控件可以搭建出完美的图形用户界面，若在这些控件上面添加一些具体的监听方法即可实现特定的功能，下面就对这些具体的控件进行详细介绍，具体的控件信息如表4-2所示。
表4-2 图形用户界面中的控件
下面将通过真实的代码片段对各个控件进行详细介绍，使读者能够更加理解各个控件的功能和具体实现的步骤。
1．Label控件
Label 控件是在屏幕上绘制一个文本或者纹理标签，其方法的声明可以有很多的方式，具体的方法声明如表4-3所示。
表4-3 声明Label控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-4所示。
表4-4 声明Label控件使用到的具体参数
用下面的代码来创建 Label 控件，分别在屏幕上绘制一个文本标签和一个纹理标签，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Label.js。
1 var textureToDisplay : Texture2D; //声明一个纹理图片
2 function OnGUI () { //声明OnGUI方法
3 GUI.Label (Rect (10, 10, 100, 20), "Hello World!"); //绘制一个文本标签
4 //绘制一个纹理图片标签
5 GUI.Label (Rect (10, 40, textureToDisplay.width, textureToDisplay.height),textureToDisplay);
6 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出Label控件的创建效果，如图4-14所示。
▲图4-14 Label控件的创建效果
2．DrawTexture控件
DrawTexture 控件是绘制一个指定的纹理图片，其方法的声明一般是静态的方式，具体的方法声明如表4-5所示。
表4-5 声明DrawTexture控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-6 所示。
表4-6 声明DrawTexture控件使用到的具体参数
用下面的代码来创建 DrawTexture 控件，在屏幕上绘制一个纹理图片，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / DrawTexture.js。
1 var aTexture : Texture2D; //声明一个纹理图片
2 function OnGUI() { //声明OnGUI方法
3 GUI.DrawTexture(Rect(10,10,60,60),aTexture,ScaleMode.ScaleToFit,true,0.0f);//绘制一个纹理图片
4 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出DrawTexture控件的创建效果，如图4-15所示。
▲图4-15 DrawTexture控件的创建效果
3．DrawTextureWithTexCoords控件
DrawTextureWithTexCoords 控件是在一个给定的坐标系内绘制一个纹理图片，其方法的声明一般是静态的方式，具体的方法声明如表4-7所示。
表4-7 声明DrawTextureWithTexCoords控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-8所示。
表4-8 声明DrawTextureWithTexCoords控件使用到的具体参数
4．Box控件
Box 控件是在自定义的区域内绘制一个图形化的盒子，其方法的声明可以有很多的方式，具体的方法声明如表4-9所示。
表4-9 声明Box控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-10所示。
表4-10 声明Box控件使用到的具体参数
用下面的代码来创建Box控件，在屏幕上绘制一个图形化盒子，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Box.js。
1 function OnGUI() {//声明OnGUI方法
2 //在屏幕的自定义范围内绘制一个内容为This is a titel的Box控件
3 GUI.Box(Rect(Screen.width/8, Screen.height/8,Screen.width*3/4,Screen.height*3/4),"This is a title");
4 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出Box控件的创建效果，如图4-16所示。
5．Button控件
Button控件是绘制一个按钮，当用户单击即会有事件发生。其方法的声明可以有很多的方式，具体的方法声明如表4-11所示。
▲图4-16 Box控件的创建效果
表4-11 声明Button控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-12所示。
表4-12 声明Button控件使用到的具体参数
用下面的代码来创建Button控件，在屏幕上绘制一个纹理图片的按钮和文本按钮，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Button.js。
1 var btnTexture : Texture2D; //声明一个2D纹理图片
2 function OnGUI() { //声明OnGUI方法
3 if (!btnTexture) {//判断是否存在纹理图片
4 Debug.LogError("Please assign a texture on the inspector");//若不存在，打印提示消息
5 return;
6 }
7 if (GUI.Button(Rect(10,10,50,50),btnTexture))//创建一个纹理按钮，并进行是否执行按钮操作的判定
8 Debug.Log("Clicked the button with an image");//若单击按钮，则打印提示信息
9 if (GUI.Button(Rect(10,70,50,30),"Click"))//创建一个文本按钮，并进行是否执行按钮操作的判定
10 Debug.Log("Clicked the button with text"); //若单击按钮，则打印提示信息
11 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出Button控件的创建效果，如图4-17所示。
▲图4-17 Button控件的创建效果
6．RepeatButton控件
RepeatButton 控件是绘制一个按钮，这个按钮只有在用户持续按下时才起作用。其方法的声明可以有很多方式，具体的方法声明如表4-13所示。
表4-13 声明RepeatButton控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-14所示。
表4-14 声明RepeatButton控件使用到的具体参数
用下面的代码来创建RepeatButton控件，在屏幕上绘制一个纹理图片的按钮和文本按钮，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / RepeatButton.js。
1 var btnTexture : Texture; //声明一个纹理图片
2 function OnGUI() { //声明OnGUI方法
3 if (!btnTexture) { //判断是否存在纹理图片
4 Debug.LogError("Please assign a texture on the inspector");//若不存在，则打印提示信息
5 return;
6 }
7 if (GUI.RepeatButton(Rect(10,10,50,50),btnTexture))//绘制一个纹理图片RepeatButton
8 Debug.Log("Clicked the button with an image");//若持续按下按钮，则打印提示信息
9 if (GUI.RepeatButton(Rect(10,70,50,30),"Click Me"))//绘制一个文本RepeatButton
10 Debug.Log("Clicked the button with text"); //若持续按下按钮，则打印提示信息
11 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出RepeatButton控件的创建效果，如图4-18所示。
▲图4-18 RepeatButton控件的创建效果
7．TextField控件
TextField 控件是绘制一个单行文本编辑框，可以在里面编辑一个字符串。其方法的声明可以有很多的方式，具体的方法声明如表4-15所示。
表4-15 声明TextField控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-16所示。
表4-16 声明TextField控件使用到的具体参数
用下面的代码来创建TextField控件，在屏幕上绘制一个单行文本编辑框，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / TextField.js。
1 var stringToEdit : String = "Hello World"; //声明一个字符串
2 function OnGUI () { //声明OnGUI方法
3 stringToEdit = GUI.TextField (Rect (10, 10, 200, 20), stringToEdit, 25);//绘制一个单行文本编辑框
4 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出TextField控件的创建效果，如图4-19所示。
▲图4-19 TextField控件的创建效果
8．PasswordField控件
PasswordField 控件是绘制一个密码输入框，用户可以在里面输入密码。其方法的声明可以有很多的方式，具体的方法声明如表4-17所示。
表4-17 声明PasswordField控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-18所示。
表4-18 声明PasswordField控件使用到的具体参数
用下面的代码来创建PasswordField控件，在屏幕上绘制一个密码编辑框，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Password.js。
1 var passwordToEdit : String = "My Password"; //声明一个字符串
2 function OnGUI () { //声明OnGUI方法
3 //绘制一个密码编辑框，并设置用*号来屏蔽密码，且设置密码编辑框的最大长度为25
4 passwordToEdit = GUI.PasswordField (Rect (10, 10, 200, 20), passwordToEdit,"*"[0], 25);
5 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出PasswordField控件的创建效果，如图4-20所示。
▲图4-20 PasswordField控件的创建效果
9．TextArea控件
TextArea控件是绘制一个多行文本编辑框，可以在里面编辑一段字符串。其方法的声明可以有很多的方式，具体的声明方法如表4-19所示。
表4-19 声明TextArea控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-20所示。
表4-20 声明TextArea控件使用到的具体参数
用下面的代码来创建TextArea控件，在屏幕上绘制一个多行文本编辑框，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / TextArea.js。
1 var stringToEdit : String = "Hello World\nI've got 2 lines...";//声明一段字符串
2 function OnGUI () { //声明OnGUI方法
3 //绘制一个多行文本编辑框，并将上面声明的字符串赋给它，并设置多行文本编辑框的最大长度为200
4 stringToEdit = GUI.TextArea (Rect (10, 10, 200, 100), stringToEdit, 200);
5 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出TextArea控件的创建效果，如图4-21所示。
▲图4-21 TextArea控件的创建效果
10．SetNextControlName控件和GetNameOfFousedControl控件
SetNextControlName 控件是给下一步控制设置事件名字。其方法的声明一般是静态的方式，具体的方法声明如表4-21所示。
表4-21 声明SetNextControlName控件的方法
GetNameOfFocusedControl 控件是得到当前控制焦点的名字。其方法的声明一般是静态的方式，具体的方法声明如表4-22所示。
表4-22 声明GetNameOfFousedControl控件的方法
用下面的代码来创建SetNextControlName和GetNameOfFousedControl控件，可以通过得到当前控制焦点的名字来执行下一步的事件，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / SetNextControlName.js。
1 var login : String = "username"; //声明内容为username的字符串login
2 var login2 : String = "no action here"; //声明内容为no action here的字符串login2
3 function OnGUI () { //声明OnGUI方法
4 GUI.SetNextControlName ("user"); //设置下一个事件的名字为user
5 login = GUI.TextField (Rect (10,10,130,20), login); //绘制一个单行文本编辑框
6 login2 = GUI.TextField (Rect (10,40,130,20), login2); //绘制一个单行文本编辑框
7 if (Event.current.Equals (Event.KeyboardEvent ("return")) &&//判断当前事件是否为键盘事件return
8 GUI.GetNameOfFocusedControl() == "user") //判断得到的当事件的名字是否为user
9 Debug.Log ("Login"); //打印提示信息Login
10 if (GUI.Button (new Rect (150,10,50,20), "Login"))//在自定义的矩形区域内绘制一个按钮
11 Debug.Log ("Login"); //打印提示信息
12 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出SetNextControlName控件和GetNameOfFousedControl控件的创建效果，如图4-22所示。
▲图4-22 SetNextControlName控件的创建效果
11．FocusControl控件
FocusControl控件是在当前焦点处通过键盘输入值。其方法的声明一般是静态的方式，具体的方法声明如表4-23所示。
表4-23 声明FocusControl控件的方法
用下面的代码来创建FocusControl控件，可以在当前焦点处通过键盘输入值用来显示，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / FocusControl.js。
1 var username : String = "username"; //声明一个内容为username字符串username
2 var pwd : String = "a pwd"; //声明一个内容为a pwd字符串pwd
3 function OnGUI () { //声明OnGUI方法
4 //给下一步控制事件设置名字为MyTextField
5 GUI.SetNextControlName ("MyTextField");
6 //绘制一个单行文本编辑框，并将字符串username的内容赋给它
7 username = GUI.TextField (Rect (10,10,100,20), username);
8 //绘制一个单行文本编辑框，并将字符串pwd的内容赋给它
9 pwd = GUI.TextField (Rect (10,40,100,20), pwd);
10 // 绘制一个名字为Move Focus的按钮，并进行按钮是否被按下操作的判定
11 if (GUI.Button (Rect (10,70,80,20), "Move Focus"))
12 GUI.FocusControl ("MyTextField"); //若按钮按下，则焦点自动跳转到MyTextField
13 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出FocusControl控件的创建效果，如图4-23所示。
▲图4-23 FocusControl控件的创建效果
12．Toggle控件
Toggle控件是绘制一个开关，通过控制开关的闭合来执行一些具体的操作。其方法的声明可以有很多的方式，具体的方法声明如表4-24所示。
表4-24 声明Toggle控件的方法
续表
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-25所示。
表4-25 声明Toggle控件使用到的具体参数
用下面的代码来创建Toggle控件，通过控制开关的闭合来执行相关的具体操作，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Toggle.js。
1 var aTexture : Texture; //声明一个纹理图片
2 privatevartoggleTxt:boolean=false;//声明一个初始值为false的Boolean变量toggleTxt
3 private var toggleImg : boolean = false;//声明一个初始值为false的Boolean变量toggleImg
4 function OnGUI () {//声明OnGUI方法
5 if(!aTexture) {//判定是否存在纹理图片
6 Debug.LogError("Please assign a texture in the inspector.");//若没有则打印提示信息
7 return;
8 }
9 //绘制一个名字为A Toggle text且初始状态为toggleTxt开关
10 toggleTxt = GUI.Toggle(Rect(10, 10, 100, 30), toggleTxt, "A Toggle text");
11 //绘制一个纹理图片为aTexture且初始状态为toggleImg开关
12 toggleImg = GUI.Toggle(Rect(10, 50, 50, 50), toggleImg, aTexture);
13 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出Toggle控件的创建效果，如图4-24所示。
▲图4-24 Toggle控件的创建效果
13．Toolbar控件
Toolbar控件是绘制一个工具条，在里面可以置入一些工具按钮。其方法的声明可以有很多的方式，具体的方法声明如表4-26所示。
表4-26 声明Toolbar控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-27所示。
表4-27 声明Toolbar控件使用到的具体参数
用下面的代码来创建 Toolbar 控件，通过工具条控件可以在里面置入一些具体的工具按钮，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Toolbar.js。
1 var toolbarInt : int = 0; //声明一个初始值为0的整型变量toolbarInt
2 var toolbarStrings : String[] = ["Toolbar1", "Toolbar2", "Toolbar3"];//声明一个具有内容的字符型数组
3 function OnGUI () { //声明OnGUI方法
4 //绘制一个内容为toolbarStrings且当前焦点在第toolbarInt上的工具条
5 toolbarInt = GUI.Toolbar (Rect (25, 25, 250, 30), toolbarInt, toolbarStrings);
6 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出Toolbar控件的创建效果，如图4-25所示。
图4-25 Toolbar控件的创建效果
14．SelectionGrid控件
SelectionGrid控件是绘制一个网格按钮，可以在自定义的网格内具体功能置入按钮。其方法的声明可以有很多的方式，具体的方法声明如表4-28所示。
表4-28 声明SelectionGrid控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-29所示。
表4-29 声明SelectionGrid控件使用到的具体参数
用下面的代码来创建SelectionGrid控件，通过工具条控件可以在里面置入一些具体的工具按钮，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / SelectionGrid.js。
1 var selGridInt : int= 0; //声明一个初始值为0的整型变量selGridInt
2 var selStrings : String[] = ["Grid 1", "Grid 2", "Grid 3", "Grid 4"];//声明一个具有内容的字符型数组
3 function OnGUI () { //声明OnGUI方法
4 //绘制一个内容为selStrings且当前焦点在第selGridInt上的网格按钮控件
5 selGridInt = GUI.SelectionGrid (Rect (50, 50, 200, 120), selGridInt, selStrings, 2);
6 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出SelectionGrid控件的创建效果，如图4-26所示。
▲图4-26 SelectionGrid控件的创建效果
15．HorizontalSlider控件
HorizontalSlider控件是绘制一个水平的滑杆，并且可以自己设置阈值。其方法的声明可以有两种方式，具体的方法声明如表4-30所示。
表4-30 声明HorizontalSlider控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-31所示。
表4-31 声明HorizontalSlider控件使用到的具体参数
用下面的代码来创建HorizontalSlider控件，可以创建一个水平滑杆，根据移动的具体滑杆位置来确定具体的值，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / HorizontalSlider.js。
1 var hSliderValue : float = 0.0; //声明一个初始值为0.0的浮点型变量hSliderValue
2 function OnGUI () { //声明OnGUI方法
3 //绘制一个初始值为hSliderValue的水平滑杆
4 hSliderValue=GUI.HorizontalSlider(Rect(25,25,100,30),hSliderValue,0.0,10.0);
5 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出HorizontalSlider控件的创建效果，如图4-27所示。
▲图4-27 HorizontalSlider控件的创建效果
16．VerticalSlider控件
VerticalSlider控件是绘制一个垂直的滑杆，并且可以自己设置阈值。其方法的声明可以有两种方式，具体的方法声明如表4-32所示。
表4-32 声明VerticalSlider控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-33所示。
表4-33 声明VerticalSlider控件使用到的具体参数
用下面的代码来创建VerticalSlider控件，可以创建一个水平滑杆，根据移动的具体滑杆位置来确定具体的值，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / VerticalSlider.js。
1 var vSliderValue : float = 0.0; //声明一个初始值为0.0的浮点型变量vSliderValue
2 function OnGUI () { //声明OnGUI方法
3 //绘制一个初始值为vSliderValue的竖直滑杆
4 vSliderValue = GUI.VerticalSlider (Rect (25, 25, 100, 100), vSliderValue, 10.0,0.0);
5 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出VerticalSlider控件的创建效果，如图4-28所示。
▲图4-28 VerticalSlider控件的创建效果
17．HorizontalScrollbar控件
HorizontalScrollbar 控件是绘制一个水平的滚动条，并且可以自己设置阈值。其方法的声明可以有两种方式，具体的方法声明如表4-34所示。
表4-34 声明HorizontalScrol bar控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-35所示。
表4-35 声明HorizontalScrollbar控件使用到的具体参数
用下面的代码来创建HorizontalScrollbar控件，可以创建一个水平滚动条，根据移动的具体滚动位置来确定具体的值，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / HorizontalScrolbar.js。
1 var hSbarValue : float; //声明一个浮点型变量hSbarValue
2 function OnGUI () { //声明OnGUI方法
3 //绘制一个初始值为hSbarValue的水平滚动条
4 hSbarValue = GUI.HorizontalScrollbar (Rect (25, 25, 100, 30), hSbarValue, 1.0,0.0, 10.0);
5 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出HorizontalScrollbar控件的创建效果，如图4-29所示。
▲图4-29 HorizontalScrollbar控件的创建效果
18．VerticalScrollbar控件
VerticalScrollbar控件是绘制一个垂直的滚动条，并且可以自己设置阈值。其一般声明静态的方法，具体的方法声明如表4-36所示。
表4-36 声明VerticalScrol bar控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-37所示。
表4-37 声明VerticalScrol bar控件使用到的具体参数
用下面的代码来创建VerticalScrollbar控件，可以创建一个水平滚动条，根据移动的具体滚动位置来确定具体的值，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / VerticalScrolbar.js。
1 var vSbarValue : float; //声明一个浮点型变量hSbarValue
2 function OnGUI () { //声明OnGUI方法
3 //绘制一个初始值为hSbarValue的竖直滚动条
4 vSbarValue=GUI.VerticalScrollbar(Rect(25,25,100,30),vSbarValue,1.0,10.0,0.0);
5 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出VerticalScrollbar控件的创建效果，如图4-30所示。
19．BeginGroup控件和EndGroup控件
BeginGroup控件是开始一个组，必须跟EndGroup配对出现。其方法的声明可以有很多的方式，具体的方法声明如表4-38所示。
▲图4-30 VerticalScrollbar控件的创建效果
表4-38 声明BeginGroup控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-39所示。
表4-39 声明BeginGroup控件使用到的具体参数
EndGroup控件是结束一个组，必须跟BeginGroup配对出现。其一般声明为静态方法，具体的方法声明如表4-40所示。
表4-40 声明EndGroup控件的方法
用下面的代码来创建BeginGroup控件和EndGroup控件，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / BeginGroupAndEndGroup.js。
1 function OnGUI () { //声明OnGUI方法
2 //在屏幕自定义的区域内创建一个组
3 GUI.BeginGroup (new Rect (Screen.width / 2 - 400, Screen.height / 2 - 300,800, 600));
4 GUI.Box (new Rect (0,0,800,600), //在自定义区域内创建一个Box控件
5 "This box is now centered! - here you would put your main menu");//Box控件用于显示的内容
6 GUI.EndGroup (); //结束这个组
7 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出BeginGroup控件和EndGroup控件的创建效果，如图4-31所示。
▲图4-31 BeginGroup控件和EndGroup控件的创建效果
20．BeginScrollView控件和EndScrollView控件
BeginScrollView 控件是在图形用户界面中创建一个滚动视图。其方法的声明可以有很多的方式，具体的方法声明如表4-41所示。
表4-41 BeginScrolView控件声明方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-42所示。
表4-42 声明BeginScrol View控件使用到的具体参数
EndScrollView控件是在图形用户界面中撤销一个滚动视图。其一般声明静态的方法，具体的方法声明如表4-43所示。
表4-43 声明EndScrol View控件的方法
用下面的代码来创建BeginScrollView控件和EndScrollView控件，分别通过创建滚动视图和撤销滚动视图来说明这两个控件的具体用法，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / BeginScrolViewAnd-EndScrol View.js。
1 var scrollPosition : Vector2 = Vector2.zero;//声明一个初始为（0,0）的坐标scrollPosition
2 function OnGUI () { //声明OnGUI方法
3 //在屏幕的自定义区域内创建一个滚动视图
4 scrollPosition = GUI.BeginScrollView (Rect (10,300,100,100),
5 scrollPosition, Rect (0, 0, 220, 200));
6 // 在屏幕自定义的区域内分别创建4个按钮
7 GUI.Button (Rect (0,0,100,20), "Top-left");
8 GUI.Button (Rect (120,0,100,20), "Top-right");
9 GUI.Button (Rect (0,180,100,20), "Bottom-left");
10 GUI.Button (Rect (120,180,100,20), "Bottom-right");
11 // 撤销这个滚动视图
12 GUI.EndScrollView ();
13 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出BeginScrollView控件和EndScrollView控件的创建效果，如图4-32所示。
▲图4-32 BeginScrollView控件和EndScrollView控件的创建效果
21．ScrollTo控件
ScrollTo 控件是给定一个坐标使当前焦点立即到位。其一般声明静态的方法，具体的方法声明如表4-44所示。
表4-44 声明Scrol To控件的方法
用下面的代码来创建 ScrollTo 控件，通过给定一个坐标使当前焦点立即到位来说明 ScrollTo控件的具体用法，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / ScrolTo.js。
1 var scrollPos : Vector2 = Vector2.zero; //声明一个初始为（0,0）的坐标scrollPos
2 function OnGUI () { //声明OnGUI方法
3 //在屏幕指定区域内创建一个自定义的滚动视图
4 scrollPos = GUI.BeginScrollView(Rect (10, 10, 100, 50), scrollPos, Rect (0, 0,220, 10));
5 if(GUI.Button (Rect (0,0,100,20), "Go Right"))//创建一个名字为Go Right按钮，并判断按钮是否被按下
6 GUI.ScrollTo(Rect (120,0,100,20)); //使当前焦点即刻跳到指定的区域
7 if(GUI.Button (Rect (120,0,100,20) , "Go Left"))//创建一个名字为Go Left按钮，并判断按钮是否被按下
8 GUI.ScrollTo(Rect (0,0,100,20)); //使当前焦点即刻跳到指定的区域
9 //撤销滚动视图.
10 GUI.EndScrollView ();
11 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出 ScrollTo 控件的创建效果，如图4-33所示。
▲图4-33 ScrollTo控件的创建效果
22．Window控件
Window控件是创建一个窗口。其方法的声明可以有很多的方式，具体的方法声明如表4-45所示。
表4-45 声明Window控件的方法
在上面的方法声明中有很多参数，具体的参数以及各个参数的含义如表4-46所示。
表4-46 声明Window控件使用到的具体参数
用下面的代码来创建Window控件，通过在屏幕上所自定义的矩形区域内创建一个窗口来说明Window控件的具体用法，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Window1.js。
1 var windowRect : Rect = Rect (20, 20, 120, 50); //声明窗口的矩形区域windowRect0
2 function OnGUI () { //声明OnGUI方法
3 ///在windowRect矩形区域内绘制一个名字为My Window的窗口
4 windowRect = GUI.Window (0, windowRect, DoMyWindow, "My Window");
5 }
6 // 声明DoMyWindow函数，用于创建一个按钮
7 function DoMyWindow (windowID : int) {
8 if (GUI.Button (Rect (10,20,100,20), "Hello World"))//创建一个按钮，并判定按钮是否被按下
9 print ("Got a click"); //若按钮被按下，则打印提示信息
10 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出Window控件的创建效果，如图4-34所示。
▲图4-34 Window控件的创建效果
在此只是要确保每个窗口都有其自己的ID，则可以使用相同的函数来创建多个窗口。具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Window2.js。
1 var windowRect0 : Rect = Rect (20, 20, 120, 50); //声明窗口的矩形区域windowRect0
2 var windowRect1 : Rect = Rect (20, 100, 120, 50);//声明窗口的矩形区域windowRect1
3 function OnGUI () { //声明OnGUI方法
4 // 分别在windowRect0和windowRect1两个矩形区域内绘制两个窗口
5 windowRect0 = GUI.Window (0, windowRect0, DoMyWindow, "My Window");
6 windowRect1 = GUI.Window (1, windowRect1, DoMyWindow, "My Window");
7 }
8 //声明DoMyWindow函数，用于创建一个按钮
9 function DoMyWindow (windowID : int) {
10 if (GUI.Button (Rect (10,20,100,20), "Hello World"))//绘制一个按钮，并判定按钮是否被按下
11 print ("Got a click in window " + windowID);//若按钮被按下，则打印相关的提示信息
12 //在自定义的矩形区域内绘制一个可拖动窗口.
13 GUI.DragWindow (Rect (0,0,10000,10000));
14 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出 Window控件的创建效果，如图4-35所示。
▲图4-35 通过同一个函数创建的两个窗口
若想取消显示屏幕上所创建的窗口，只需停止调用OnGUI 方法即可，这样就会取消组建的绘制，也就取消了显示。具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Window3.js。
1 var doWindow0 : boolean = true;//设置一个初始值为true的Boolean型变量doWindow0
2 // 声明DoWindow0函数，用于绘制一个按钮
3 function DoWindow0 (windowID : int) {
4 GUI.Button (Rect (10,30, 80,20), "Click Me!");//绘制一个名字为Click Me!的按钮
5 }
6 function OnGUI () { //声明OnGUI方法
7 // 绘制一个开关，并将doWindow0的值赋给开关
8 doWindow0 = GUI.Toggle (Rect (10,10,100,20), doWindow0, "Window 0");
9 //对doWindow0变量进行判定，判断是否绘制窗口
10 if (doWindow0)
11 GUI.Window (0, Rect (110,10,200,60), DoWindow0, "Basic Window");//绘制指定的窗口
12 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出Window控件的创建效果，如图4-36和图4-37所示。
▲图4-36 开关开启，窗口显示
▲图4-37 开关关闭，窗口消失
根据图形用户界面控件的变量来设置，可以创建出各种各样独具特色的窗口，下面就设置一些变量来创建一个不同的窗口，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / Window4.js。
1 var windowRect0 : Rect = Rect (20, 20, 120, 50); //声明窗口的矩形区域windowRect0
2 var windowRect1 : Rect = Rect (20, 100, 120, 50);//声明窗口的矩形区域windowRect1
3 function OnGUI () { //声明OnGUI方法
4 //设置GUI的color变量为红色，并在windowRect0区域内绘制一个窗口
5 GUI.color = Color.red;
6 windowRect0 = GUI.Window (0, windowRect0, DoMyWindow, "Red Window");
7 //设置GUI的color变量为红色，并在windowRect0区域内绘制一个窗口
8 GUI.color = Color.green;
9 windowRect1 = GUI.Window (1, windowRect1, DoMyWindow, "Green Window");
10 }
11 //声明DoMyWindow函数，用于创建一个可拖动窗口
12 function DoMyWindow (windowID : int) {
13 if (GUI.Button (Rect (10,20,100,20), "Hello World"))//声明一个按钮，并判断是否被按下
14 print ("Got a click in window with color " + GUI.color); //打印提示信息
15 //在自定义的区域内绘制一个可拖动窗口
16 GUI.DragWindow (Rect (0,0,10000,10000));
17 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出所创建的窗口，如图4-38所示。
▲图4-38 创建不同背景颜色的窗口
23．DragWindow控件
DragWindow控件是绘制一个可拖动的窗口，可以设置可拖动的区域。其一般声明为静态的方法，具体的方法声明如表4-47所示。
表4-47 声明DragWindow控件的方法
用下面的代码来创建DragWindow控件，通过在屏幕上所自定义的矩形区域内创建一个可拖动窗口，并设置一个可拖曳的区域来说明DragWindow控件的具体用法，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / DragWindow.js。
1 var windowRect : Rect = Rect (20, 20, 120, 50); //声明窗口的矩形区域windowRect
2 function OnGUI () { //声明OnGUI方法
3 // 在windowRect矩形区域内绘制一个内容为My Window窗口
4 windowRect = GUI.Window (0, windowRect, DoMyWindow, "My Window");
5 }
6 //声明DoMyWindow函数，用于创建一个可拖动窗口
7 function DoMyWindow (windowID : int) {
8 //在自定义的区域内创建一个可拖动窗口
9 GUI.DragWindow (Rect (0,0, 10000, 20));
10 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出所创建的可拖动窗口，如图4-39所示。
▲图4-39 创建的可拖动窗口
24．BringWindowToFront控件
BringWindowToFront控件是将当前窗口显示至最上面。即将当前窗口设置为所创建的所有窗口的最上面，其一般声明为静态的方法，具体的方法声明如表4-48所示。
表4-48 声明BringWindowToFront控件的方法
用下面的代码来创建多个窗口，通过调用BringWindowToFront方法，将当前窗口设置为所创建的所有窗口的最上面，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / BringWindowToFront.js。
1 private var windowRect : Rect = Rect (20, 20, 120, 50);//声明窗口的矩形区域windowRect
2 privatevarwindowRect2:Rect=Rect(80,20,120,50);//声明窗口的矩形区域windowRect2
3 function OnGUI () { //声明OnGUI方法
4 windowRect = GUI.Window (0, windowRect, DoMyFirstWindow, "First");//绘制第一个窗口
5 windowRect2 = GUI.Window (1, windowRect2, DoMySecondWindow, "Second" );//绘制第二个窗口
6 }
7 function DoMyFirstWindow (windowID : int) { //声明DoMyFirstWindow函数
8 if (GUI.Button (Rect (10,20,100,20), "Bring to front"))//绘制一个按钮，并判断是否被按下
9 GUI.BringWindowToFront(1); //调用BringWindowToFront方法
10 GUI.DragWindow(Rect (0,0, 10000, 20)); //绘制一个可拖动窗口
11 }
12 function DoMySecondWindow (windowID : int) {//声明DoMySecondWindow函数
13 if (GUI.Button (Rect (10,20,100,20), "Bring to front"))//绘制一个按钮，并判断是否被按下
14 GUI.BringWindowToFront(0); //调用BringWindowToFront方法
15 GUI.DragWindow(Rect (0,0, 10000, 20)); //绘制一个可拖动窗口
16 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出BringWindowToFront控件的创建效果，如图4-40所示。
▲图4-40 BringWindowToFront控件的创建效果
25．BringWindowToBack控件
BringWindowToBack控件是将当前窗口移至最下面。即将当前窗口设置为所创建的所有窗口的最下面，其一般声明为静态的方法，具体的方法声明如表4-49所示。
表4-49 声明BringWindowToBack控件的方法
用下面的代码来创建多个窗口，通过调用BringWindowToBack方法，将当前窗口设置为所创建的所有窗口的最下面，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / BringWindowToBack.js。
1 private var windowRect : Rect = Rect (20, 20, 120, 50);//声明窗口的矩形区域windowRect
2 privatevarwindowRect2:Rect=Rect(80,20,120,50);//声明窗口的矩形区域windowRect2
3 function OnGUI () { //声明OnGUI方法
4 windowRect = GUI.Window (0, windowRect, DoMyFirstWindow, "First");//绘制第一个窗口
5 windowRect2 = GUI.Window (1, windowRect2, DoMySecondWindow, "Second" );//绘制第二个窗口
6 }
7 function DoMyFirstWindow (windowID : int) { //声明DoMyFirstWindow函数
8 if (GUI.Button (Rect (10,20,100,20), "Put Back"))//绘制一个按钮，并判断是否被按下
9 GUI.BringWindowToBack(0); //调用BringWindowToBack方法
10 GUI.DragWindow(Rect (0,0, 10000, 20)); //绘制一个可拖动窗口
11 }
12 function DoMySecondWindow (windowID : int) { //声明DoMySecondWindow函数
13 if (GUI.Button (Rect (10,20,100,20), "Put Back"))//绘制一个按钮，并判断是否被按下
14 GUI.BringWindowToBack(1); //调用BringWindowToBack方法
15 GUI.DragWindow(Rect (0,0, 10000, 20)); //绘制一个可拖动窗口
16 }
将编写好的脚本挂载到摄像机上，单击Unity集成开发环境的运行按钮，在游戏预览面板中就会显示出BringWindowToBack控件的创建效果，如图4-41所示。
▲图4-41 BringWindowToBack控件的创建效果
26．FocusWindow控件
FocusWindow控件是设置一个窗口为当前焦点窗口，通过调用窗口的 ID 即可完成设置，其一般声明为静态的方法，具体的方法声明如表4-50所示。
表4-50 声明FocusWindow控件的方法
用下面的代码来创建多个窗口，通过调用FocusWindow方法，将当前窗口设置焦点窗口，具体实现如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / FocusWindow.js。
1 private var windowRect : Rect = Rect (20, 20, 120, 50);//声明窗口的矩形区域windowRect
2 privatevarwindowRect2:Rect=Rect(20,80,120,50);//声明窗口的矩形区域windowRect2
3 function OnGUI () { //声明OnGUI方法
4 windowRect = GUI.Window (0, windowRect, DoMyFirstWindow, "First");//绘制第一个窗口
5 windowRect2 = GUI.Window (1, windowRect2, DoMySecondWindow, "Second" );//绘制第二个窗口
6 }
7 function DoMyFirstWindow (windowID : int) { //声明DoMyFirstWindow函数
8 if (GUI.Button (Rect (10,20,100,20), "Focus other"))//绘制一个按钮，并判断是否被按下
9 GUI.FocusWindow(1); //将所调用的ID的窗口设置为焦点窗口
10 }
11 function DoMySecondWindow (windowID : int) {//声明DoMySecondWindow函数
12 if (GUI.Button (Rect (10,20,100,20), "Focus other"))//绘制一个按钮，并判断是否被按下
13 GUI.FocusWindow(0); //将所调用的ID的窗口设置为焦点窗口
14 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出FocusWindow控件的创建效果，如图4-42所示。
▲图4-42 FocusWindow控件的创建效果
27．UnfocusWindow控件
UnfocusWindow控件是将当前的焦点窗口从所有窗口中移除，通过调用窗口的ID即可完成设置，其一般声明为静态的方法，具体的方法声明如表4-51所示。
表4-51 声明UnfocusWindow控件的方法
用下面的代码来创建多个窗口，通过调用UnfocusWindow方法，将当前的焦点窗口从所有窗口中移除，具体使用如下面的代码片段所示。
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/控件JavaScript / UnfocusWindow.js。
1 private var windowRect : Rect = Rect (20, 20, 120, 50);//声明窗口的矩形区域windowRect
2 privatevarwindowRect2:Rect=Rect(20,80,120,50);//声明窗口的矩形区域windowRect2
3 function OnGUI () { //声明OnGUI方法
4 windowRect = GUI.Window (0, windowRect, DoMyFirstWindow, "First");//绘制第一个窗口
5 windowRect2 = GUI.Window (1, windowRect2, DoMySecondWindow, "Second" );//绘制第二个窗口
6 }
7 function DoMyFirstWindow (windowID : int) { //声明DoMyFirstWindow函数
8 if (GUI.Button (Rect (10,20,100,20), "UnFocus")) //绘制一个按钮，并判断是否被按下
9 GUI.UnfocusWindow(); //若被按下，则移除当前窗口的焦点
10 }
11 function DoMySecondWindow (windowID : int) { //声明DoMySecondWindow函数
12 if (GUI.Button (Rect (10,20,100,20), "UnFocus")) //绘制一个按钮，并判断是否被按下
13 GUI.UnfocusWindow(); //若被按下，则移除当前窗口的焦点
14 }
将编写好的脚本挂载到摄像机上，单击 Unity 集成开发环境的运行按钮，在游戏预览面板中就会显示出UnfocusWindow控件的创建效果，如图4-43所示。
▲图4-43 UnfocusWindow控件的创建效果
4.1.3 图形用户界面控件综合案例
在实际的开发过程中，图形用户界面控件会得到大量的应用，例如，一些游戏的设置界面和帮助界面的搭建，如果读者能够正确合理地应用这些图形用户界面控件，则可以搭建绚丽漂亮的界面。
下面就用单纯的图形用户界面控件搭建一个相册的界面。在里面绘制一些按钮、纹理图片、窗口，通过合理地搭配，进而搭建出这个绚丽的相册界面，最终效果如图4-44、图4-45和图4-46所示。
下面就对这个相册的制作过程进行详细介绍，具体的制作步骤如下。
（1）相册所需资源的收集。
既然要搭建一个相册界面，就避免不了收集风景照片，相册中一些必须的按钮纹理贴图，以及相册标题贴图，下面用表4-52来详细介绍这些资源的具体信息。
▲图4-44 绚丽的相册界面1
▲图4-45 绚丽的相册界面2
▲图4-46 绚丽的相册界面3
表4-52 相册所需资源的详细具体信息
（2）将所收集的资源导入Unity集成开发环境。
单击桌面上的Unity图标进而进入Unity集成开发环境，在开发环境中单击File→New Scene菜单新建一个场景，然后单击Assets→Import New Asset...菜单，会立刻弹出一个 Import New Asset对话框，如图4-47所示，选择需要导入的资源。
（3）编写脚本，实现具体的图形用户界面的搭建。
单击Assets→Create→Javascript菜单，在项目资源列表中就创建了一个JavaScript脚本，在此将脚本的名字改为XCScript，双击这个脚本即可进入默认的脚本编辑器，在脚本编辑器内编写这个相册脚本，具体实现如下面的代码片段所示。
▲图4-47 选择需要导入的资源
代码位置：见随书光盘中源代码/第04章目录下的 GUI/Assets/典型案例/典型案例JavaScript / XCScript.js。
1 var beijingTexture:Texture; //声明背景纹理图片
2 var XCTexture:Texture; //声明相册标题纹理图片
3 var fengjingTexture1:Texture; //声明风景纹理图片1
4 var fengjingTexture2:Texture; //声明风景纹理图片2
5 var fengjingTexture3:Texture; //声明风景纹理图片3
6 var fengjingTexture4:Texture; //声明风景纹理图片4
7 var fengjingTexture5:Texture; //声明风景纹理图片5
8 var fengjing:Texture[]; //声明风景纹理图片数组
9 var zuojiantouTexture:Texture; //声明左箭头按钮纹理图片
10 var youjiantouTexture:Texture; //声明右箭头按钮纹理图片
11 var quedingTexture:Texture; //声明确定按钮纹理图片
12 var fanhuiTexture:Texture; //声明返回按钮纹理图片
13 var i:int = 0; //声明风景纹理图片数组的索引
14 var MyStyle:GUIStyle; //声明GUIStyle
15 function Update () { //声明Update方法
16 if (Application.platform == RuntimePlatform.Android) {//判断运行平台是否为Android平台
17 if (Input.GetKeyUp(KeyCode.Home) ) {//判断按键是否为Android设备的Home键
18 Application.Quit(); //若是Home键，则项目退出
19 }
20 if (Input.GetKeyUp(KeyCode.Escape)) { //判断按键是否为Android设备的返回键
21 Application.Quit(); //若是返回键，则项目退出
22 } } }
23 function OnGUI(){ //声明OnGUI方法
24 var ratioScaleTempH=Screen.height/960.0;//为了进行屏幕自适应而声明的纵向缩放比变量
25 var ratioScaleTemp=Screen.width/540.0; //为了进行屏幕自适应而声明的横向缩放比变量
26 //声明自定义的矩形窗口区域，并实现了屏幕的自适应
27 var windowRect : Rect = Rect (
28 20*ratioScaleTemp, 250*ratioScaleTempH, 500*ratioScaleTemp,550* ratioScaleTempH);
29 //在自定义的区域内绘制背景纹理图片，并且实现了屏幕自适应
30 GUI.DrawTexture(Rect(0,0,540*ratioScaleTemp,960*ratioScaleTemp),
31 beijingTexture, ScaleMode.ScaleToFit, true , 540.0/960.0);32 //在自定义的区域内绘制相册标题纹理图片，并且实现了屏幕自适应
33 GUI.DrawTexture(Rect(
34 170*ratioScaleTemp,20*ratioScaleTempH,200*ratioScaleTemp,100*ratioScaleTempH),
35 XCTexture, ScaleMode.ScaleToFit, true , 200.0/100.0);
36 //在自定义的区域内绘制左箭头按钮纹理图片，并且实现了屏幕自适应，以及对按钮是否被按下进行判定
37 if(GUI.Button(Rect(20*ratioScaleTemp,145*ratioScaleTempH,50*ratioScaleTemp,50*ratioScaleTempH),
38 zuojiantouTexture,MyStyle)){
39 i--; //风景纹理图片数组的索引自减
40 if(i<0){ //若风景纹理图片数组的索引小于0
41 i=4; //设置风景纹理图片数组的索引等于4
42 } }
43 //在自定义的区域内绘制风景1按钮纹理图片，并且实现了屏幕自适应，以及对按钮是否被按下进行判定
44 if(GUI.Button(Rect(70*ratioScaleTemp,130*ratioScaleTempH,80*ratioScaleTemp, 80*ratioScaleTempH),
45 fengjingTexture1, MyStyle)){
46 i=0; //设置风景纹理图片数组的索引等于0
47 }
48 //在自定义的区域内绘制风景2按钮纹理图片，并且实现了屏幕自适应，以及对按钮是否被按下进行判定
49 if(GUI.Button(Rect(150*ratioScaleTemp,130*ratioScaleTempH,80*ratioScaleTemp,80*ratioScaleTempH),
50 fengjingTexture2, MyStyle)){
51 i=1; //设置风景纹理图片数组的索引等于1
52 }
53 //在自定义的区域内绘制风景3按钮纹理图片，并且实现了屏幕自适应，以及对按钮是否被按下进行判定
54 if(GUI.Button(Rect(230*ratioScaleTemp,130*ratioScaleTempH,80*ratioScaleTemp,80*ratioScaleTempH),
55 fengjingTexture3, MyStyle)){
56 i=2; //设置风景纹理图片数组的索引等于2
57 }
58 //在自定义的区域内绘制风景4按钮纹理图片，并且实现了屏幕自适应，以及对按钮是否被按下进行判定
59 if(GUI.Button(Rect(310*ratioScaleTemp,130*ratioScaleTempH,80*ratioScaleTemp,80*ratioScaleTempH),
60 fengjingTexture4, MyStyle)){
61 i=3; //设置风景纹理图片数组的索引等于3
62 }
63 //在自定义的区域内绘制风景5按钮纹理图片，并且实现了屏幕自适应，以及对按钮是否被按下进行判定
64 if(GUI.Button(Rect(390*ratioScaleTemp,130*ratioScaleTempH,80*ratioScaleTemp,80*ratioScaleTempH),
65 fengjingTexture5, MyStyle)){
66 i=4; //设置风景纹理图片数组的索引等于4
67 }
68 //在自定义的区域内绘制右箭头按钮纹理图片，并且实现了屏幕自适应，以及对按钮是否被按下进行判定
69 if(GUI.Button(Rect(470*ratioScaleTemp,145*ratioScaleTempH,50*ratioScaleTemp,50*ratioScaleTempH),
70 youjiantouTexture,MyStyle)){
71 i++; //风景纹理图片数组的索引自加
72 if(i>4){ //若风景纹理图片数组的索引大于4
73 i=0; //设置风景纹理图片数组的索引等于0
74 } }
75 windowRect = GUI.Window (0, windowRect, DoMyWindow, "相 册"); //绘制一个窗口
76 //在自定义的区域内绘制确定按钮纹理图片，并且实现了屏幕自适应，以及对按钮是否被按下进行判定
77 if(GUI.Button(Rect(70*ratioScaleTemp,830*ratioScaleTempH,100*ratioScaleTemp,50*ratioScaleTempH),
78 quedingTexture,MyStyle)){
79 Debug.Log("显示的风景图片"); //若被按下，则打印提示信息
80 }
81 //在自定义的区域内绘制返回按钮纹理图片，并且实现了屏幕自适应，以及对按钮是否被按下进行判定
82 if(GUI.Button(Rect(370*ratioScaleTemp,830*ratioScaleTempH,100*ratioScaleTemp,50*ratioScaleTempH),
83 fanhuiTexture,MyStyle)){
84 Application.Quit(); //若被按下，则退出程序
85 } }
86 function DoMyWindow (windowID : int) { //声明DoMyWindow函数
87 var ratioScaleTempH=Screen.height/960.0; //为了进行屏幕自适应而声明的纵向缩放比变量
88 var ratioScaleTemp=Screen.width/540.0; //为了进行屏幕自适应而声明的横向缩放比变量
89 //在刚绘制的窗口内，自定义一个区域绘制相应的风景纹理图片数组索引所对应的风景图片
90 GUI.DrawTexture(
91 Rect(10*ratioScaleTemp,30*ratioScaleTempH,480*ratioScaleTemp,480*ratio-ScaleTempH),fengjing[i], ScaleMode.ScaleToFit, true , 500.0/500.0);
92
93 }
（4）脚本的挂载和脚本中声明的资源与项目中资源的连接。
编写完脚本即可将脚本挂载到场景中的摄像机上，此时摄像机就多了一个 XCScript.js脚本属性，在这个属性里面需要将声明的资源与项目中资源相连接，具体的方法就是选中资源拖动到脚本声明的对应资源处即可，即完成资源连接，此时项目就能正常运行，如图4-48所示。
▲图4-48 脚本中声明的资源与项目中资源的连接