Unity3D開發(fā)標(biāo)準(zhǔn)教程-Unity3D圖形用戶界面基礎(chǔ)

Unity3D圖形用戶界面基礎(chǔ)

第1頁3.1GUI圖形用戶界面系統(tǒng)

3.1.1Button控件Button控件用于在界面上創(chuàng)建一個(gè)按鈕。當(dāng)用戶點(diǎn)擊時(shí)會(huì)觸發(fā)相應(yīng)的功能，在游戲中通常用于界面、游戲功能、游戲設(shè)置的開關(guān)。1staticfunctionButton(position:Rect,text:String):bool

2staticfunctionButton(position:Rect,image:Texture):bool

3staticfunctionButton(position:Rect,content:GUIContent):bool

4staticfunctionButton(position:Rect,text:String,style:GUIStyle):bool第2頁3.1GUI圖形用戶界面系統(tǒng)

第3頁3.1.1Button控件12 if(GUI.Button(newRect(Screen.width/9,Screen.height/4,13 Screen.height/5,Screen.height/10),"按鈕")){ //通過第一種方法實(shí)現(xiàn)Button控件14 Debug.Log("staticfunctionButton(position:Rect,text:String):bool");15 }16 if(GUI.Button(newRect(Screen.width/3,Screen.height/4,17 Screen.height/5,Screen.height/5),test)){ //通過第二種方法實(shí)現(xiàn)Button控件18 Debug.Log("staticfunctionButton(position:Rect,image:Texture):bool");19 }3.1GUI圖形用戶界面系統(tǒng)

第4頁3.1.1Button控件20if(GUI.Button(newRect(Screen.width/2,Screen.height/4,21 Screen.height/5,Screen.height/10),guiContent)){ //通過第三種方法實(shí)現(xiàn)Button控件22 Debug.Log("staticfunctionButton(position:Rect,content:GUIContent):bool");23 }24 if(GUI.Button(newRect(Screen.width/1.5f,Screen.height/4,25 Screen.height/5,Screen.height/5),"按鈕4",guiStyle)){//通過第四種方法實(shí)現(xiàn)Button控件26 Debug.Log("staticfunctionButton(position:Rect,text:String,style:GUIStyle):bool");27 }}}3.1GUI圖形用戶界面系統(tǒng)

第5頁3.1GUI圖形用戶界面系統(tǒng)

3.1.2Label控件Label控件是在設(shè)備的屏幕上創(chuàng)建文本標(biāo)簽或紋理標(biāo)簽，一般用于提示用戶一些信息。1 staticfunctionLabel(position:Rect,text:string):void

2 staticfunctionLabel(position:Rect,image:Texture):void

3 staticfunctionLabel(position:Rect,content:GUIContent):void

4 staticfunctionLabel(position:Rect,content:GUIContent,style:GUIStyle):void第6頁3.1GUI圖形用戶界面系統(tǒng)

第7頁3.1.2Label控件13 GUI.Label(newRect(Screen.width/8.5f,Screen.height/7,//創(chuàng)建僅有文字的Label控件14 Screen.height/1.5f,Screen.height/8),"繪制只有文字的Label控件！");15 GUI.Label(newRect(Screen.width/8.5f,Screen.height/4.5f,//創(chuàng)建具有紋理圖片的Label控件16 Screen.height/1.5f,Screen.height/8),texture);17 GUI.Label(newRect(Screen.width/8.5f,Screen.height/2.5f,//使用Conten的Label控件18 Screen.height/1.5f,Screen.height/8),guiContent);19 GUI.Label(newRect(Screen.width/8.5f,Screen.height/1.7f,//使用Content和Style的Label控件20 Screen.height/1.5f,Screen.height/8),guiContent2,guiStyle);3.1GUI圖形用戶界面系統(tǒng)

第8頁3.1GUI圖形用戶界面系統(tǒng)

3.1.3DrawTexture控件DrawTexture控件用于繪制紋理圖片，在使用GUI系統(tǒng)創(chuàng)建DrawTexture控件的時(shí)候，會(huì)有如下靜態(tài)方法供開發(fā)人員調(diào)用，沒有返回值。1 staticfunctionDrawTexture(position,image,scaleMode,alphaBlend,imageAspect):void第9頁3.1GUI圖形用戶界面系統(tǒng)

3.1.3DrawTexture控件第10頁3.1.3DrawTexture控件11GUI.DrawTexture(newRect(Screen.width/9,//使用ScaleAndCrop模式繪制的圖片12Screen.height/4,Screen.height/5,Screen.height/7),13texture,ScaleMode.ScaleAndCrop,true,0.0f);14GUI.DrawTexture(newRect(Screen.width/3.5f,//使用ScaleToFit模式繪制的圖片15Screen.height/4,Screen.height/5,Screen.height/7),16texture,ScaleMode.ScaleToFit,true,0.0f);3.1GUI圖形用戶界面系統(tǒng)

第11頁3.1.3DrawTexture控件17GUI.DrawTexture(newRect(Screen.width/2,//使用StretchToFill模式繪制的圖片18Screen.height/4,Screen.height/5,Screen.height/7),19texture,ScaleMode.StretchToFill,true,0.0f);20GUI.DrawTexture(newRect(Screen.width/2, //關(guān)閉混合通道效果21Screen.height/2,Screen.height/5,Screen.height/7),22texture2,ScaleMode.StretchToFill,false,0.0f);23GUI.DrawTexture(newRect(Screen.width/4,//開啟混合通道效果24Screen.height/2,Screen.height/5,Screen.height/7),25texture2,ScaleMode.StretchToFill,true,0.0f);3.1GUI圖形用戶界面系統(tǒng)

第12頁3.1GUI圖形用戶界面系統(tǒng)

3.1.4 Box控件Box控件用于繪制圖形化的盒子，在使用GUI系統(tǒng)創(chuàng)建Box控件的時(shí)候，會(huì)有如下部分靜態(tài)方法供開發(fā)人員調(diào)用，沒有返回值。1 staticfunctionBox(position:Rect,text:string):void

2 staticfunctionBox(position:Rect,image:Texture):void

3 staticfunctionBox(position:Rect,content:GUIContent):void

4 staticfunctionBox(position:Rect,text:string,style:GUIStyle):void第13頁3.1GUI圖形用戶界面系統(tǒng)

3.1.4 Box控件第14頁3.1.4 Box控件12GUI.Box(newRect(Screen.width/8.5f,Screen.height/7,13 Screen.height/5,Screen.height/5),"圖形化盒子！"); //使用第一種方法實(shí)現(xiàn)控件14 GUI.Box(newRect(Screen.width/4,Screen.height/7,15 Screen.height/5,Screen.height/5),texture); //使用第二種方法實(shí)現(xiàn)控件16 GUI.Box(newRect(Screen.width/8.5f,Screen.height/2.5f,17 Screen.height/5,Screen.height/5),guiContent); //使用第三種方法實(shí)現(xiàn)控件18 GUI.Box(newRect(Screen.width/4,Screen.height/2.5f, //使用第四種方法實(shí)現(xiàn)控件19 Screen.height/5,Screen.height/5),"這是一個(gè)使用GUIStyle的圖形化盒子！",guiStyle);3.1GUI圖形用戶界面系統(tǒng)

第15頁3.1GUI圖形用戶界面系統(tǒng)

3.1.5 TextField控件TextField控件用于創(chuàng)建單行文本編輯框，在其中可以編輯字符串。在使用GUI系統(tǒng)創(chuàng)建TextField控件的時(shí)候，會(huì)有如下四個(gè)靜態(tài)方法供開發(fā)人員調(diào)用，每當(dāng)用戶編輯字符串時(shí)會(huì)返回被編輯的字符串。1 staticfunctionTextField(position:Rect,text:String):String

2 staticfunctionTextField(position:Rect,text:String,maxLength:int):String

3 staticfunctionTextField(position:Rect,text:String,style:GUIStyle):String

4 staticfunctionTextField(position:Rect,text:String,maxLength:int,style:GUIStyle):String第16頁3.1GUI圖形用戶界面系統(tǒng)

3.1.5 TextField控件第17頁3.1.5 TextField控件10 stringDemo1=GUI.TextField(newRect( //使用第一種方法創(chuàng)建的TextField11 Screen.width/8.5f,Screen.height/9.5f,12 Screen.height/1.5f,Screen.height/8),stringDemo1);13 stringDemo2=GUI.TextField(newRect( //使用第二種方法創(chuàng)建的TextField14 Screen.width/8.5f,Screen.height/3.9f,15 Screen.height/1.5f,Screen.height/8),stringDemo2,30);3.1GUI圖形用戶界面系統(tǒng)

第18頁3.1.5 TextField控件16 stringDemo3=GUI.TextField(newRect( //使用第三種方法創(chuàng)建的TextField17 Screen.width/8.5f,Screen.height/2.5f,18 Screen.height/1.5f,Screen.height/8),stringDemo3,guiStyle);19 stringDemo4=GUI.TextField(newRect( //使用第四種方法創(chuàng)建的TextField20 Screen.width/8.5f,Screen.height/1.8f,21 Screen.height/1.5f,Screen.height/8),stringDemo4,30,guiStyle);22 }}3.1GUI圖形用戶界面系統(tǒng)

第19頁3.1GUI圖形用戶界面系統(tǒng)

3.1.6 PasswordField控件PasswordField控件用于創(chuàng)建一個(gè)用于編輯密碼的文本編輯區(qū)。1 staticfunctionPasswordField(position:Rect,password:String

,maskChar:char):String

2 staticfunctionPasswordField(position:Rect,password:String

,maskChar:char,maxLength:int):String

3 staticfunctionPasswordField(position:Rect,password:String

,maskChar:char,style:GUIStyle):String

第20頁3.1GUI圖形用戶界面系統(tǒng)

3.1.6 PasswordField控件第21頁3.1.6 PasswordField控件publicclassDemo:MonoBehaviour{4 privatestringstringDemo="HelloWorld!"; //聲明字符串用于儲(chǔ)存密碼字段5 voidOnGUI(){ //重寫OnGUI方法，用于控件的繪制6 stringDemo=GUI.PasswordField(newRect(Screen.width/8.5f,Screen.height/9.5f,7 Screen.height/1.5f,Screen.height/8),stringDemo,'&',25);//通過第二種靜態(tài)方法創(chuàng)建控件8 }}3.1GUI圖形用戶界面系統(tǒng)

第22頁3.1GUI圖形用戶界面系統(tǒng)

3.1.7 TextArea控件TextArea控件用于創(chuàng)建一個(gè)多行的文本編輯區(qū)，用于文字編輯。staticfunctionTextArea(position:Rect,text:String):StringstaticfunctionTextArea(position:Rect,text:String,maxLength:int,style:GUIStyle):String第23頁3.1GUI圖形用戶界面系統(tǒng)

3.1.7 TextArea控件第24頁3.1.7 TextArea控件publicclassDemo:MonoBehaviour{4 publicstringstringDemo; //聲明字符串，用于儲(chǔ)存編輯的字符串5 voidOnGUI(){6 stringDemo=GUI.TextArea(newRect(Screen.width/8.5f,//使用第一種靜態(tài)方法創(chuàng)建編輯區(qū)7 Screen.height/9.5f,Screen.height/1.5f,Screen.height/5),stringDemo);8 }}3.1GUI圖形用戶界面系統(tǒng)

第25頁3.1GUI圖形用戶界面系統(tǒng)

3.1.8 Toggle控件Toggle控件用于繪制一個(gè)開關(guān)，通過控制開關(guān)的閉合來執(zhí)行一些具體的操作。Toggle控件用于繪制通過控制開關(guān)的閉合來執(zhí)行一些具體的操作按鈕，類似于單選按鈕。1 staticfunctionToggle(position:Rect,value:bool,text:String):bool

2 staticfunctionToggle(position:Rect,value:bool,image:Texture):bool

3 staticfunctionToggle(position:Rect,value:bool,content:GUIContent,style:GUIStyle):bool第26頁3.1GUI圖形用戶界面系統(tǒng)

3.1.8 Toggle控件第27頁3.1.8 Toggle控件7voidOnGUI(){ //重寫OnGUI方法，用于控件繪制8 if(!texture){ //判斷圖片是否添加9Debug.LogWarning("請?zhí)砑右粡垐D片");//如果沒有添加就打印警告，提示用戶添加10 return;11 }12textBool=GUI.Toggle(newRect(Screen.width/8.5f,//使用第一種靜態(tài)方法創(chuàng)建13Screen.height/7,Screen.height/5,Screen.height/5),textBool,"開關(guān)控件");14textureBool=GUI.Toggle(newRect(Screen.width/4,//使用第二種靜態(tài)方法創(chuàng)建15Screen.height/7,Screen.height/5,Screen.height/5),textureBool,texture);3.1GUI圖形用戶界面系統(tǒng)

第28頁3.1GUI圖形用戶界面系統(tǒng)

3.1.9SelectionGrid控件SelectionGrid控件用于創(chuàng)建一個(gè)網(wǎng)格按鈕。指定創(chuàng)建的按鈕的數(shù)量以及每一排放置的個(gè)數(shù)，控件就會(huì)自動(dòng)調(diào)整按鈕的大小以及布局。1 staticfunctionSelectionGrid(position:Rect,selected:int,texts:String[],xCount:int):int

2 staticfunctionSelectionGrid(position:Rect,selected:int,images:Texture[],xCount:int):int

3 staticfunctionSelectionGrid(position:Rect,selected:int,images:Texture[],xCount:int,style:GUIStyle):int第29頁3.1GUI圖形用戶界面系統(tǒng)

3.1.9SelectionGrid控件第30頁3.1.9SelectionGrid控件4publicTexture[]texture; //聲明紋理數(shù)組5 privatestring[]textStrings=newstring[]{"按鈕一","按鈕二","按鈕三","按鈕四"};//聲明字符串?dāng)?shù)組6 privateintindex; //第一個(gè)控件的索引7 privateintdeindex; //第二個(gè)控件的索引8 voidOnGUI(){9 index=GUI.SelectionGrid(newRect(Screen.width/40,Screen.height/7,Screen.width/5,10 Screen.height/4),index,textStrings,2); //使用第一種靜態(tài)方法，創(chuàng)建2*2的按鈕網(wǎng)格11 deindex=GUI.SelectionGrid(newRect(Screen.width/4,Screen.height/7,Screen.width/5,12 Screen.height/4),deindex,texture,2); //使用第二種靜態(tài)方法，創(chuàng)建2*2的按鈕網(wǎng)格3.1GUI圖形用戶界面系統(tǒng)

第31頁3.1GUI圖形用戶界面系統(tǒng)

3.1.10HorizontalScrollbar控件與VerticalScrollbar控件HorizontalScrollbar控件用于創(chuàng)建一個(gè)水平滾動(dòng)條。VerticalScrollbar控件用于創(chuàng)建一個(gè)垂直滾動(dòng)條。水平（垂直）滾動(dòng)條控件，用戶都可以為其設(shè)定閾值。用戶可以在最大值與最小值之間移動(dòng)。1 staticfunctionHorizontalScrollbar(position:Rect,value:float,size:float,leftValue:float,rightValue:float):float

2 staticfunctionHorizontalScrollbar(position:Rect,value:float,size:float,leftValue:float,rightValue:float, style:GUIStyle):float3 staticfunctionVerticalScrollbar(position:Rect,value:float,size:float,topValue:float,bottomValue:float,style:GUIStyle):float第32頁3.1GUI圖形用戶界面系統(tǒng)

3.1.10HorizontalScrollbar控件與VerticalScrollbar控件第33頁3.1.10HorizontalScrollbar控件與VerticalScrollbar控件3 publicclassDemo:MonoBehaviour{4 privatefloatvalue; //水平滾動(dòng)條當(dāng)前的數(shù)值5 privatefloatvalue2; //垂直滾動(dòng)條當(dāng)前的數(shù)值6 voidOnGUI(){ //重寫OnGUI函數(shù)，用于控件繪制7 value=GUI.HorizontalScrollbar(newRect(Screen.width/13.5f,Screen.height/7,Screen.width8 /7.5f,Screen.height/8),value,0.1f,0.0f,1.0f); //通過第一種方法創(chuàng)建水平滾動(dòng)條控件9 value2=GUI.VerticalScrollbar(newRect(Screen.width/4.5f,Screen.height/9.5f,Screen.width10 /8,Screen.height/3.5f),value2,0.1f,1.0f,0.0f); //通過第二種方法創(chuàng)建垂直滾動(dòng)條控件3.1GUI圖形用戶界面系統(tǒng)

第34頁3.1GUI圖形用戶界面系統(tǒng)3.1.11HorizontalSlider控件與VerticalSlider控件HorizontalSlider控件用于在屏幕上創(chuàng)建一個(gè)水平滑桿，VerticalSlider控件用于創(chuàng)建一個(gè)垂直滑桿。

水平（垂直）滑桿控件，用戶都可以為其設(shè)定閾值。用戶可以拖動(dòng)滑塊在最大值與最小值之間移動(dòng)。1 staticfunctionHorizontalSlider(position:Rect,value:float,leftValue:float,rightValue:float): float2 staticfunctionHorizontalSlider(position:Rect,value:float,leftValue:float,rightValue:float, slider:GUIStyle,thumb:GUIStyle):float3 staticfunctionVerticalSlider(position:Rect,value:float,topValue:float,bottomValue:float):float4 staticfunctionVerticalSlider(position:Rect,value:float,topValue:float,bottomValue:float, slider:GUIStyle,thumb:GUIStyle):float第35頁3.1GUI圖形用戶界面系統(tǒng)

3.1.11HorizontalSlider控件與VerticalSlider控件第36頁3.1.11HorizontalSlider控件與VerticalSlider控件3 publicclassDemo:MonoBehaviour4 {5 privatefloatvalue;//水平滑塊當(dāng)前的數(shù)值6 privatefloatvalue2;//垂直滑塊當(dāng)前的數(shù)值7 voidOnGUI()8 {//重寫OnGUI函數(shù)，用于控件繪制9 value=GUI.HorizontalSlider(newRect(Screen.width/13.5f,Screen.height/7,Screen.width10 /7.5f,Screen.height/8),value,0.0f,1.0f);//創(chuàng)建水平滑塊控件11 value2=GUI.VerticalSlider(newRect(Screen.width/4.5f,Screen.height/9.5f,Screen.width12 /8,Screen.height/3.5f),value2,1.0f,0.0f);//創(chuàng)建垂直滑塊控件3.1GUI圖形用戶界面系統(tǒng)

第37頁3.1GUI圖形用戶界面系統(tǒng)

3.1.11BeginGroup控件和EndGroup控件BeginGroup控件和EndGroup控件需要在一起配合使用以達(dá)到對屏幕上的各個(gè)控件進(jìn)行分組。BeginGroup控件用于開始一個(gè)組，但必須配套EndGroup來結(jié)束一個(gè)組。1 staticfunctionBeginGroup(position:Rect):void2 staticfunctionBeginGroup(position:Rect,text:string):void

3 staticfunctionBeginGroup(position:Rect,image:Texture):void4 staticfunctionBeginGroup(position:Rect,content:GUIContent,style:GUIStyle):void第38頁3.1GUI圖形用戶界面系統(tǒng)

3.1.12BeginGroup控件和EndGroup控件

第39頁3.1.12BeginGroup控件和EndGroup控件3publicclassDemo:MonoBehaviour{4 publicfloatvalue=25.0f; //用于修改Group的位置5 publicfloatvalue2=3.5f;6 voidOnGUI(){7 GUI.BeginGroup(newRect(Screen.width/value,8 Screen.height/9.5f,300,200)); //使用BeginGroup將區(qū)域限制為300*200像素大小9 GUI.Box(newRect(0,0,300,200),10 "第一組\n被限制在400*300的區(qū)域內(nèi)"); //創(chuàng)建一個(gè)和限制區(qū)域相同大小的Box控件11 GUI.Button(newRect(50,50,200,50),"按鈕一");//創(chuàng)建Button控件3.1GUI圖形用戶界面系統(tǒng)

第40頁3.1.12BeginGroup控件和EndGroup控件12 GUI.Button(newRect(50,120,200,50),"按鈕二");13 GUI.EndGroup();//結(jié)束組，需和開始組一起使用14 GUI.BeginGroup(newRect(Screen.width/value2,15 Screen.height/9.5f,300,200)); //使用BeginGroup將區(qū)域限制為300*200像素大小16 GUI.Box(newRect(0,0,300,200),17 "第二組\n被限制在400*300的區(qū)域內(nèi)"); //創(chuàng)建一個(gè)和限制區(qū)域相同大小的Box控件18 GUI.Button(newRect(50,50,200,50),"按鈕三"); //創(chuàng)建Button控件19 GUI.Button(newRect(50,120,200,50),"按鈕四");20 GUI.EndGroup(); //結(jié)束組，需和開始組一起使用3.1GUI圖形用戶界面系統(tǒng)

第41頁3.1GUI圖形用戶界面系統(tǒng)

3.1.13BeginScrollView控件和EndScrollView控件ScrollView控件用于在屏幕上創(chuàng)建滾動(dòng)視圖，通過一片小區(qū)域查看較大區(qū)域的內(nèi)容。BeginScrollView控件和EndScrollView控件需要配合使用成對存在。并且BeginScrollView控件會(huì)返回Vector2類型的返回值，用來記錄滾動(dòng)條被修改的位置。1 staticfunctionBeginScrollView(position:Rect,scrollPosition:Vector2

,viewRect:Rect):Vector22 staticfunctionBeginScrollView(position:Rect,scrollPosition:Vector2

,viewRect:Rect,alwaysShowHorizontal:bool,alwaysShowVertical:bool,horizontalScrollbar:GUIStyle,verticalScrollbar: GUIStyle):Vector23 staticfunctionEndScrollView():void第42頁3.1GUI圖形用戶界面系統(tǒng)

3.1.13BeginScrollView控件和EndScrollView控件

第43頁3.1.13BeginScrollView控件和EndScrollView控件1 usingUnityEngine;2 usingSystem.Collections;3 publicclassDemo:MonoBehaviour{4 privateVector2scrollPosition=Vector2.zero; //聲明一個(gè)Vector2變量，儲(chǔ)存滾動(dòng)的位置5 voidOnGUI(){ //重寫OnGUI函數(shù)，用于控件繪制6scrollPosition=GUI.BeginScrollView(newRect(Screen.width/25,7 Screen.height/9.5f,300,200),scrollPosition,3.1GUI圖形用戶界面系統(tǒng)

第44頁3.1.13BeginScrollView控件和EndScrollView控件8 newRect(0,0,400,300),false,false);//創(chuàng)建一個(gè)300*200的滾動(dòng)視圖，滾動(dòng)內(nèi)容為400*3009 GUI.Box(newRect(0,0,400,300),"Box控件的大小和滾動(dòng)視圖\n控件能夠查看的區(qū)域的大小相同");10 GUI.Button(newRect(0,0,80,50),"左上角");//創(chuàng)建四個(gè)按鈕放置在被查看區(qū)域的四個(gè)角11 GUI.Button(newRect(320,0,80,50),"右上角");12 GUI.Button(newRect(0,250,80,50),"左下角");13 GUI.Button(newRect(320,250,80,50),"右下角");14 GUI.EndScrollView();//創(chuàng)建結(jié)束滾動(dòng)視圖控件15 }}3.1GUI圖形用戶界面系統(tǒng)

第45頁3.1GUI圖形用戶界面系統(tǒng)

3.1.14Window控件Window控件用于創(chuàng)建一個(gè)彈出窗口，窗口浮動(dòng)在普通GUI控件之上。Window控件不同于其他控件，開發(fā)人員需要為GUI控件傳遞給它們一個(gè)單獨(dú)的函數(shù)放進(jìn)窗口。并且可以使用一樣的函數(shù)創(chuàng)建多個(gè)窗口，但每個(gè)窗口都要有唯一的ID。在窗口中創(chuàng)建的其他控件都以Window控件的左上角為原點(diǎn)（0,0），并且Window控件可以獲取焦點(diǎn)。。1 staticfunctionWindow(id:int,clientRect:Rect,func:WindowFunction,text:string):Rect

2 staticfunctionWindow(id:int,clientRect:Rect,func:WindowFunction,image:Texture):Rect3 staticfunctionWindow(id:int,clientRect:Rect,func:WindowFunction,title:GUIContent

,style:GUIStyle): Rect第46頁3.1GUI圖形用戶界面系統(tǒng)

3.1.14Window控件

第47頁3.1.14Window控件1 usingUnityEngine;2 usingSystem.Collections;3 publicclassDemo:MonoBehaviour{4 privateintwindowID=0; //窗口ID，每一個(gè)窗口都要有唯一的ID5 privateintwindowID2=1;6 privateRectwindowRect=newRect(Screen.width/25,7 Screen.height/9.5f,200,150); //窗口在屏幕上的位置以及大小8 privateRectwindowRect2=newRect(Screen.width/4.5f,Screen.height/9.5f,200,150);3.1GUI圖形用戶界面系統(tǒng)

第48頁3.1.14Window控件9 voidOnGUI(){10 windowRect=GUI.Window(windowID,windowRect,11 createWindow,"創(chuàng)建Window控件");//通過第一種靜態(tài)方法創(chuàng)建一個(gè)窗口12 windowRect2=GUI.Window(windowID2,windowRect2,createWindow2,“第二個(gè)Window控件");13 }14 voidcreateWindow(intID){ //該方法需要有一個(gè)形參15 GUI.Button(newRect(50,50,100,80),"按鈕一");//創(chuàng)建Button控件16 }17 voidcreateWindow2(intID){18 GUI.Button(newRect(50,50,100,80),"按鈕二");3.1GUI圖形用戶界面系統(tǒng)

第49頁3.1GUI圖形用戶界面系統(tǒng)

3.1.15skin皮膚皮膚的使用是對Unity中GUI圖形用戶界面系統(tǒng)整體風(fēng)格的修改。點(diǎn)擊創(chuàng)建好的皮膚文件，在Inspector面板處會(huì)顯示出其可以影響到的所有控件如圖3-36所示，展開任何一個(gè)控件菜單會(huì)顯示其可以修改的內(nèi)容，如圖3-37所列第50頁3.1GUI圖形用戶界面系統(tǒng)

3.1.15skin皮膚

第51頁3.1.15skin皮膚效果3.1GUI圖形用戶界面系統(tǒng)

第52頁3.1.15skin皮膚3 publicclassDemo:MonoBehaviour{4 publicGUISkin[]skins; //皮膚樣式數(shù)組，用于儲(chǔ)存多種皮膚5 privateintskinIndex; //皮膚數(shù)組索引，通過索引來改變?yōu)橄鄳?yīng)的皮膚文件6 voidAwake(){ //重寫系統(tǒng)Awake函數(shù)，當(dāng)腳本加載時(shí)會(huì)被調(diào)用7 Debug.LogWarning("請?jiān)诿姘逄幪砑尤齻€(gè)皮膚文件"); //打印警告，該案例需要放置三個(gè)皮膚文件8 return;9 }3.1GUI圖形用戶界面系統(tǒng)

第53頁3.1.15skin皮膚10 voidOnGUI(){ //重寫OnGUI函數(shù)，該函數(shù)用于對圖形控件的繪制11 GUI.skin=skins[skinIndex]; //根據(jù)索引為GUI設(shè)置不同的皮膚文件12 if(GUI.Button(newRect(Screen.width/3,13 Screen.height/9,300,100),"第一種樣式")){//對Button進(jìn)行定位、命名14 skinIndex=0; //當(dāng)點(diǎn)擊此Button時(shí)會(huì)將皮膚樣式更換為第一個(gè)皮膚文件15 }16 if(GUI.Button(newRect(Screen.width/3,Screen.height/2.5f,300,100),"第二種樣式")){17 skinIndex=1; //當(dāng)點(diǎn)擊此Button時(shí)會(huì)將皮膚樣式更換為第二個(gè)皮膚文件18 }19 if(GUI.Button(newRect(Screen.width/3,Screen.height/1.5f,300,100),"第三種樣式")){20 skinIndex=2; //當(dāng)點(diǎn)擊此Button時(shí)會(huì)將皮膚樣式更換為第三個(gè)皮膚文件3.1GUI圖形用戶界面系統(tǒng)

第54頁3.1GUI圖形用戶界面系統(tǒng)

3.1.16GUI圖形用戶界面的變量GUI系統(tǒng)提供了很多圖形組件的變量，通過這些變量，可以對創(chuàng)建的GUI控件進(jìn)行設(shè)置。BeginGroup控件用于開始一個(gè)組，但必須配套EndGroup來結(jié)束一個(gè)組。GUI系統(tǒng)提供的圖形組件變量功能豐富，例如設(shè)置文字顏色、組件背景、是否啟動(dòng)相關(guān)圖形組件等等，通過不同變量間的組合可以創(chuàng)建出精美的游戲界面。第55頁3.1GUI圖形用戶界面系統(tǒng)

3.1.16GUI圖形用戶界面的變量

第56頁3.1.16GUI圖形用戶界面的變量4 publicGUIContentguiContent; //聲明兩個(gè)GUIContent變量5 publicGUIContentguiContent2;6 privateboolguiEnable; //設(shè)置控件啟用、禁用判斷標(biāo)志位7 voidOnGUI(){ //重寫系統(tǒng)OnGUI函數(shù)用于控件繪制8 GUI.color=Color.green;//color變量用于更改其下所有控件的文字、背景顏色9 GUI.BeginGroup(newRect(Screen.width/25,10 Screen.height/9.5f,300,200));//創(chuàng)建一個(gè)開始組控件，將其他控件都放入其中11 GUI.Box(newRect(0,0,300,200),"300*200像素大小的區(qū)域");//放入Box控件12 if(GUI.Button(newRect(50,50,200,50),guiContent)){ //創(chuàng)建Button控件，更改標(biāo)志位13 guiEnable=!guiEnable; //每點(diǎn)擊一次將標(biāo)志位置反14 }3.1GUI圖形用戶界面系統(tǒng)

第57頁3.1.16GUI圖形用戶界面的變量15 GUI.enabled=guiEnable; //設(shè)置enabled變量16GUI.color=Color.yellow;//color變量用于更改其下所有控件的文字、背景顏色17 if(!guiEnable){ //通過判斷按鈕的狀態(tài)來動(dòng)態(tài)改變tooltip變量內(nèi)容18 guiContent2.tooltip="當(dāng)前按鈕已禁用";19 }else{20 guiContent2.tooltip="當(dāng)前按鈕已啟用";21 }22 GUI.Button(newRect(50,120,200,50),23 guiContent2);//創(chuàng)建一個(gè)Button控件，它將受到enbaled和color變量的影響24 GUI.enabled=true; //將enabled置為true，其下控件將不會(huì)被禁用25 GUI.Label(newRect(80,180,200,40),GUI.tooltip);26 GUI.EndGroup(); //結(jié)束組控件，與開始組配合使用3.1GUI圖形用戶界面系統(tǒng)

第58頁3.2.1UGUI控件的創(chuàng)建及案例1.UGUI控件的創(chuàng)建以及重要組件介紹若想創(chuàng)建一個(gè)Button控件按步驟在Unity開發(fā)環(huán)境中點(diǎn)擊菜單GameObject→UI→Button

（1）在EventSystem游戲?qū)ο笊蠏燧d了一系列組件用于控制各類事件。（2）在UGUI另一個(gè)重要組成部分Canvas（畫布）下的每一個(gè)控件都會(huì)包含一個(gè)RectTransform組件。（3）在Canvas控件下的Canvas組件中還可以設(shè)置UI的渲染模式，Unity一共支持三種渲染模式，分別有ScreenSpace-Overlay、ScreenSpace-Camera、WorldSpace。3.2UGUI圖形用戶界面系統(tǒng)

第59頁2.案例效果3.2UGUI圖形用戶界面系統(tǒng)

第60頁3.開發(fā)流程（1）打開Unity集成開發(fā)環(huán)境，利用快捷鍵Ctrl+N新建一場景，按下Ctrl+S快捷鍵保存場景，命名為“Cengcixianshi”。在Assets目錄下新建一文件夾重命名為Texture，將開發(fā)過程中需要用到的圖片資源放進(jìn)該文件夾，本案例中只用到了三張圖片，導(dǎo)入即可。（2）利用創(chuàng)建Button的步驟創(chuàng)建兩個(gè)RawImage（有關(guān)RawImage的知識(shí)我們將在后面介紹）游戲?qū)ο蠛鸵粋€(gè)Button，將兩個(gè)RawImage重命名為RIA和RIB，保證RIA在RIB前面，布局如圖3-52所示。將Canvas游戲?qū)ο蟮匿秩灸Ｊ叫薷臑閃orldSpace，將攝像機(jī)的位置調(diào)整到適當(dāng)位置。3.2UGUI圖形用戶界面系統(tǒng)

第61頁3.開發(fā)流程（3）改變兩個(gè)RawImage的位置，將其調(diào)置Canvas（等于攝像機(jī)）中間。選中RIA游戲?qū)ο髮?zhǔn)備好的圖片拖置RawImage的Texture右側(cè)欄中，并且點(diǎn)擊Color選項(xiàng)將該圖片的透明圖調(diào)為一半。重復(fù)該步驟為RIB拖上紋理圖（不修改透明度）。調(diào)整這兩個(gè)RawImage的大小和位置。（4）在Button游戲?qū)ο蟮淖訉ο骉ext的文本框中輸入Button賦于RIB之上，RIB賦于RIA之上。靜止的正方體遮擋住整個(gè)Canvas（畫布），調(diào)整Text字體的大小以及該Button的位置和大小，如圖3-53所示。并且分別在RIA后面以及RIB前面創(chuàng)建兩個(gè)正方體。（5）將兩個(gè)正方體分別重命名為leftcube和rightcube，調(diào)整兩個(gè)正方體的位置和角度。并且將準(zhǔn)備好的圖片拖置Scene中的游戲?qū)ο笊蠟槠涮砑蛹y理圖，會(huì)發(fā)現(xiàn)Canvas和正方體相互遮擋。點(diǎn)擊運(yùn)行按鈕運(yùn)行游戲。3.2UGUI圖形用戶界面系統(tǒng)

第62頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.2Panel控件和Text控件Panel控件是UGUI中最基本的控件，可以作為整個(gè)界面的背景。而Text控件是可以進(jìn)行文本信息顯示的控件

參數(shù)名含義參數(shù)名含義RichText是否為多格式文本Alignment對齊方式Material字體材質(zhì)VerticalOverflow豎直溢出方式BestFit最佳匹配方式（字體大小會(huì)根據(jù)內(nèi)容多少和Text控件大小自動(dòng)更改）HorizontalOverflow水平溢出方式（文本超出Text控件長度時(shí)的顯示方式）第63頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.2Panel控件和Text控件第64頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.2Panel控件和Text控件（1）打開Unity集成開發(fā)環(huán)境，在Project面板右擊→Create→Folder，新建一個(gè)文件夾，重命名為Font，將下載好的FZSTK.TTF字體導(dǎo)入進(jìn)Font文件夾。重復(fù)該步驟，重命名為Texture。（2）點(diǎn)擊GameObject→UI→Panel，創(chuàng)建一個(gè)Panel控件。選中導(dǎo)入的圖片，在其屬性面板中將將TextureType修改為Sprite（2DandUI），點(diǎn)擊Apply按鈕。將修改后的Sprite拖拽到Panel中Image組件下的SourceImage一欄中。并在Color中將其透明度修改為原來的一半。（3）點(diǎn)擊GameObject→UI→Text，創(chuàng)建兩個(gè)Text控件，并將其中一個(gè)重命名為TextTwo。在Text游戲?qū)ο蟮腡ext組件下的Text文本輸入框中輸入“我是系統(tǒng)自帶的字體”內(nèi)容，并在Color中將顏色改為紅色，字體則選擇默認(rèn)的字體即可。（4）選擇TextTwo游戲?qū)ο螅c(diǎn)擊Font參數(shù)右側(cè)的設(shè)置按鈕，在彈出的窗口中選擇我們所需要的字體，在這里選擇我們剛剛導(dǎo)入的字體。

第65頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.3Button控件該控件的亮點(diǎn)是有多種過渡模式

ColorTint模式——當(dāng)使用該模式時(shí)，可以分別通過Color屬性對按鈕的四個(gè)狀態(tài)進(jìn)行設(shè)置，按鈕在對應(yīng)的狀態(tài)下時(shí)按鈕的顏色就會(huì)變成設(shè)置的顏色，與正常狀態(tài)產(chǎn)生區(qū)別。這是一般按鈕最常用的過渡模式。SpriteSwap模式——這種模式類似于ColorTint模式，只不過切換的不是顏色而是圖片精靈Sprite，分別有三種狀態(tài)可以對應(yīng)不同的圖片精靈。需要注意的是，每種狀態(tài)所對應(yīng)的必然是Sprite。（這句沒理解）圖片的修改方法已在前面介紹過了這里不再重復(fù)。Animation模式——這個(gè)過渡模式是UGUI的特色，該功能可以使UGUI界面系統(tǒng)和Unity中的動(dòng)畫系統(tǒng)進(jìn)行完美的結(jié)合，使用動(dòng)畫狀態(tài)機(jī)可以對按鈕的位置、大小、旋轉(zhuǎn)、圖片等大量參數(shù)進(jìn)行設(shè)置。Animation動(dòng)畫的制作不屬于本章內(nèi)容，第66頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.3Button控件第67頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.3Button控件publicclassButtonMethod:MonoBehaviour{4 publicGameObjectobj; //聲明Text游戲?qū)ο? privateintcounter=1; //聲明計(jì)數(shù)器變量6 voidUpdate(){7 if(counter%2==0){ //當(dāng)計(jì)數(shù)器值可以整除2時(shí)8 obj.SetActive(true); //Text游戲?qū)ο蟮腶ctive置為true9 }else{10 obj.SetActive(false); //否則Text游戲?qū)ο蟮腶ctive置為false11 }}12 publicvoidOnClick(){ /聲明OnClick方法13 counter++; //計(jì)數(shù)器自加第68頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.4Image控件和RawImage控件Image控件是非交互式的圖片精靈Sprite控件，是常用的UGUI控件之一，它可以用來裝飾界面、圖標(biāo)等。Image只能用來顯示圖片Sprite。RawImage控件是用來顯示非交互式的圖像，它不像Image只能顯示圖片的Sprite，它可以顯示任何形式的紋理圖，包括腳本中利用WWW類從某個(gè)URL下載下來的圖像或者紋理，還可以呈現(xiàn)出場景中某個(gè)攝像機(jī)的渲染圖即在UI界面呈現(xiàn)出攝像機(jī)所拍攝的畫面。第69頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.4Image控件和RawImage控件第70頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.4Image控件和RawImage控件（1）首先在Assets目錄下創(chuàng)建一個(gè)名為Texture的文件夾，將我們所需要的圖片資源導(dǎo)入該文件夾。在Project右擊→Create→RenderTexture，創(chuàng)建一個(gè)渲染圖片，重命名為Rendertexture。點(diǎn)擊GameObject→Camera，創(chuàng)建一個(gè)攝像機(jī)。（2）將RenderTexture渲染圖片拖拽到我們剛創(chuàng)建的攝像機(jī)中的TargetTexture中，如圖3-65所示。然后點(diǎn)擊GameObject→UI→Panel，將準(zhǔn)備好的圖片拖追到Panel的Image組件中的SourceImage中，如圖3-66所示。創(chuàng)建一個(gè)背景，并通過Color參數(shù)將透明度調(diào)為原來的一半。

（3）點(diǎn)擊GameObject→3DObject→Cube，調(diào)整該正方體的大小和位置，使其正好位于Camera（我們剛剛創(chuàng)建的攝像機(jī)）將準(zhǔn)備好的圖片拖拽到這個(gè)立方體上為其賦上紋理圖。再為Canvas創(chuàng)建一個(gè)RawImage，將RenderTexture拖拽到RawImage組件下Texture中，點(diǎn)擊運(yùn)行按鈕運(yùn)行游戲。第71頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.5Toggle控件在游戲的UI界面中我們會(huì)見到各種各樣的開關(guān)，UGUI中的Toggle控件就實(shí)現(xiàn)了開關(guān)功能參數(shù)名含義參數(shù)名含義Interactable是否啟用該控件Transition過渡模式Navigation導(dǎo)航，確認(rèn)控件的順序Visualize使導(dǎo)航順序在Scene窗口中可視化IsOn開關(guān)的狀態(tài)（“開”或“關(guān)”）ToggleTransition開關(guān)的消隱模式，有none和Fade（褪色消隱）兩種模式GraphicChackmark子對象的引用Group成組（將一組開關(guān)變成多選一開關(guān)）第72頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.5Toggle控件第73頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.5Toggle控件（1）打開Unity集成開發(fā)環(huán)境，在Project面板右擊→Create→Folder創(chuàng)建文件夾，重命名為Texture，將我們準(zhǔn)備好的紋理圖片資源導(dǎo)入該文件夾。點(diǎn)擊GameObject→UI→Panel，并將導(dǎo)入的Sprite圖片拖到SourceImage中，創(chuàng)建一個(gè)UI背景。（2）按照GameObject→UI→Toggle的步驟創(chuàng)建三個(gè)Toggle，調(diào)整好它們?nèi)齻€(gè)的位置和大小，并將它們的IsOn統(tǒng)一置為false，選中Canvas（畫布），利用快捷鍵Ctrl+Shift+N創(chuàng)建一個(gè)空游戲?qū)ο?，并將三個(gè)Toggle控件拖入該GameObject變成其子對象。（3）將父子關(guān)系調(diào)整完成后，選中GameObject游戲?qū)ο?，點(diǎn)擊Component→UI→ToggleGroup為該游戲?qū)ο筇砑覶oggleGroup組件。最后一步，將GameObject游戲?qū)ο蠓謩e拖拽到三個(gè)Toggle的Group參數(shù)右側(cè)欄中。第74頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.6Slider控件和Scrollbar控件每個(gè)界面都會(huì)存在一些控制部件，比如最常見的聲音的音量調(diào)整、圖像的清晰度等等，這些都需要Slider控件來控制在Slider控件的參數(shù)列表中有一個(gè)需要的注意的參數(shù)就是WholeNumber，該參數(shù)代表滑塊的值是否只能是整數(shù)。Slider控件也可以像Button控件一樣可以掛載腳本用來響應(yīng)事件監(jiān)聽，首先寫一個(gè)腳本，OnValuechanged方法里是對事件的處理，將腳本掛載到Canvas對象上。Scrollbar控件和Slider控件在結(jié)構(gòu)和功能上是比較相似的第75頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.6Slider控件和Scrollbar控件第76頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.6Slider控件和Scrollbar控件（1）點(diǎn)擊GameObject→UI→Slider，在游戲組成對象列表中會(huì)出現(xiàn)Slider控件。修改Slider控件中Background、Fill、Handle游戲?qū)ο蟮念伾担苑奖闩c區(qū)分。利用同樣的步驟創(chuàng)建Text控件，將Text文本輸入框中的內(nèi)容清空。調(diào)整Slider和Text控件的大小和位置。（2）在Project面板創(chuàng)建名為C#的文件夾，并且在該文件夾中創(chuàng)建名為SliderMethod的C#腳本。雙擊該腳本進(jìn)入編輯器編輯腳本。該腳本是對Slider的當(dāng)前值發(fā)生變化時(shí)事件的監(jiān)聽。（3）將編寫好的腳本掛載到Canvas游戲?qū)ο笊?，然后把Slider控件和Text控件分別拖拽到腳本中對應(yīng)的變量中，第77頁3.2UGUI圖形用戶界面系統(tǒng)

3.2.6Slider控件和Scrollbar控件1 usingUnityEngine;2 usingSystem.Collections;3 usingUnityEngine.UI;4 publicclassSliderMethod:MonoBehaviour{5 publicSlidersd;//聲明一個(gè)代表Scene中游戲?qū)ο蟮腟lider變量6 publicTexttext;//聲明一個(gè)代表Scene中游戲?qū)ο蟮腟lider變量