监修中…
此文章可能显示还不完全正确。正在修正中……
Unity 3D 的 OnGUI 系统的可视化操作界面较少,大多数情况下需要开发人员通过代码实现控件的摆放以及功能的修改。
开发人员需要通过给定坐标的方式对控件进行调整,规定屏幕左上角坐标为(0,0,0),并以像素为单位对控件进行定位。
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 控件的参数如下表所示:
使用 JavaScript 创建一个 Button
Project – Create – File – Save Scene 创建并保存一个场景
Create – JavaScript 创建 JavaScript 脚本双击输入如下命令:
function OnGUI(){
if(GUI.Button(Rect(0, 0, 100, 50), "Button")){
print("Why did you press this button?");
}
}
Ctrl + S 保存脚本
将脚本拖动到 Hierarchy 视图中的 Main Camera 对象上,这时脚本与场景中的摄像机产生了关联。
单击 Unity 3D 工具栏上的运行按钮对脚本进行测试,如下图所示,在 Game 视图中出现了一个按钮,按钮上显示 Button,单击该按钮,在 Unity 3D 主界面底部的状态栏上输出 Why did you press this button?
图片按钮Button 控件除了可以显示文字以外,还可以显示贴图。
贴图是一种美化按钮的方法,开发者可以设定按钮的背景图片,比如水晶按钮、卡通按钮等。
在 Unity 3D 中实现 Button 贴图十分容易,只要将图片作为一个参数传递到 Button 函数中即可。
public static function Button(position:Rect, image:Texture):bool;
public static function Button(position:Rect, image:Texture, style:GUIStyle):bool;
其中 position 为按钮在屏幕上的位置以及长宽值,image 为按钮上显示的图片。
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");
}
}
保存脚本,将脚本与主摄像机相连,点击主摄像机,在 Inspector 面板中添加纹理图片即可。
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 设置控件在屏幕上的位置及大小text 设置控件上显示的文本image 设置控件上显示的纹理图片content 设置控件的文本、图片和提示style 设置控件使用的样式
样例:在 Game 视图的 4 个角绘制 4 个标题分别为 Top-Left、Top-Right、Bottom-Left、Bottom-Right 的按钮组件。
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");
}
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 上显示的纹理图片。
Label 控件的具体参数如下表所示。position 设置控件在屏幕上的位置及大小text 设置控件上显示的文本image 设置控件上显示的纹理图片content 设置控件的文本、图片和提示style 设置控件使用的样式
样例:在 Game 视图的指定位置输出 Hello World! 和一张图片。
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 属性面板中添加纹理图片。
Background Color
Unity 3D Background Color 控件主要用于渲染 GUI 的背景。
例如,要绘制一个按钮,希望按钮的背景呈现出红色,可以使用 BackgroundColor 来实现,使用时要对其作如下定义:
public static var backgroundColor:Color;
样例:在 Game 视图的指定位置输出一个背景为红色的按钮。
function OnGUI(){
GUI.backgroundColor=Color.red;
GUI.Button(Rect(10, 110, 70, 30), "A button");
}
按 Ctrl+S 键保存脚本,在 Project 视图中选择脚本,将其连接到 Main Camera。
Color
Unity 3D Color 控件与 Background Color 控件类似,都是渲染 GUI 颜色的,但是两者不同的是 Color 不但会渲染 GUI 的背景颜色,同时还会影响 GUI.Text 的颜色。
具体使用时,要作如下定义:
public static var color:Color;
其中,Color 为渲染颜色。
样例:在 Game 视图的指定位置输出背景和字体为黄色的按钮。
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。
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 为字符串。
TextField 控件的具体参数如下表所示。
position 设置控件在屏幕上的位置及大小text 设置控件上默认显示的文本maxLength 设置输入的字符串的最大长度style 设置控件使用的样式
样例:在 Game 视图的指定位置输出一个可以输入的单行文本编辑框。
var stringToEdit:String="Hello World";
function OnGUI(){
stringToEdit=GUI.TextField(Rect(10, 10, 200, 20), stringToEdit, 25);
}
按 Ctrl+S 键保存脚本,在 Project 视图中选择脚本,将其连接到 Main Camera。
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 为字符。
TextArea 控件的参数如下表所示。
position 设置控件在屏幕上的位置及大小text 设置控件上默认显示的文本maxLength 设置输入的字符串的最大长度style 设置控件使用的样式
样例:在 Game 视图的指定位置输出一个可以输入的多行文本编辑区。
var stringToEdit:String="Hello World\n Another Hello World";
function OnGUI(){
stringToEdit=GUI.TextArea(Rect(10, 10, 200, 100), stringToEdit, 200);
}
按 Ctrl+S 键保存脚本,在 Project 视图中选择脚本,将其连接到 Main Camera。
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 为显示位置,scrollPosition 用于设置滚动条的起始位置,viewRect 用于设置滚动整体显示范围,EndScrollView 用于结束滚动视图内容。
position 设置控件在屏幕上的位置及大小ScrollPosition 用来显示滚动位置viewRect 设置滚动整体显示范围alwaysShowHorizontal 可选参数,总是显示 水平 滚动条HorizontalScrollbar 设置用于水平滚动条的可选 GUI 样式alwaysShow Vertical 可选参数,总是显示 垂直 滚动条VerticalScrollbar 设置用于垂直滚动条的可选 GUI 样式
样例:在 Game 视图的指定位置输出一个可以使用的滚动条区域。
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。
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 设置控件在屏幕上的位置及大小value 设置滑动条显示的值。这决定了可拖动的滑块的位置leftValue 设置滑块左端的值rightValue 设置滑块右端的值slider 设置用于显示拖曳区域的 GUI 样式thumb 设置用于显示可拖动的滑块的 GUI 样式
样例:在 Game 视图的指定位置输出一个可以使用的滚动条区域。
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。
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 设置控件在屏幕上的位置及大小selected 选择按钮的索引texts 设置在工具栏按钮上显示的一组 字符串images 在工具栏按钮上显示的一组纹理contents 在工具栏按钮上显示的一组文本、 图像和工具提示style 要使用的样式。如果省略,则使用 当前 GUISkin 的按钮样式
样例:在 Game 视图的指定位置输出一个三个选项的工具栏。
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。
ToolTip
Unity 3D ToolTip 控件主要用于显示提示信息,当鼠标移至指定位置时,会显示相应的提示信息,在使用时需要和 GUI.Content 配合,具体使用方法如下:
public static var tooltip:string
样例:在 Game 视图的指定位置输出一个点击产生文字提示的按钮。
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。
Drag Window
Unity 3D Drag Window 控件用于实现屏幕内的可拖曳窗口,具体使用方法如下:
public static function DragWindow(position:Rect):void;
其中,position 为可拖曳窗口的位置,设置可以拖动的窗口的一部分,这部分将被剪切到实际的窗口中。
样例:在 Game 视图的指定位置输出一个可以被鼠标拖动的窗口。
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 视图中选择脚本,将其连接到 Main Camera。
Window
通常情况下,一个游戏界面可以由很多窗口组成,在窗口中可以添加任意的功能组件,窗口的使用丰富了游戏界面。使用 Unity 3D 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 为窗口标题。
Windows 控件的参数如下所示。
Style 设置用于窗口的可选样式。如果遗漏了,则使用当前GUISkin的窗口样式 id 设置窗口的ID号(可以是任何值, 只要它是唯一的)clientRect 设置屏幕上的矩形表示的窗口位置和大小func 设置显示窗口内容的脚本函数text 设置文本在窗口内呈现image 设置在窗口中渲染的图像content 设置在窗口内渲染的图形style 设置窗口的样式信息title 设置文本在窗口标题栏显示
样例:在 Game 视图的指定位置输出窗口。
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 视图中选择脚本,将其连接到 Main Camera。
贴图
纹理贴图可以想象成装修时在墙上贴壁纸,通过纹理贴图的方式可以为界面增色添彩,具体使用方法如下:
将图片导入 Unity 3D 中,执行 Assets→Import Package→Custom Package 命令找到图片位置,将图片加载进来,图片加载后,可以在 Project 视图中看见刚刚加载的资源文件。选中图片后,将 Texture type 修改成 sprit render 格式,然后将其加载到 Hierarchy 视图中。Unity 3D 会分析图片的宽和高,然后将其加载进来,如果此时发现图片没有全屏显示或者显示的大小不合意,可以在 Inspector 视图中进行图片大小的缩放。
除了使用 GUITexture 方法添加贴图外,也可以使用 GUI.DrawTexture 方法绘制贴图,该方法原型如下:
function DrawTexture(position:Rect, image:Texture, scaleMode:ScaleMode,alphaBlend:boolean, imageAspect:float);
其中,position 为纹理贴图的位置,Image 为所贴纹理图片,scaleMode 为纹理的缩放模式,alphaBlend 为图片的混合模式,imageAspect 为图片缩放的宽高比例。
加载图片资源放置在根目录 Assets 中的 Resource 文件夹下,载入资源时,将整个图片文件夹载入即可。
样例:在 Game 视图的指定位置贴图。
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 视图中选择脚本,将其连接到 Main Camera。
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 设定 所有图形用户界面的附加设定
样例:在 Game 视图的元件上添加皮肤。
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。
Toggle
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 为控件显示的字符内容。
Toggle 控件的参数如下所示。
position 设置控件在屏幕上的位置及大小text 设置控件上显示的文本image 设置控件上显示的纹理图片content 设置控件的文本、图片和提示style 设置控件使用的样式value 设置开关是开启还是关闭
样例:在 Game 视图的元件上添加一个绑定按键的文字和图片。
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。
UGUI
UGUI 是 Unity 官方的 UI 实现方式,自从 Unity 4.6 起,Unity 官方推出了新版 UGUI 系统。
新版 UGUI 系统相比于 OnGUI 系统更加人性化,而且是一个开源系统,利用游戏开发人员进行游戏界面开发。
UGUI 系统有 3 个特点:灵活、快速、可视化。
对于游戏开发者来说,UGUI 运行效率高,执行效果好,易于使用,方便扩展,与 Unity 3D 兼容性高。
在 UGUI 中创建的所有 UI 控件都有一个 UI 控件特有的 Rect Transform 组件。
在 Unity 3D 中创建的三维物体是 Transform,而 UI 控件的 Rect Transform 组件是UI控件的矩形方位,其中的 PosX、PosY、PosZ 指的是 UI 控件在相应轴上的偏移量。
Canvas 画布
Canvas 是画布,是摆放所有 UI 元素的区域,在场景中创建的所有控件都会自动变为 Canvas 游戏对象的子对象,若场景中没有画布,在创建控件时会自动创建画布。
创建画布有两种方式:一是通过菜单直接创建;二是直接创建一个 UI 组件时自动创建一个容纳该组件的画布。
不管用哪种方式创建画布,系统都会自动创建一个名为 EventSystem 的游戏对象,上面挂载了若干与事件监听相关的组件可供设置。
在画布上有一个 Render Mode 属性,它有 3 个选项。
它们分别对应画布的 3 种渲染模式:Screen Space-Overlay、Screen Space-Camera 和 World Space。
1) Screen Space-Overlay 渲染模式
在 Screen Space-Overlay 渲染模式下,场景中的 UI 被渲染到屏幕上,如果屏幕大小改变了或更改了分辨率,画布将自动更改大小以适配屏幕。
此种模式不需要 UI 摄像机,UI 将永远出现在所有摄像机的最前面。
Screen Space-Overlay 渲染模式的参数如下表所示。
Pixel Perfect 重置元素大小和坐标,使贴图的像素完美对应到屏幕像素上Sort Order 排列顺序
2) Screen Space-Camera 渲染模式
Screen Space-Camera 渲染模式类似于 Screen Space-Overlay 渲染模式。
这种渲染模式下,画布被放置在指定摄像机前的一个给定距离上,它支持在 UI 前方显示 3D 模型与粒子系统等内容,通过指定的摄像机 UI 被呈现出来,如果屏幕大小改变或更改了分辨率,画布将自动更改大小以适配屏幕。
Screen Space-Camera 渲染模式的参数如下表所示。
Pixel Perfect 重置元素大小和坐标,使贴图的像素完美对应到屏幕像素上 Render Camera UI 绘制所对应的摄像机Plane Distance UI 距离摄像机镜头的距离Sorting Layer 界面分层,执行 Edit→Project Setting→Tags and Layers→Sorting Layers 命令进 行界面分层,越下方的层在界面显示时越在前面Order Layer 界面顺序,该值越高,在界面显示时越在前面
3) World Space 渲染模式
在 World Space 渲染模式下呈现的 UI 好像是 3D 场景中的一个 Plane 对象。与前两种渲染模式不同,其屏幕的大小将取决于拍摄的角度和相机的距离。
它是一个完全三维的 UI,也就是把 UI 也当成三维对象,例如摄像机离 UI 远了,其显示就会变小,近了就会变大。
World Space 渲染模式的参数如下表所示。
Event Camera 设置用来处理用户界面事件的摄像机Sorting Layer 界面分层,执行 Edit→Project Setting→Tags and Layers→Sorting Layers 命令进 行界面分层,越下方的层在界面显示时越在前面Order Layer 界面顺序,该值越高,在界面显示时越在前面
Event System
创建 UGUI 控件后,Unity 3D 会同时创建一个叫 Event System(事件系统)的 GameObject,用于控制各类事件。
如下图所示。可以看到 Unity 3D 自带了两个 Input Module,一个用于响应标准输入,另一个用于响应触摸操作。
Input Module 封装了 Input 模块的调用,根据用户操作触发各 Event Trigger。
Event System 事件处理器中有 3 个组件:1) Event System 事件处理组件是一种将基于输入的事件发送到应用程序中的对象,使用键盘、鼠标、触摸或自定义输入均可。2) Standalone Input Module(独立输入模块)用于鼠标、键盘和控制器。该模块被配置为查看 InputManager,基于输入 InputManager 管理器的状态发送事件。3) Touch Input Module(触控输入模块)被设计为使用在可触摸的基础设备上。
Panel
Unity 3D panel 控件又叫面板,面板实际上就是一个容器,在其上可放置其他 UI 控件。
当移动面板时,放在其中的 UI 控件就会跟随移动,这样可以更加合理与方便地移动与处理一组控件。
拖动面板控件的 4 个角或 4 条边可以调节面板的大小。
一个功能完备的 UI 界面往往会使用多个 Panel 容器控件,而且一个面板里还可套用其他面板。
当创建一个面板时,此面板会默认包含一个 Image(Script)组件。
其中,Source Image 用来设置面板的图像,Color 用来改变面板的颜色。
Text
UGUI 中创建的很多 UI 控件都有一个支持文本编辑的 Text 控件。
Text 控件也称为标签,Text 区域用于输入将显示的文本。它可以设置字体、样式、字号等内容,如下图所示,具体参数如下表所示。
Font 设置字体Font Style 设置字体样式Font Size 设置字体大小Line Spacing 设置行间距(多行)Rich Text 设置富文本Alignment 设置文本在 Text 框中的水平以及垂直方向上的对齐方式Horizontal Overflow 设置水平方向上溢出时的处理方式。分两种:Wrap(隐藏);Overflow(溢出)Vertical Overflow 设置垂直方向上溢出时的处理方式。分两种:Truncate(截断);Overflow(溢出)Best Fit 设置当文字多时自动缩小以适应文本框的大小Color 设置字体颜色
Image
Image 控件除了两个公共的组件 Rect Transform 与 Canvas Renderer 外,默认的情况下就只有一个 Image 组件。
其中,Source Image 是要显示的源图像,要想把一个图片赋给 Image,需要把图片转换成精灵格式,转化后的精灵图片就可拖放到 Image 的 Source Image 中了。
转换方法为:在 Project 视图中选中要转换的图片,然后在 Inspector 属性面板中,单击 Texture Type(纹理类型)右边的下拉列表,选中 Sprite(2D and UI)并单击下方的 Apply 按钮,就可以把图片转换成精灵格式,然后就可以拖放到 Image 的 Source Image 中了。
Image 控件的参数如下表所示。
Color 设置应用在图片上的颜色Image Type 设置贴图类型Material 设置应用在图片上的材质
Raw Image
Raw Image 控件向用户显示了一个非交互式的图像,如下图所示。它可以用于装饰、图标等。
Raw Image 控件类似于 Image 控件,但是,Raw Image 控件可以显示任何纹理,而 Image 只能显示一个。
Raw Image控件的参数如下表所示。
Texture 设置要显示的图像纹理Color 设置应用在图片上的颜色Material 设置应用在图片上的材质UV Rect 设置图像在控件矩形中的偏移和大小,范围为0 – 1
UGUI Button
除了公共的 Rect Transform 与 Canvas Renderer 两个 UI 组件外,Unity 3D Button 控件还默认拥有 Image 与 Button 两个组件。
Image 组件里的属性与前面介绍的是一样的。
Button 是一个复合控件,其中还包含一个 Text 子控件,通过此子控件可设置 Button 上显示的文字的内容、字体、文字样式、文字大小、颜色等,与前面所讲的 Text 控件是一样的。
Button控件属性如下:1) Interactable(是否启用交互)如果把其后的对钩去掉,此 Button 在运行时将不可单击,即失去了交互性。2) Transition(过渡方式)共有 4 个选项,如下图(b)所示。默认为 Color Tint(颜色色彩)。None:没有过渡方式。Color Tint:颜色过渡,相关属性如下表所示。Sprite Swap:精灵交换,需要使用相同功能、不同状态的贴图,相关属性如下表所示。Animation:动画过渡。
Color Tint 的属性如下:
Target Graphic 设置目标图像Disabled Color 设置禁用色Normal Color 设置正常颜色Color Multiplier 设置颜色倍数Highlighted Color 设置高亮色Fade Duration 设置变化持续的时间Pressed Color 设置单击色
Sprite Swap 的属性如下:
Target Graphic 设置目标图像Pressed Sprite 设置单击时的贴图Highlighted Sprite 设置鼠标经过时的贴图Disabled Sprite 设置禁用时的贴图
UGUI Toggle
UGUI Toggle 控件也是一个复合型控件,如下图所示。它有 Background 与 Label 两个子控件,而 Background 控件中还有一个 Checkmark 子控件。
Background 是一个图像控件,而其子控件 Checkmark 也是一个图像控件,其 Label 控件是一个文本框,通过改变它们所拥有的属性值,即可改变 Toggle 的外观,如颜色、字体等。
Toggle 控件的参数如下表所示。
Is On 设置复选框默认是开还是关Toggle Transition 设置渐变效果Graphic 用于切换背景,更改为一个更合适的图像Group 设置多选组
UGUI Slider
在游戏的 UI 界面中会见到各种滑块,用来控制音量或者是摇杆的灵敏度。
Unity 3D Slider 控件也是一个复合控件,Background 是背景,默认颜色是白色,Fill Area 是填充区域,如下图所示。
Slider 控件的一个需要注意的参数是 Whole Number,该参数表示滑块的值是否只可为整数,开发人员可根据需要进行设置。
除此以外,Slider 控件也可以挂载脚本,用来响应事件监听。
Slider 控件的参数如下表所示。
Fill Rect 设置填充矩形区域Max Value 设置最大数值Handle Rect 设置手柄矩形区域Whole Numbers 设置整数数值Direction 设置 Slider 的摆放方向Value 设置滑块当前的数值Min Value 设置最小数值
Scrollbar
Scrollbar(滚动条)控件可以垂直或水平放置,主要用于通过拖动滑块以改变目标的比例,如下图所示。
它最恰当的应用是用来将一个值变为指定百分比,最大值为1(100%),最小值为0(0%),拖动滑块可在0和1之间改变,例如改变滚动视野的显示区域。
Scrollbar 控件的参数如下表所示。
Handle Rect 设置最小值与最大值之间的范围,也就是整个滑条的最大可控制范围。Direction 设置滚动条的方向为从左至右、从上至下或其他的方向Value 设置当前滚动条对应的值Size 设置操作条矩形对应的缩放长度,即 handle 部分的大小,取值为 0〜1Numbers Of Steps 设置滚动条可滚动的位置数目On Value Changed 设置值改变时触发消息
Input Field
Input Field 控件也是一个复合控件,包含 Placeholder 与 Text 两个子控件,如下图所示。
其中,Text 是文本控件,程序运行时用户所输入的内容就保存在 Text 控件中,Placeholder 是占位符,表示程序运行时在用户还没有输入内容时显示给用户的提示信息。
Input Field 输入字段组件与其他控件一样,也有 Image(Script)组件,另外也包括 Transition 属性,其默认是 Color Tint,如下图所示,具体属性如下表所示。
Interactable 设置是否启用 Input Field 组件。勾选表示输入字段可以交互,否则表示不可以 交互Transition 设置当正常显示、突出显示、按下或禁用时输入字段的转换效果Navigation 设置导航功能Text Component 设置此输人域的文本显示组件,用于显示用户输人的文本框Text 设置此输入域的初始值Character Limit 设置此输人域最大的输入字符数,0为不限制输入字符数Content Type 输人此输人域的内容类型,包括数字、密码等,常用的类型如下: Standard:允许输人任何字符,只要是当前字体支持的即可。 Autocorrected:自动校正输入的未知单词,并建议更合适的替换候选对象,除非 用户明确地覆盖该操作,否则将自动替换输入的文本。 Integer Number:只允许输入整数。 Decimal Number:允许输入整数或小数。 Alpha numeric:允许输人数字和字母。 Name:允许输入英文及其他文字,当输人英文时能自动提示姓名拼写。 Email Address:允许输人一个由最多一个 @ 符号组成的字母数字字符串。 Password:输入的字符被隐藏,只显 7K 星号。 Pin:只允许输人整数。输入的字符被隐藏,只显示星号。 Custom:允许用户自定义行类型、输入类型、键盘类型和字符验证Line Type 设置当输人的内容超过输入域边界时的换行方式: Single Line:超过边界也不换行,继续向右延伸此行,即输入域中的内容只有一行 Multi Line Submit:允许文本换行。只在需要时才换行。 Multi Line Newline:允许文本换行。用户可以按回车键来换行Placeholder 设置此输入域的输人位控制符,对于任何带有 Text 组件的物体均可设置此项。
除此以外,它还有一个重要的 Content Type(内容类型)属性,如下图所示,其参数如下表所示。
Standard 标准的Name 人名Autocorrected 自动修正Email Address 邮箱Integer Number 整数Password 密码Decimal Number 十进制小数Pin 固定Alphanumeric 字母数字Custom 定制的