LucasChipp 发表于 2023-3-24 10:17

Unity 3D 图形用户界面:GUI 简介 云南华软学校

云南华软学校,是国家重点学科建设学校,采取校企合作,定向培养的模式,学生毕业之后由学校负责专业对口方案安置就业。实行学历+专业+就业一站式定向培养,学历覆盖中专、高职专科及本科,毕业学校负责专业对口方向安排学生工作。同时享受国家助学补助和企业助学赞助双重补助。



游戏开发过程中,开发人员往往会通过制作大量的图形用户界面( Graphical User Interface,GUI )来增强游戏与玩家的交互性。
Unity 3D 中的图形系统分为 OnGUI、NGUI、UGUI等,这些类型的图形系统内容十分丰富,包含游戏中通常使用到的按钮、图片、文本等控件。
概念
图形用户界面是指采用图形方式显示的计算机用户操作界面。
与早期计算机使用的命令行界面相比,图形界面相对来说在视觉上更具有吸引力,信息传达能力更生动、交互性更强。


《植物大战僵尸》中的 GUI。
发展
在游戏开发的整个过程中,游戏界面占据了非常重要的地位。
玩家在启动游戏的时候,首先看到的是游戏的GUI,其中包括贴图、按钮、高级控件等。

早期的 Unity 3D 使用的是 OnGUI 系统,后来升级到 NGUI 系统。
在 Unity 4.6 之后,官方推出了新的 UGUI 系统,采用全新的独立坐标系,为游戏开发者提供了更高的运转效率。
各个时期的 Unity GUI :


Unity 3D OnGUI 常用控件:

Unity 3D 的 OnGUI 系统的可视化操作界面较少,大多数情况下需要开发人员通过代码实现控件的摆放以及功能的修改。
开发人员需要通过给定坐标的方式对控件进行调整,规定屏幕左上角坐标为(0,0,0),并以像素为单位对控件进行定位。
OnGUI Button 控件

在 Unity 3D 开发中 Button 控件是游戏开发中最常使用的控件之一,用户常常通过 Button 控件来确定其选择行为,当用户单击 Button 控件时,Button 控件会显示按下的效果,并触发与该控件关联的游戏功能。
在游戏中通常用作游戏界面、游戏功能、游戏设置的开关。
一般来说,按钮分两种:


[*]普通按钮。


[*]图片按钮。
普通按钮
普通按钮是系统默认显示的按钮,Unity 3D 的普通按钮背景呈半透明状态,显示白色文字。
普通按钮的使用方法如下:


[*]public static function Button(position:Rect, text:string):bool;
[*]public static function Button(position:Rect, image:Texture):bool;
[*]public static function Button(position:Rect, content:GUIContent):bool;
[*]public static function Button(position:Rect, text:string, style:GUIStyle):bool;
[*]public static function Button(position:Rect, image:Texture, style:GUIStyle):bool;
[*]public static function Button(position:Rect, content:GUIContent, style:GUIStyle):bool;


注:

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



[*]text 指按钮上显示的文本。

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


[*]启动 Unity 3D 创建新项目。





[*]执行 File → Save Scene 命令,并保存场景。





[*]创建 JavaScript 脚本。





[*]打开脚本编辑器,输入脚本语句,然后保存。





[*]function OnGUI(){
[*]if(GUI.Button(Rect(0, 0, 100, 50), "click here")){
[*]print("you have click here!");
[*]}
[*]}



[*]将脚本与主摄像机相连。
将脚本拖到 Hierarchy 视图中的 Main Camera 对象中产生关联。


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



图片按钮
Button 控件除了可以显示文字以外,还可以显示贴图。
贴图是一种美化按钮的方法,开发者可以设定按钮的背景图片,比如水晶按钮、卡通按钮等。
在 Unity 3D 中实现 Button 贴图十分容易,只要将图片作为一个参数传递到 Button 函数中即可。
Button 贴图方法如下:


[*]public static function Button(position:Rect, image:Texture):bool;
[*]public static function Button(position:Rect, image:Texture, style:GUIStyle):bool;

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


[*]启动 Unity 3D 创建新项目,将其命名为 Button。


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


[*]单击 Project 视图中 create 右侧的下拉三角形,选择 JavaScript ,创建 JavaScript 脚本。


[*]在 Project 视图中双击该脚本文件,打开脚本编辑器,输入下列脚本语句:


[*]var btnTexture:Texture;
[*]var atnTexture:Texture;
[*]function OnGUI(){
[*]if(!btnTexture){
[*]Debug.LogError("Please assign a texture on the inspector");
[*]return;
[*]}
[*]if(!atnTexture){
[*]Debug.LogError("Please assign a texture on the inspector");
[*]return;
[*]}
[*]if(GUI.Button(Rect(Screen.width/2-50, Screen.height/2+130, 70, 70),atnTexture)){
[*]Application.LoadLevel("play");
[*]}
[*]if(GUI.Button(Rect(Screen.width/2+30, Screen.height/2+130, 70, 70),btnTexture)){
[*]Application.LoadLevel("exit");
[*]}
[*]}



[*]保存脚本(Ctrl+S 键)。


[*]将脚本与主摄像机相连。


[*]单击主摄像机,在 Inspector 属性面板中添加纹理图片。


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



出品 | 校委宣传部
©云南华软学校
页: [1]
查看完整版本: Unity 3D 图形用户界面:GUI 简介 云南华软学校