Unity 3D GUI 简介｜｜OnGUI Button 控件

游戏开发过程中，开发人员往往会通过制作大量的图形用户界面（ Graphical User Interface，GUI ）来增强游戏与玩家的交互性。

Unity 3D 中的图形系统分为 OnGUI、NGUI、UGUI等，这些类型的图形系统内容十分丰富，包含游戏中通常使用到的按钮、图片、文本等控件。

概念

图形用户界面是指采用图形方式显示的计算机用户操作界面。

与早期计算机使用的命令行界面相比，图形界面相对来说在视觉上更具有吸引力，信息传达能力更生动、交互性更强。

《植物大战僵尸》中的 GUI。

发展

在游戏开发的整个过程中，游戏界面占据了非常重要的地位。

玩家在启动游戏的时候，首先看到的是游戏的GUI，其中包括贴图、按钮、高级控件等。

早期的 Unity 3D 使用的是 OnGUI 系统，后来升级到 NGUI 系统。

在 Unity 4.6 之后，官方推出了新的 UGUI 系统，采用全新的独立坐标系，为游戏开发者提供了更高的运转效率。

 OnGUI Button 控件

在 Unity 3D 开发中 Button 控件是游戏开发中最常使用的控件之一，用户常常通过 Button 控件来确定其选择行为，当用户单击 Button 控件时，Button 控件会显示按下的效果，并触发与该控件关联的游戏功能。

在游戏中通常用作游戏界面、游戏功能、游戏设置的开关。

一般来说，按钮分两种：

• 普通按钮。

• 图片按钮。

普通按钮

普通按钮是系统默认显示的按钮，Unity 3D 的普通按钮背景呈半透明状态，显示白色文字。

普通按钮的使用方法如下：

1. public static function Button(position:Rect, text:string):bool;
2. public static function Button(position:Rect, image:Texture):bool;
3. public static function Button(position:Rect, content:GUIContent):bool;
4. public static function Button(position:Rect, text:string, style:GUIStyle):bool;
5. public static function Button(position:Rect, image:Texture, style:GUIStyle):bool;
6. public static function Button(position:Rect, content:GUIContent, style:GUIStyle):bool;

注：

• position 指按钮在屏幕上的位置以及长宽值。

• text 指按钮上显示的文本。

Button 控件的参数如下表所示。

参数	描述
position	设置控件在屏幕上的位置及大小。
image	设置控件上显示的纹理图片。
style	设置控件使用的样式。
text	设置控件上显示的文本。
content	设置控件的文本、图片和提示。

使用案例

1. 启动 Unity 3D 创建新项目。

1. 执行 File → Save Scene 命令，并保存场景。

1. 创建 JavaScript 脚本。

1. 打开脚本编辑器，输入脚本语句，然后保存。

1. function OnGUI(){
2. if(GUI.Button(Rect(0, 0, 100, 50), "click here")){
3. print("you have click here!");
4. }
5. }

1. 将脚本与主摄像机相连。

将脚本拖到 Hierarchy 视图中的 Main Camera 对象中产生关联。

1. 测试脚本。

单击 Unity 3D 工具栏上的运行按钮对脚本进行测试，如下图所示，在 Game 视图中出现了一个按钮，按钮上显示 "click here"，单击该按钮，在 Unity 3D 主界面底部的状态栏上输出 "You have click here"。

图片按钮

Button 控件除了可以显示文字以外，还可以显示贴图。

贴图是一种美化按钮的方法，开发者可以设定按钮的背景图片，比如水晶按钮、卡通按钮等。

在 Unity 3D 中实现 Button 贴图十分容易，只要将图片作为一个参数传递到 Button 函数中即可。

Button 贴图方法如下：

1. public static function Button(position:Rect, image:Texture):bool;
2. public static function Button(position:Rect, image:Texture, style:GUIStyle):bool;

其中 Position 定义了按钮在屏幕上的位置及长宽值，image 为按钮上显示的图片。

使用案例

1. 启动 Unity 3D 创建新项目，将其命名为 Button。

1. 在菜单中执行 File → Save Scene 命令，保存当前场景，命名为 scene，即在 Unity 3D 中创建了一个游戏场景。

1. 单击 Project 视图中 create 右侧的下拉三角形，选择 JavaScript ，创建 JavaScript 脚本。

1. 在 Project 视图中双击该脚本文件，打开脚本编辑器，输入下列脚本语句：

1. var btnTexture:Texture;
2. var atnTexture:Texture;
3. function OnGUI(){
4. if(!btnTexture){
5. Debug.LogError("Please assign a texture on the inspector");
6. return;
7. }
8. if(!atnTexture){
9. Debug.LogError("Please assign a texture on the inspector");
10. return;
11. }
12. if(GUI.Button(Rect(Screen.width/2-50, Screen.height/2+130, 70, 70),atnTexture)){
13. Application.LoadLevel("play");
14. }
15. if(GUI.Button(Rect(Screen.width/2+30, Screen.height/2+130, 70, 70),btnTexture)){
16. Application.LoadLevel("exit");
17. }
18. }

1. 保存脚本（Ctrl+S 键）。

1. 将脚本与主摄像机相连。

1. 单击主摄像机，在 Inspector 属性面板中添加纹理图片。

1. 单击 play 按钮测试效果，可以看见按钮已经换成了二维卡通图片的形式，如下图所示。