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 常用控件
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
按钮测试效果,可以看见按钮已经换成了二维卡通图片的形式,如下图所示。
OnGUI Box 控件
Unity 3D Box 控件
用于在屏幕上绘制一个图形化的盒子。
Box 控件
中既可以显示文本内容,也可以绘制图片,或两者同时存在。
GUIContent
和 GUIStyle
对于 Box 控件
同样适用,既可以用来修饰 Box 控件
的文本颜色,也可以用来修饰文本大小、图片资源等。
具体使用方法如下:
public static function Box(position:Rect, text:string):void;
public static function Box(position:Rect, image:Texture):void;
public static function Box(position:Rect, content:GUIContent):void;
public static function Box(position:Rect, text:string, style:GUIStyle):void;
public static function Box(position:Rect, image:Texture, style:GUIStyle):void;
public static function Box(position:Rect, content:GUIContent, style:GUIStyle):void;
注:
position
为矩形区域的位置。
text
为显示的文本信息。
texture
为纹理(即图片)显示。
Box 控件
的具体属性参数如下表所示。
选项 | 描述 |
---|---|
position | 设置控件在屏幕上的位置及大小。 |
image | 设置控件上显示的纹理图片。 |
style | 设置控件使用的样式。 |
text | 设置控件上显示的文本。 |
content | 设置控件的文本、图片和提示。 |
使用案例
- 创建项目,将其命名为
box
,保存场景。
- 在 Unity 3D 菜单栏中执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中双击该脚本文件,打开脚本编辑器,输入下列语句:
function OnGUI(){
GUI.Box(Rect(0, 0, 100, 50), "Top-Left");
GUI.Box(Rect(Screen.width-100, 0, 100, 50), "Top-Right");
GUI.Box(Rect(0, Screen.height-50, 100, 50), "Buttom-Left");
GUI.Box(Rect(Screen.width-100, Screen.height-50, 100, 50), "Buttom-Right");
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 单击
Play
按钮进行测试,Game 视图的 4 个角出现了 4 个标题分别为Top-Left
、Top-Right
、Bottom-Left
、Bottom-Right
的按钮组件,如下图所示。
OnGUI label 控件
Unity 3D Label 控件
用于在设备的屏幕上创建文本标签和纹理标签,和Box 控件
类似,可以显示文本内容或图片。
Label 控件
一般用于显示提示性的信息,如当前窗口的名称、游戏中游戏对象的名字、游戏对玩家的任务提示和功能介绍等。
具体使用方法如下:
public static function Label(position:Rect, text:string):void;
public static function Label(position:Rect, image:Texture):void;
public static function Label(position:Rect, content:GUIContent):void;
public static function Label(position:Rect, text:string, style:GUIStyle):void;
public static function Label(position:Rect, image:Texture, style:GUIStyle):void;
public static function Label(position:Rect, content:GUIContent, style:GUIStyle):void;
其中,position
为 Label
显示的位置,text
为 Label
上显示的文本,image
为 Label
上显示的纹理图片。
参数列表:
参数 | 描述 |
---|---|
position | 设置控件在屏幕上的位置及大小。 |
image | 设置控件上显示的纹理图片。 |
style | 设置控件使用的样式。 |
text | 设置控件上显示的文本。 |
content | 设置控件的文本、图片和提示。 |
使用案例
- 创建项目,将其命名为
Label
,保存场景。
- 在 Unity 3D 菜单栏中执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中双击该脚本文件,打开脚本编辑器,输入下列语句:
var textureToDisplay:Texture2D;
function OnGUI(){
GUI.Label(Rect(10, 10, 100, 20), "Hello World!");
GUI.Label(Rect(10, 40, textureToDisplay.width, textureToDisplay.height),textureToDisplay);
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
。
- 单击主摄像机,在
Inspector
属性面板中添加纹理图片。
- 单击
Play
按钮进行测试,如下图所示,界面上出现一串文字以及贴图。
OnGUI Background Color 控件
Unity 3D Background Color 控件
主要用于渲染 GUI
的背景。
例如,要绘制一个按钮,希望按钮的背景呈现出红色,可以使用 BackgroundColor
来实现。
使用时要对其作如下定义:
public static var backgroundColor:Color;
Color
为GUI 背景
的渲染颜色。
使用案例
下面是 GUI.Background Color 控件
的使用案例。
- 创建项目,将其命名为
backgroundcolor
,保存场景。
- 在 Unity 3D 菜单栏中执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中双击该脚本文件,打开脚本编辑器,输入下列语句:
function OnGUI(){
GUI.backgroundColor=Color.red;
GUI.Button(Rect(10, 110, 70, 30), "A button");
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 单击运行按钮进行测试,绘制的按钮由于背景颜色的设定将会呈现红色。
OnGUI Color 控件
Unity 3D Color 控件
与 Background Color 控件
类似,都是渲染 GUI
颜色的,但是两者不同的是 Color
不但会渲染 GUI 的背景颜色,同时还会影响 GUI.Text
的颜色。
具体使用时,要作如下定义:
public static var color:Color;
Color
为渲染颜色。
使用案例
- 创建项目,将其命名为
GUI.Color
,保存场景。
- 在 Unity 3D 菜单栏中执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中双击该脚本文件,打开脚本编辑器,输入下列语句:
function OnGUI(){
GUI.Color=Color.yellow;
GUI.Label(Rect(10, 10, 100, 20), "Hello World!");
GUI.Box(Rect(10, 50, 50, 50), "A BOX");
GUI.Button(Rect(10, 110, 70, 30), "A button");
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 单击
Play
按钮进行测试,效果如下图所示,绘制的按钮背景和字体由于GUI.Color
的设定而呈现黄色。
OnGUI TextField 控件
Unity 3D TextField 控件
用于绘制一个单行文本编辑框,用户可以在该单行文本编辑框中输入信息。
每当用户修改文本编辑框中的文本内容时,TextField 控件
就会将当前文本编辑框中的文本信息以字符串形式返回。
开发人员可以通过创建 String
变量来接收返回值并实现相关功能。
因此 TextField 控件
常常用于监听用户输入信息,比如玩家在游戏登录界面输入用户名和密码后,TextField 控件
可以判断其输入是否正确。
其使用方法如下:
public static function TextField(position:Rect, text:string):string;
public static function TextField(position:Rect, text:string, maxLength:int):string;
public static function TextField(position:Rect, text:string, style:GUIStyle):string;
public static function TextField(position:Rect, text:string, maxLength:int,style:GUIStyle):string;
注:
position
为显示区域。
text
为字符串。
参数列表
参数 | 描述 |
---|---|
position | 设置控件在屏幕上的位置及大小。 |
maxLength | 设置输入的字符串的最大长度。 |
text | 设置控件上默认显示的文本。 |
style | 设置控件使用的样式。 |
使用案例
- 创建项目,将其命名为
GUI.TextField
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var stringToEdit:String="Hello World";
function OnGUI(){
stringToEdit=GUI.TextField(Rect(10, 10, 200, 20), stringToEdit, 25);
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 进行测试,运行效果如下图所示,界面中出现了一个文本框,可以进行文本的输入。
OnGUI TextArea 控件
Unity 3D TextArea 控件
用于创建一个多行的文本编辑区。用户可以在多行文本编辑区编辑文本内容。
该控件可以对超出控件宽度的文本内容实现换行操作。
TextArea 控件
同样会将当前文本编辑区中的文本内容以字符串形式返回。
开发人员可以通过创建 String
变量来接收返回值并实现相关功能。
具体使用方法如下:
public static function TextArea(position:Rect, text:string):string;
public static function TextArea(position:Rect, text:string, maxLength:int):string;
public static function TextArea(position:Rect, text:string, style:GUIStyle):string;
public static function TextArea(position:Rect, text:string, maxLength:int,style:GUIStyle):string;
注:
- 其中,
position
为显示位置。
text
为字符。
参数列表
参数 | 描述 |
---|---|
position | 设置控件在屏幕上的位置及大小。 |
maxLength | 设置输入的字符串的最大长度。 |
text | 设置控件上默认显示的文本。 |
style | 设置控件使用的样式。 |
使用案例
- 创建项目,将其命名为
GUI.TextArea
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var stringToEdit:String="Hello World\nI've got 2 lines...";
function OnGUI(){
stringToEdit=GUI.TextArea(Rect(10, 10, 200, 100), stringToEdit, 200);
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,并将其拖曳到 Hierarchy 视图中的
Main Camera
上,使脚本和摄像机产生关联。
- 进行脚本测试,如下图所示。
OnGUI ScrollView 控件
当游戏界面中的内容特别多,超出了屏幕的显示范围时,就可以使用 Unity 3D ScrollView 控件
滚动显示界面内的全部内容。
ScrollView 控件
用于在屏幕上创建滚动视图,通过一片小区域查看较大区域的内容。当内容区域大于查看区域时,该控件就会自动生成垂直(水平)滚动条,用户可以通过拖曳滚动条来查看所有内容。
一般情况下,滚动条由两部分组成:
GUI.BeginScrollView
,用于开始滚动视图。
GUI.EndScrollView
,用于结束滚动视图。
需要滚动显示的内容就夹在其间。
使用方法:
public static function BeginScrollView(position:Rect, scrollPosition:Vector2,viewRect:Rect):Vector2;
public static function BeginScrollView(position:Rect, scrollPosition:Vector2,viewRect:Rect, alwaysShowHorizontal:bool, alwaysShowVertical:bool,horizontalScrollbar:GUIStyle, verticalScrollbar:GUIStyle):Vector2;
public static function EndScrollView():void;
参数列表
参数 | 描述 |
---|---|
position | 设置控件在屏幕上的位置及大小。 |
viewRect | 设置滚动整体显示范围。 |
HorizontalScrollbar | 设置用于水平滚动条的可选 GUI 样式。 |
VerticalScrollbar | 设置用于垂直滚动条的可选 GUI 样式。 |
ScrollPosition | 用来显示滚动位置。 |
alwaysShowHorizontal | 可选参数,总是显示水平 滚动条。 |
alwaysShow Vertical | 可选参数,总是显示垂直 滚动条。 |
使用案例
- 创建项目,将其命名为
BeginScrollView
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var scrollPosition:Vector2=Vector2.zero;
function OnGUI(){
scrollPosition=GUI.BeginScrollView(Rect(10, 300, 100, 100),
scrollPosition, Rect(0, 0, 220, 200));
GUI.Button(Rect(0, 0, 100, 20), "Top-left");
GUI.Button(Rect(120, 0, 100, 20), "Top-right");
GUI.Button(Rect(0, 180, 100, 20), "Bottom-left");
GUI.Button(Rect(120, 180, 100, 20), "Bottom-right");
GUI.EndScrollView();
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 进行测试,效果如下图所示。
OnGUI Slider 控件
Unity 3D Slider 控件
包括两种:
- 水平滚动条
GUI.HorizontalSlider
。
- 垂直滚动条
GUI.VerticalSlider
。
可以根据界面布局的需要选择使用,具体使用方法如下:
public static function HorizontalSlider(position:Rect, value:float, leftValue:float, rightValue:float):float;
public static function HorizontalSlider(position:Rect, value:float, leftValue:float, rightValue:float, slider:GUIStyle, thumb:GUIStyle):float;
注:
position
为滚动条的位置。
value
为可拖动滑块的显示位置。
topValue
为滑块上端所处的位置。
bottomValue
为滑块下端所处位置。
参数列表
参数 | 描述 |
---|---|
position | 设置控件在屏幕上的位置及大小。 |
leftValue | 设置滑块左端的值。 |
slider | 设置用于显示拖曳区域的 GUI 样式。 |
value | 设置滑动条显示的值。这决定了可 拖动的滑块的位置。 |
rightValue | 设置滑块右端的值。 |
thumb | 设置用于显示可拖动的滑块的 GUI 样式。 |
使用案例
- 创建项目,将其命名为
horizontalSlider
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var hSliderValue:float=0.0;
var vSliderValue:float=0.0;
function OnGUI(){
hSliderValue=GUI.HorizontalSlider(Rect(2 5, 2 5, 1 0 0, 3 0), hSliderValue, 0.0, 1 0.0);
vSliderValue=GUI.VerticalSlider(Rect(5 0, 5 0, 1 0 0, 3 0), vSliderValue, 1 0.0, 0.0);
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 进行测试,效果如下图所示。
OnGUI ToolBar 控件
Unity 3D ToolBar 控件
主要用于创建工具栏。
具体使用方法如下:
public static function Toolbar(position:Rect, selected:int, texts:string[]):int;
public static function Toolbar(position:Rect, selected:int, images:Texture[]):int;
public static function Toolbar(position:Rect, selected:int, content:GUIContent[]):int;
public static function Toolbar(position:Rect, selected:int, texts:string[],style:GUIStyle):int;
public static function Toolbar(position:Rect, selected:int, images:Texture[],style:GUIStyle):int;
public static function Toolbar(position:Rect, selected:int, contents:GUIContent[], style:GUIStyle):int;
注:
position
为ToolBar
的显示区域。
selected
为选中菜单的索引号。
texts
为菜单显示内容。
参数列表
参数 | 描述 |
---|---|
position | 设置控件在屏幕上的位置及大小。 |
texts | 设置在工具栏按钮上显示的一组 字符串。 |
contents | 在工具栏按钮上显示的一组文本、 图像和工具提示。 |
selected | 选择按钮的索引。 |
images | 在工具栏按钮上显示的一组纹理。 |
style | 要使用的样式。如果省略,则使用当前 GUISkin 的按钮样式。 |
使用案例
- 创建项目,将其命名为
GUI.Toolbar
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var toolbarInt:int=0;
var toolbarStrings:String[]=["Toolbar1", "Toolbar2", "Toolbar3"];
function OnGUI(){
toolbarInt=GUI.Toolbar(Rect(25, 25, 250, 30), toolbarInt, toolbarStrings);
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 进行测试,效果如下图所示。
OnGUI ToolTip 控件
Unity 3D ToolTip 控件
主要用于显示提示信息。
当鼠标移至指定位置时,会显示相应的提示信息,在使用时需要和 GUI.Content
配合。
具体使用方法如下:
public static var tooltip:string
使用案例
- 创建项目,将其命名为
GUI.Tooltip
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
function OnGUI(){
GUI.Box(Rect(5, 35, 210, 175), GUIContent("Box", "this box has a tooltip"));
GUI.Button(Rect(30, 85, 100, 20), "No tooltip here");
GUI.Button(Rect(30, 120, 100, 20),
GUIContent("I have a tooltip", "The button overrides the box"));
GUI.Label(Rect(10, 40, 100, 40), GUI.tooltip);
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 进行测试,效果如下图所示。
OnGUI Drag Window 控件
Unity 3D Drag Window 控件
用于实现屏幕内可拖曳窗口的功能。
具体使用方法如下:
public static function DragWindow(position:Rect):void;
参数列表
参数 | 描述 |
---|---|
position | 设置可以拖动的窗口的一部分,这部分将被剪切到实际的窗口中。 |
使用案例
- 创建项目,将其命名为
GUI.Dragwindow
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var windowRect:Rect=Rect(20, 20, 120, 50);
function OnGUI(){
windowRect=GUI.Window(0, windowRect, DoMyWindow, "My Window");
}
function DoMyWindow(windowID:int){
GUI.DragWindow(Rect(0, 0, 10000, 20));
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,并将其拖曳到 Hierarchy 视图中的
Main Camera
上,使脚本和摄像机产生关联。
- 进行测试,效果如下图所示,当用鼠标拖动窗口时,窗口会随鼠标在屏幕内移动。
OnGUI Window控件
通常情况下,一个游戏界面可以由很多窗口组成,在每个窗口中可以添加不同的、任意的功能组件,这让窗口的使用丰富了游戏界面和内容。
使用 Window 控件
为当前界面添加窗口,具体方法如下:
public static function Window(id:int, clientRect:Rect, func:GUI.WindowFunction,text:string):Rect;
public static function Window(id:int, clientRect:Rect, func:GUI.WindowFunction,image:Texture):Rect;
public static function Window(id:int, clientRect:Rect, func:GUI.WindowFunction,content:GUIContent):Rect;
public static function Window(id:int, clientRect:Rect, func:GUI.WindowFunction,text:string, style:GUIStyle):Rect;
public static function Window(id:int, clientRect:Rect, func:GUI.WindowFunction,image:Texture, style:GUIStyle):Rect;
public static function Window(id:int, clientRect:Rect, func:GUI.WindowFunction,title:GUIContent, style:GUIStyle):Rect;
注:
id
为窗口的标号,用以标识窗口。
clientRect
为窗口显示区域。
func
是回调方法的名称。
text
为窗口标题。
参数列表
参数 | 描述 |
---|---|
Style | 设置用于窗口的可选样式。如果遗漏了,则使用当前GUISkin 的窗口样式。 |
clientRect | 设置可以拖动的窗口的一部分,这部分将被剪切到实际的窗口中。 |
text | 设置文本在窗口内呈现。 |
content | 设置在窗口内渲染的图形。 |
title | 设置文本在窗口标题栏显示。 |
id | 设置窗口的ID号(可以是任何值, 只要它是唯一的)。 |
func | 设置显示窗口内容的脚本函数。 |
image | 设置在窗口中渲染的图像。 |
style | 设置窗口的样式信息。 |
使用案例
- 创建项目,将其命名为
window
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var windowRect0:Rect=Rect(20, 20, 120, 50);
var windowRect1:Rect=Rect(20, 100, 120, 50);
function OnGUI(){
GUI.color=Color.red;
windowRect0=GUI.Window(0, windowRect0, DoMyWindow, "Red Window");
GUI.color=Color.green;
windowRect1=GUI.Window(1, windowRect1, DoMyWindow, "Green Window");
}
function DoMyWindow(windowID:int){
if(GUI.Button(Rect(10, 20, 100, 20), "Hello World"))
print("Got a click in window with color"+GUI.color);
GUI.DragWindow(Rect(0, 0, 10000, 10000));
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,并将其拖曳到 Hierarchy 视图中的
Main Camera
上,使脚本和摄像机产生关联。
- 进行测试,效果如下图所示。
OnGUI 贴图
纯色背景的界面会给人以单调的感觉,而Unity 3D 可以使用纹理贴图让游戏界面在视觉感受上更加生动。
你可以将纹理贴图想象成装修时在墙上贴壁纸,通过纹理贴图可以对界面生动性、游戏沉浸感的提升上起到画龙点睛的作用。
GUITexture 方法
具体使用方法如下:
- 将图片导入 Unity 3D 中,执行
Assets
→Import Package
→Custom Package
命令找到图片位置,并加载进来。
图片加载后,可以在 Project 视图中进行查看。
- 选中图片,将
Texture type
修改成sprit render
格式,然后将其加载到 Hierarchy 视图中。
- Unity 3D 会自动分析图片的宽和高,然后以此规格将其加载进来。
如果此时发现图片没有全屏显示或者显示的大小不合意,可以在 Inspector 视图中进行图片大小的缩放。
你也可以使用 GUI.DrawTexture 方法
绘制贴图,该方法原型如下:
/*
Rect position:表示图片的绘制区域
* Texture image:表示绘制图片的对象
* ScaleMode scaleMode:表示图片的缩放模式
* bool alphaBlend:表示十分开启图片混合模式
* float imageAspect:表示图片的缩放宽高比例
*/
public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode, bool alphaBlend, float imageAspect);
注:
position
为纹理贴图的位置。
Image
为所贴纹理图片。
scaleMode
为纹理的缩放模式。
alphaBlend
为图片的混合模式。
imageAspect
为图片缩放的宽高比例。
&加载图片资源放置在根目录
Assets
中的Resource
文件夹下,载入资源时,将整个图片文件夹载入即可。
使用案例
- 创建项目,将其命名为
texture
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var aTexture:Texture;
function OnGUI(){
if(!aTexture){
Debug.LogError("Assign a Texture in the inspector.");
return;
}
GUI.DrawTexture(Rect(100, 10, 200, 200), aTexture);
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,并将其拖曳到 Hierarchy 视图中的
Main Camera
上,使脚本和摄像机产生关联。
- 在 Inspector 视图中添加纹理资源。
- 进行测试,效果如下图所示。
OnGUI Skin控件
图形用户界面皮肤是图形用户界面样式的集合,集合内有许多控件,每个控件类型拥有很多样式定义。
Skin 文件
的 Inspector 面板会显示出可以影响到的所有控件,展开任何一个控件菜单会显示其可以修改的内容,其中包括字体大小、字体类型、背景等。
创建一个图形用户界面皮肤,在菜单栏中执行 Assets
→ Create
→ GUI Skin
命令,创建后的 GUI Skin
如下图所示。
参数列表
参数 | 含义 | 描述 |
---|---|---|
Font | 字体 | 用户图形界面中每个控件使用的全局字体。 |
Box | 盒 | 应用于所有盒子控件的样式。 |
Button | 按钮 | 应用于所有按钮控件的样式。 |
Toggle | 切换开关 | 应用于所有切换开关的样式。 |
Label | 标签 | 应用于所有标签控件的样式。 |
Text Field | 文本框 | 应用于所有文本框控件的样式。 |
Text Area | 文本区域 | 应用于所有多行文本域控件的样式。 |
Window | 窗口 | 应用于所有窗口控件的样式。 |
Horizontal Slider | 水平滑动条 | 应用于所有水平滑动条控件的样式。 |
Horizontal Slider Thumb | 水平滑块 | 应用于所有水平滑块控件的样式。 |
Vertical Slider | 垂直滑动条 | 应用于所有垂直滑动条控件的样式。 |
Vertical Slider Thumb | 垂直滑块 | 应用于所有垂直滑块控件的样式。 |
Horizontal Scrollbar | 水平滚动条 | 应用于所有水平滚动条控件的样式。 |
Horizontal Scrollbar Thumb | 水平滚动条滑块 | 应用于所有水平滚动条滑块控件的样式。 |
Horizontal Scrollbar Left Button | 水平滚动条左侧按钮 | 应用于所有水平滚动条左侧按钮控件的样式。 |
Horizontal Scrollbar Right Button | 水平滚动条右侧按钮 | 应用于所有水平滚动条右侧按钮控件的样式。 |
Vertical Scrollbar | 垂直滚动条 | 应用于所有垂直滚动条控件的样式。 |
Vertical Scrollbar Thumb | 垂直滚动条滑块 | 应用于所有垂直滚动条滑块控件的样式。 |
Vertical Scrollbar Up Button | 垂直滚动条顶部按钮 | 应用于所有垂直滚动条顶部按钮控件的样式。 |
Vertical Scrollbar Down Button | 垂直滚动条底部按钮 | 应用于所有垂直滚动条底部按钮控件的样式。 |
Custom 1-20 | 自定义 | 附加的自定义样式可以应用于任何控件。 |
Custom Styles | 自定义样式 | 一个带有可以应用于任何控件的自定义样式的集合。 |
Settings | 设定 | 所有图形用户界面的附加设定。 |
使用案例
- 创建项目,将其命名为
GUISkin
,保存场景。
- 加载图片资源,将图片资源放置在根目录
Assets
中的Resource
文件夹下。
- 单击 Project 视图下拉三角,创建
GUI Skin
,如图下图所示。
- 在 Inspector 面板中修改
GUI Skin 参数
,分别设置Box
、Button
、Label
样式,如下图所示。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var s1:GUISkin[];
private var cont:int=0;
function OnGUI(){
GUI.skin=s1[cont%s1.Length];
if(s1.Length==0){
Debug.LogError("Assign at least 1 skin on the array");
return;
}
GUI.Label(Rect(10, 10, 100, 20), "Hello World!");
GUI.Box(Rect(10, 50, 50, 50), "A BOX");
GUI.Button(Rect(10, 110, 70, 30), "A button");
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 在 Inspector 视图中添加纹理资源,并将
GUI Skin
拖动到Main Camera
的 Inspector 视图下。
- 进行测试,效果如下图所示。
OnGUI Toggle控件
Unity 3D Toggle 控件
用于在屏幕上绘制一个开关,通过控制开关的开启与闭合来执行一些具体的指定操作。
当用户切换开关状态时,Toggle 控
件的绘制函数就会根据不同的切换动作来返回相应的布尔值。
如选中 Toggle 控件
会返回布尔值 true
,取消选中就会返回布尔值 false
。
具体使用方法如下:
public static function Toggle(position:Rect, value:bool, text:string):bool;
public static function Toggle(position:Rect, value:bool, image:Texture):bool;
public static function Toggle(position:Rect, value:bool, content:GUIContent):bool;
public static function Toggle(position:Rect, value:bool, text:string, style:GUIStyle):bool;
public static function Toggle(position:Rect, value:bool, image:Texture, style:GUIStyle):bool;
public static function Toggle(position:Rect, value:bool, content:GUIContent,style:GUIStyle):bool;
注:
position
为控件显示位置。
value
为默认控件是开还是关。
text
为控件显示的字符内容。
参数列表
参数 | 描述 |
---|---|
position | 设置控件在屏幕上的位置及大小。 |
image | 设置控件上显示的纹理图片。 |
style | 设置控件使用的样式。 |
text | 设置控件上显示的文本。 |
content | 置控件的文本、图片和提示小。 |
value | 设置开关是开启还是关闭。 |
使用案例
- 创建项目,将其命名为
GUI.Toggle
,保存场景。
- 执行
Assets
→Create
→JavaScript
命令,创建一个新的脚本文件。
- 在 Project 视图中打开脚本编辑器,输入下列语句:
var aTexture:Texture;
private var toggleTxt:boolean=false;
private var toggleImg:boolean=false;
function OnGUI(){
if(!aTexture){
Debug.LogError("Please assign a texture in the inspector.");
return;
}
toggleTxt=GUI.Toggle(Rect(10, 10, 100, 30), toggleTxt, "A Toggle text");
toggleImg=GUI.Toggle(Rect(10, 50, 50, 50), toggleImg, aTexture);
}
- 按
Ctrl+S
键保存脚本。
- 在 Project 视图中选择脚本,将其连接到
Main Camera
上。
- 在 Inspector 视图中添加纹理资源。
- 进行测试,效果如下图所示。