Unity中的GUI編程

1、Unity中的GUI編程 在這篇文章中我將給讀者介紹Unity中的圖形用戶界面(GUI)編程.Unity有一個非常強(qiáng)大的GUI腳本API.它允許你使用腳本快速創(chuàng)建簡單的菜單和GUI.簡介Unity提供了使用腳本創(chuàng)建GUI界面的能力.在寫這篇文章的時候,Unity還沒有提供一套原生的可視化GUI開發(fā)工具,盡管你可能會在Unity Asset商店找到一些使用某種形式的圖形化腳本編程編寫GUI的工具.Autodesk Scaleform也提供了一個可以單獨(dú)購買并整合進(jìn)Unity的插件但這超出了這篇文章的范圍.如果你對Scaleform插件的unity版本感興趣,我推薦你看看Scaleform Uni

2、ty Plugin.Unity提供了兩個主要的類來創(chuàng)建GUI.GUI類用于創(chuàng)建手動放置的GUI控件.GUILayout類用于創(chuàng)建自動放置的GUI控件.這兩個類之間的區(qū)別將在文章后面搞清楚.Unity也提供了GUISkin資源(asset翻譯成套件?).它可以被應(yīng)用于給你的GUI控件提供一種通用的的"外觀和感覺".一個GUISkin只是GUIStyle對象的集合.每個GUIStyle對象定義了單個GUI控件的樣式,比如按鈕,標(biāo)簽或者文本域.GUiText組件可被用于渲染單個的文本元素,GUITexture組件可以被用于渲染2D材質(zhì)到屏幕.GUIText和GUITexture都

3、適用于為你的游戲繪制GUI元素(就像HUD),但這些組件不適用于在游戲中繪制菜單.對于游戲中的菜單(像等級選擇和選項(xiàng)設(shè)置頁面)你應(yīng)該使用GUI和GUILayout類.這些不同的類,資源(Asset)和組件每一個本文中都會闡述創(chuàng)建菜單首先我講述一下如何在使用GUI和GUILayout在Unity中創(chuàng)建菜單.我也會向你展示如何使用GUISkin和GUIStyle來自定義GUI控件的外觀OnGUI回調(diào)函數(shù)GUI的渲染是通過創(chuàng)建腳本并定義OnGUI函數(shù)來執(zhí)行的.所有的GUI渲染都應(yīng)該在該函數(shù)中執(zhí)行或者在一個被OnGUI調(diào)用的函數(shù)中執(zhí)行ButtonDemo.jsjavascript view plain

4、copyprint?1. function OnGUI()  2.   3.     var buttonWidth = 100;  4.     var buttonHeight = 50;  5.   6.     var buttonX = (Screen.width

5、60;- buttonWidth) / 2.0f;  7.     var buttonY = (Screen.height - buttonHeight) / 2.0f;  8.       9.     /在屏幕中間繪制一個button組件   10.    

6、60;if(GUI.Button(Rect(buttonX,buttonY,buttonWidth,buttonHeight),"Press Me!")  11.       12.         /在調(diào)試控制臺打印一些文字   13.         Debug.Log("Thanks!&quo

7、t;);  14.       15.   function OnGUI()var buttonWidth = 100;var buttonHeight = 50;var buttonX = (Screen.width - buttonWidth) / 2.0f;var buttonY = (Screen.height - buttonHeight) / 2.0f;/在屏幕中間繪制一個button組件if(GUI.Button(Rect(buttonX,buttonY,buttonWidth,b

8、uttonHeight),"Press Me!")/在調(diào)試控制臺打印一些文字Debug.Log("Thanks!");腳本ButtonDemo.js將會在屏幕中間繪制一個按鈕,松開按鈕文字"Thanks!"就會被打印到調(diào)試控制臺. GUIContent大多數(shù)通用控件比如按鈕和標(biāo)簽允許你指定控件上該呈現(xiàn)在控件上的的文本或者材質(zhì).如果你想在一個控件上指定文本與材質(zhì),那必須使用GUIContent結(jié)構(gòu).CUIContent結(jié)構(gòu)有幾個構(gòu)造函數(shù)允許你創(chuàng)建一個帶有文本,材質(zhì)和tooltip的CUIContent對象.下面的例子擴(kuò)展了之前的例子,但

9、在這個例子中按鈕的內(nèi)容由GUIContent結(jié)構(gòu)指定.ButtonDemo.jsjavascript view plaincopyprint?1. #pragma strict   2. var texture:Texture;  3. var text:String = "hello text"  4. var toolTip:String = "hello toolTip" 

10、0;5.   6. function OnGUI()  7.   8.     var buttonWidth = 100;  9.     var buttonHeight = 50;  10.       11.     var but

11、tonX = (Screen.width - buttonWidth) / 2.0f;  12.     var buttonY = (Screen.height - buttonHeight) / 2.0f;  13.       14.     /在屏幕中心繪制一個帶有文本和圖像的按鈕

12、   15.     if(GUI.Button(Rect(buttonX,buttonY,buttonWidth,buttonHeight),GUIContent(text,texture,toolTip)  16.       17.         /在調(diào)試控制臺打印一些文字   18.      &#

13、160;  Debug.Log("Thanks!");  19.       20.   #pragma strictvar texture:Texture;var text:String = "hello text"var toolTip:String = "hello toolTip"function OnGUI()var buttonWidth = 100;var buttonHeight = 50;var b

14、uttonX = (Screen.width - buttonWidth) / 2.0f;var buttonY = (Screen.height - buttonHeight) / 2.0f;/在屏幕中心繪制一個帶有文本和圖像的按鈕if(GUI.Button(Rect(buttonX,buttonY,buttonWidth,buttonHeight),GUIContent(text,texture,toolTip)/在調(diào)試控制臺打印一些文字Debug.Log("Thanks!");改進(jìn)后的ButtonDemo.js腳本將會在屏幕上顯示一個文本與材質(zhì).材質(zhì),文本和toolt

15、ip參數(shù)可以在檢視器(inspector)中指定. ButtonDemo.js腳本會產(chǎn)生如下結(jié)果.放置控件使用GUI類你必須手動的擺放屏幕上的控件.控件使用GUI靜態(tài)函數(shù)的position參數(shù)來擺放.為了在屏幕上擺放控件,必須將一個Rect結(jié)構(gòu)作為第一個參數(shù)傳遞給GUI控件函數(shù).Rect結(jié)構(gòu)的為控件定義了X,Y,Width,Height屬性.X,Y,Width和Height單位都是像素.Screen.width和Screen.height屬性可以被用于檢視當(dāng)前屏幕的范圍.腳本ScreenDimension.js可以被用于渲染上面的截圖.ScreenDimensions.jsjavascript

16、 view plaincopyprint?1. function OnGUI()  2.   3.     var width = Screen.width;  4.     var height = Screen.height;  5.       6.     GU

17、I.Label(Rect(0,0,100,20),"Top Left");  7.     GUI.Label(Rect(width - 100,0,100,20),"Top Right");  8.     GUI.Label(Rect(0,height - 20,100,20),"Bottom Left");  9.

18、60;   GUI.Label(Rect(width - 100,height - 20,100,20),"Bottom Right");  10.   function OnGUI()var width = Screen.width;var height = Screen.height;GUI.Label(Rect(0,0,100,20),"Top Left");GUI.Label(Rect(width - 100,0,100,20)

19、,"Top Right");GUI.Label(Rect(0,height - 20,100,20),"Bottom Left");GUI.Label(Rect(width - 100,height - 20,100,20),"Bottom Right");ScreenDimension.js腳本將繪制4個標(biāo)簽.每個標(biāo)簽都使用Screen.width和Screen.height屬性來決定其屏幕位置并對齊到屏幕角落里(測量單位為像素) GUI類GUI類是Unity用于將控件渲染到屏幕上的主要類.GUI類使用手動擺放來決定屏幕上控件的位置

20、.這意味著在渲染控件時你必須顯式的指定控件在屏幕上的位置.使用這種方法手動擺放控件需要多做些工作但他可以讓你精確地控制屏幕上的控件位置.如果你不想手動的指定GUI控件的位置,那你應(yīng)該使用GUILayout類.我們后面再詳細(xì)闡述GUILayout.GUI控件在下面的章節(jié)中,我將介紹在使用GUI和GUILayout時可利用的不同控件這些類提供的默認(rèn)控件是box,button,label,window,texture,scroll bars,sliders,textfield,textarea,toggle和toolbarGUI.BUTTON可能你最常用的控件之一就是按鈕了.你可以使用GUI.But

21、ton()靜態(tài)函數(shù)來創(chuàng)建一個按鈕.這個函數(shù)用于將按鈕渲染到屏幕上,當(dāng)松開按鈕時函數(shù)返回true.這里值得一說的是GUI.Button函數(shù)只會在鼠標(biāo)在按鈕上按下并且在按鈕上松開時才返回true,如果用戶按下按鈕移動鼠標(biāo)在按鈕外面釋放鼠標(biāo),則函數(shù)不會返回TRUE,同樣的如果用戶按下了鼠標(biāo)之后將光標(biāo)移動到按鈕上然后釋放鼠標(biāo)該函數(shù)也不會返回TRUE.要使該函數(shù)返回true,鼠標(biāo)必須在按鈕上按下并釋放.以下代碼可用于使用按鈕創(chuàng)建一個簡單的等級選擇屏幕(假定你在Build Settings對話框中有多個場景文件要設(shè)置)LevelSelect.jsjavascript view plaincopyprint

22、?1. function OnGUI()  2.   3.     var groundWidth = 120;  4.     var groundHeight = 150;  5.       6.     var screenWidth =&#

23、160;Screen.width;  7.     var screenHeight = Screen.height;  8.       9.     var groupx = (screenWidth - groundWidth) / 2;  10.    

24、0;var groupy = (screenHeight - groundHeight) / 2;  11.       12.     GUI.BeginGroup(Rect(groupx,groupy,groundWidth,groundHeight);  13.     GUI.Box(Rect(0,0,groundWidth,groundH

25、eight),"Level Select");  14.       15.     if(GUI.Button(Rect(10,30,100,30),"Level 1")  16.       17.         Application.LoadLeve

26、l(1);  18.       19.     if(GUI.Button(Rect(10,70,100,30),"Level 2")  20.       21.         Application.LoadLevel(2);  22.   

27、    23.     if(GUI.Button(Rect(10,110,100,30),"Level 3")  24.       25.         Application.LoadLevel(3);  26.       27. 

28、0;     28.     GUI.EndGroup();  29.   function OnGUI()var groundWidth = 120;var groundHeight = 150;var screenWidth = Screen.width;var screenHeight = Screen.height;var groupx = (screenWidth - groundWidth) / 2;var groupy = (screenHeight

29、- groundHeight) / 2;GUI.BeginGroup(Rect(groupx,groupy,groundWidth,groundHeight);GUI.Box(Rect(0,0,groundWidth,groundHeight),"Level Select");if(GUI.Button(Rect(10,30,100,30),"Level 1")Application.LoadLevel(1);if(GUI.Button(Rect(10,70,100,30),"Level 2")Application.LoadLeve

30、l(2);if(GUI.Button(Rect(10,110,100,30),"Level 3")Application.LoadLevel(3);GUI.EndGroup();將腳本添加到空的場景中會產(chǎn)生如下結(jié)果: 你也許會想看看Unity腳本參考里的GUI.Toggle和GUI.RepeatButton,這些與GUI.Button控件類似但略有不同的功能.GUI.LabelGUI.Label()靜態(tài)函數(shù)用于繪制一個標(biāo)簽.標(biāo)簽通常實(shí)在屏幕上指定位置繪制的文字.標(biāo)簽控件最常用的是在菜單屏幕中指定選項(xiàng)名稱(比如文本框和文本域).標(biāo)簽可包含文字,材質(zhì)或者兩者兼有(使用之前講過的

31、GUIContent結(jié)構(gòu))下面的例子在屏幕上顯示繪制了兩個選項(xiàng).選項(xiàng)名稱和滑塊的值使用標(biāo)簽呈現(xiàn)OptionsMenu.jsjavascript view plaincopyprint?1. #pragma strict   2.   3. private var masterVolume:float = 1.0;  4. private var sfxVolume:float = 1.0;  5.   6.

32、 function OnGUI()  7.   8.     var groupWidth = 380;  9.     var groupHeight = 110;  10.       11.     var screenWidth = 

33、;Screen.width;  12.     var screenHeight = Screen.height;  13.       14.     var groupX = (screenWidth - groupWidth) / 2;  15.     

34、;var groupY = (screenHeight - groupHeight) / 2;  16.       17.     GUI.BeginGroup(Rect(groupX,groupY,groupWidth,groupHeight);  18.     GUI.Box(Rect(0,0,groupWidth,groupHeight)

35、,"Audio Settings");  19.       20.     GUI.Label(Rect(10,30,100,30),"Master Volume");  21.     masterVolume = GUI.HorizontalSlider(Rect(120,35,200,30),masterVolume,0.0,1.

36、0);  22.     GUI.Label(Rect(330,30,50,30),"(" + masterVolume.ToString("f2") + ")");  23.       24.     GUI.Label(Rect(10,70,100,30),"Effect Volume&quo

37、t;);  25.     sfxVolume = GUI.HorizontalSlider(Rect(120,75,200,30),sfxVolume,0.0,1.0);  26.     GUI.Label(Rect(330,70,50,30),"(" + sfxVolume.ToString("f2") + ")");  27. &

38、#160;     28.     GUI.EndGroup();  29.   #pragma strictprivate var masterVolume:float = 1.0;private var sfxVolume:float = 1.0;function OnGUI()var groupWidth = 380;var groupHeight = 110;var screenWidth = Screen.width;var screenHeight =

39、Screen.height;var groupX = (screenWidth - groupWidth) / 2;var groupY = (screenHeight - groupHeight) / 2;GUI.BeginGroup(Rect(groupX,groupY,groupWidth,groupHeight);GUI.Box(Rect(0,0,groupWidth,groupHeight),"Audio Settings");GUI.Label(Rect(10,30,100,30),"Master Volume");masterVolume

40、= GUI.HorizontalSlider(Rect(120,35,200,30),masterVolume,0.0,1.0);GUI.Label(Rect(330,30,50,30),"(" + masterVolume.ToString("f2") + ")");GUI.Label(Rect(10,70,100,30),"Effect Volume");sfxVolume = GUI.HorizontalSlider(Rect(120,75,200,30),sfxVolume,0.0,1.0);GUI.Lab

41、el(Rect(330,70,50,30),"(" + sfxVolume.ToString("f2") + ")");GUI.EndGroup();OptionsMenu.js腳本運(yùn)行結(jié)果如下: 你也應(yīng)該改看看GUI.TextField和GUI.TextArea這些控件允許你創(chuàng)建可編輯文字輸入控件.GUI.HorizontalSlider和GUI.verticalSliderGUI.HorizontalSlider和GUI.verticalslider靜態(tài)函數(shù)可相應(yīng)的用于繪制水平和豎直滑塊.滑塊用于指定在一定范圍內(nèi)的一個數(shù)值.在上面

42、的例子中,使用了兩個水平滑塊來指定主音量和音效范圍為0到1Slider函數(shù)接受當(dāng)前滑塊值和滑塊最小值和滑塊最大值.上面的例子展示了如何使用水平滑塊,豎直滑塊使用與水平滑塊同樣的參數(shù)只是滑塊是豎直繪制而不是水平繪制.下面的例子展示了使用豎直滑塊來創(chuàng)建一個音頻均衡器javascript view plaincopyprint?1. #pragma strict   2.   3. private var equalizerValues = new float10;  4.

43、60; 5. function OnGUI()  6.   7.     var groupWidth = 320;  8.     var groupHeight = 260;  9.       10.     var screenWidth&#

44、160;= Screen.width;  11.     var screenHeight = Screen.height;  12.       13.     var groupX = (screenWidth - groupWidth) / 2;  14.   &

45、#160; var groupY = (screenHeight - groupHeight) / 2;  15.       16.     GUI.BeginGroup(Rect(groupX,groupY,groupWidth,groupHeight);  17.     GUI.Box(Rect(0,0,groupWidth,gr

46、oupHeight),"Equalizer");  18.       19.     for(var i = 0; i < equalizerValues.Length; i+)  20.       21.        

47、0;equalizerValuesi = GUI.VerticalSlider(Rect(i * 30 + 20,30,20,200),equalizerValuesi,0.0,1.0);  22.       23.     GUI.EndGroup();  24.   #pragma strictprivate var equalizerValues = new float

48、10;function OnGUI()var groupWidth = 320;var groupHeight = 260;var screenWidth = Screen.width;var screenHeight = Screen.height;var groupX = (screenWidth - groupWidth) / 2;var groupY = (screenHeight - groupHeight) / 2;GUI.BeginGroup(Rect(groupX,groupY,groupWidth,groupHeight);GUI.Box(Rect(0,0,groupWidt

49、h,groupHeight),"Equalizer");for(var i = 0; i < equalizerValues.Length; i+)equalizerValuesi = GUI.VerticalSlider(Rect(i * 30 + 20,30,20,200),equalizerValuesi,0.0,1.0);GUI.EndGroup();結(jié)果應(yīng)類似下面的: 當(dāng)使用水平滑塊時,最小值在滑塊的左邊最大值在滑塊的右邊.當(dāng)使用豎直滑塊時,最小值在頂部,最大值在滑塊底部.您可能也想看看GUI.HorizontalScrollbar和GUI.Vertical

50、Scrollbar它們類似于滑塊，但具有不同的功能。GUI.WINDOW和GUI.DRAGWINDOWGUI類提供了在屏幕上繪制窗口的函數(shù),窗口可以使用外部函數(shù)(除了OnGUI)來渲染窗口的內(nèi)容.如果在窗口的回調(diào)函數(shù)中使用GUI.DragWindow函數(shù),那窗口將會是可拖動的.下面的代碼創(chuàng)建了一個簡單而可拖動的窗口DraggableWindow.jsjavascript view plaincopyprint?1. #pragma strict   2.   3. /窗口的初始位置以及大小   4. private 

51、;var windowRect0 = Rect(20,20,150,0);  5.   6. function OnGUI()  7.   8.     /渲染窗口ID為0   9.     windowRect0 = GUILayout.Window(0,windowRect0,WindowFunction,"Draggable Win

52、dow");  10.   11.   12. function WindowFunction()  13.   14.     GUILayout.Label("This is a draggable window!");  15.       16.    

53、0;/窗口的拖條(drag-strip),坐標(biāo)相對于窗口的左上角   17.     GUI.DragWindow(Rect(0,0,150,20);  18.   #pragma strict/窗口的初始位置以及大小private var windowRect0 = Rect(20,20,150,0);function OnGUI()/渲染窗口ID為0windowRect0 = GUILayout.Window(0,windowRect0,WindowFunction,"Dragga

54、ble Window");function WindowFunction()GUILayout.Label("This is a draggable window!");/窗口的拖條(drag-strip),坐標(biāo)相對于窗口的左上角GUI.DragWindow(Rect(0,0,150,20);如果在新場景中將腳本應(yīng)用到GameObject上,你就會看到窗口,點(diǎn)擊并拖動窗口標(biāo)題你就可以在屏幕上把窗口拖來拖去. 在窗口中可以放置任意數(shù)量的控件.如果你想要Unity在窗口中自動布局控件(就像例子中一樣)那你應(yīng)該使用GUILayout.Window函數(shù)而不是GUI.Win

55、dow函數(shù).當(dāng)使用GUILayout.Window函數(shù)時,unity會自動修改窗口的高度以適應(yīng)內(nèi)容.就像上面的例子展示的一樣.自動布局在這里展示的絕大數(shù)例子,我都是用GUI類來創(chuàng)建菜單.GUI類需要我們手動地在屏幕上放置空間,在某些情況下,手動擺放控件很有用,但如果你想要unity為你自動布局控件,那你需要使用GUILayout類.這個類提供了許多像GUI一樣的功能,但不要求你指定控件的大小GUILayout.beginHorizontal和guilayout.beginVertical默認(rèn)情況下,當(dāng)使用GUILayout函數(shù)時所有的視圖中的組件都會豎直排列.你可以使用guilayout.be

56、ginhorizontal和guilayout.endhorizontal靜態(tài)函數(shù)使控件相鄰排放.每出現(xiàn)一次guilayout.BeginVertical必須有對應(yīng)的GUILayout.EndVertical與其對應(yīng),每出現(xiàn)一次GUILayout.BeginHorizontal則必須有對應(yīng)的GUILayouyudHorizontal與其對應(yīng)下面的例子展示了如何使用豎直和水平布局來創(chuàng)建復(fù)雜的表格UserForm.jsjavascript view plaincopyprint?1. #pragma strict   2.   3. private

57、 var firstName:String = "First Name"  4. private var lastName:String = "Last Name"  5. private var age:uint = 0;  6. private var submitted:boolean = false; 

58、; 7.   8. private var windowRect0:Rect;  9.   10. function Start()  11.   12.       13.   14.   15. function OnGUI()  16.   17.     var

59、 screenWidth = Screen.width;  18.     var screenHeight = Screen.height;  19.   20.     var windowWidth = 300;  21.     var windowHeight = 18

60、0;  22.     var windowX = (screenWidth - windowWidth) / 2;  23.     var windowY = (screenHeight - windowHeight) / 2;  24.   25.    

61、0;/將窗口放置到屏幕中間   26.     windowRect0 = Rect(windowX,windowY,windowWidth,windowHeight);  27.   28.     GUILayout.Window(0,windowRect0,UserForm,"User information");  29.   30.   

62、31. function UserForm()  32.   33.     GUILayout.BeginVertical();  34.   35.     /first name   36.     GUILayout.BeginHorizontal();  37.     GUILayout

63、.Label("First Name",GUILayout.Width(80);  38.     firstName = GUILayout.TextField(firstName);  39.     GUILayout.EndHorizontal();  40.   41.     /last name   42

64、.     GUILayout.BeginHorizontal();  43.     GUILayout.Label("Last Name",GUILayout.Width(80);  44.     lastName = GUILayout.TextField(lastName);  45.     GUILayout.En

65、dHorizontal();  46.   47.     /Age   48.     GUILayout.BeginHorizontal();  49.     GUILayout.Label("Age",GUILayout.Width(80);  50.     var ageText =&#

66、160;GUILayout.TextField(age.ToString();  51.     var newAge = age;  52.     if(uint.TryParse(ageText,newAge)  53.       54.         age =

67、60;newAge;  55.       56.     GUILayout.EndHorizontal();    57.   58.     if(GUILayout.Button("Submit")  59.       60.    

68、60;    submitted = true;  61.       62.     if(GUILayout.Button("Reset")  63.       64.         firstName = &q

69、uot;First Name"  65.         lastName = "Last Name"  66.         age = 0;  67.         submitted =&#

70、160;false;  68.       69.     if(submitted)  70.       71.         GUILayout.Label("submitted!");  72.       7

71、3.     GUILayout.EndVertical();  74.   #pragma strictprivate var firstName:String = "First Name"private var lastName:String = "Last Name"private var age:uint = 0;private var submitted:boolean = false;private var windowRect0:Rect;function St

72、art()function OnGUI()var screenWidth = Screen.width;var screenHeight = Screen.height;var windowWidth = 300;var windowHeight = 180;var windowX = (screenWidth - windowWidth) / 2;var windowY = (screenHeight - windowHeight) / 2;/將窗口放置到屏幕中間windowRect0 = Rect(windowX,windowY,windowWidth,windowHeight);GUIL

73、ayout.Window(0,windowRect0,UserForm,"User information");function UserForm()GUILayout.BeginVertical();/first nameGUILayout.BeginHorizontal();GUILayout.Label("First Name",GUILayout.Width(80);firstName = GUILayout.TextField(firstName);GUILayout.EndHorizontal();/last nameGUILayout.Be

74、ginHorizontal();GUILayout.Label("Last Name",GUILayout.Width(80);lastName = GUILayout.TextField(lastName);GUILayout.EndHorizontal();/AgeGUILayout.BeginHorizontal();GUILayout.Label("Age",GUILayout.Width(80);var ageText = GUILayout.TextField(age.ToString();var newAge = age;if(uint.T

75、ryParse(ageText,newAge)age = newAge;GUILayout.EndHorizontal();if(GUILayout.Button("Submit")submitted = true;if(GUILayout.Button("Reset")firstName = "First Name"lastName = "Last Name"age = 0;submitted = false;if(submitted)GUILayout.Label("submitted!")

76、;GUILayout.EndVertical();這段代碼看上去挺復(fù)雜的.這里面有些東西如果你不熟悉腳本編寫的話可能看起來不熟悉.需要強(qiáng)調(diào)的一點(diǎn)是我使用一個靜態(tài)窗口(不可拖動)的來把控件據(jù)合起來.窗口需要一個繪制其內(nèi)部結(jié)構(gòu)的函數(shù).為此我是用了UseForm函數(shù). 用戶表格開頭使用豎直布局.因?yàn)楫?dāng)使用自動布局時豎直布局是默認(rèn)的,所以顯式的指定它是可有可無的.之后每一個字段都是用水平布局創(chuàng)建,標(biāo)簽旁邊跟著文本.標(biāo)簽被顯式的使用GUILayout.Width()函數(shù)設(shè)置為80像素.我這樣做是為了確保所有的文本都整潔的對齊.文本域擴(kuò)展填充窗口的剩余部分.在兩個文本之后,添加了兩個豎直布局的按鈕.按鈕將

77、擴(kuò)展填充區(qū)域其高度由按鈕的內(nèi)容決定.不要忘了常使用GUILayout.EndVertical()或GUILayout.EndHorizontal()函數(shù)結(jié)果豎直或水平布局.腳本UserForm.js將會產(chǎn)生如下結(jié)果:你可能也想看看GUI.BeginGroup,GUILayout.BeginArea和GUI.BeginScrollView.所有的這些函數(shù)都可以被用于創(chuàng)建組(或者可以自動布局的區(qū)域),這些組或者區(qū)域可以用于保持控件在特定區(qū)域內(nèi)聚合起來.樣式和皮膚unity為所有的GUI控件提供了默認(rèn)的外觀.作為一個快速解決方案的話默認(rèn)的樣式足夠用了,但你可能不想在你要面市的游戲中使用unity的默

78、認(rèn)GUI樣式.GUISkin使用自定義的GUISkin你可以更改按鈕,標(biāo)簽,滑塊,和滾動條的外觀.GUISkin是一個套件(asset),你可以從主菜單中選擇Assets>Create>GUISkin來創(chuàng)建它.如果你在項(xiàng)目視圖(project view)里選擇了GUISkin,你可以為你可創(chuàng)建的多種控件編輯單獨(dú)的樣式設(shè)置.要使用你自定義的皮膚將默認(rèn)皮膚替換掉,在GUI腳本里面設(shè)置GUI.skin屬性為你自定義的皮膚.將GUI.skin屬性設(shè)置為null將還原回默認(rèn)的GUISkin.GUIStyleGUISkin只是一系列GUIStyle樣式的集合.GUIStyle定義了一個控件所有

79、可變狀態(tài)的樣式.一個控件有以下狀態(tài):· 正常狀態(tài):控件的默認(rèn)狀態(tài).鼠標(biāo)既沒有懸停到控件上控件也沒有獲得系統(tǒng)焦點(diǎn).· 懸停狀態(tài):鼠標(biāo)當(dāng)前懸停在控件上· 注視狀態(tài):當(dāng)前正選擇控件,選中的控件將會接受鍵盤輸入.這個狀態(tài)對于按鈕和可編輯文本控件.· 活動狀態(tài):控件被點(diǎn)擊,這個狀態(tài)對于按鈕,滑塊和滾動條都是合法的.GUIStyle可以在沒有GUISkin的情況下使用以便改寫控件的樣式.要使用GUIStyle,簡單的在腳本中創(chuàng)建一個GUIStyle類型的公開變量并在檢視器(inspecot),當(dāng)你想要為控件應(yīng)用樣式.簡單把樣式作為控件函數(shù)的最后一個參數(shù)數(shù)傳進(jìn)去就行.

80、作為練習(xí),下載下面的Unity包并將其導(dǎo)入一個新的Unity工程中:鏈接地址使用下面代碼,創(chuàng)建一個名稱為LevelSelect.js的腳本.LevelSelect.jsjavascript view plaincopyprint?1. #pragma strict   2. function OnGUI()  3.   4.     var groundWidth = 120;  5.    &#

81、160;var groundHeight = 150;  6.       7.     var screenWidth = Screen.width;  8.     var screenHeight = Screen.height;  9.       10.     var groupx = (screenWidth - groundWidth) / 2;  11.     var groupy = (screenHeig