Unity UI之GUI使用

Unity UI之GUI使用

來自專欄 Unity3D從入門到放棄

一：GUI技術介紹

二：常見基礎控制項使用

三：GUILayout自動布局

四：GUI皮膚

---

一：GUI技術介紹

GUI技術看似成為古老的技術，但是Unity5.x之後並沒有取消這種UI傳統的技術。Unity4.6出現的新的UI技術稱之為UGUI，我們會在之後的課程進行講解，他的出現主要是為了重新定義UI的技術規範，統一之前UI插件繁多，混雜，標準不統一的混亂局面，大有一統江湖的目的。但是原生的GUI生命力依然旺盛。在一些早期開發的項目，小型遊戲依然有其存在的價值，簡單易用是它存在的硬道理。

UI是遊戲組成的重要部分，遊戲的很多操作直接通過UI控制。無論攝像機拍到的圖像怎麼變幻，GUI永遠顯示在屏幕上，不受變形，碰撞，光照等信息影響。

寫GUI腳本，必須注意兩個重要特徵：

（1）GUI腳本控制項必須定義在腳本文件的OnGUI事件函數中

（2）GUI每一幀都會調用

void Start () { } // Update is called once per frame void Update () { print ("update"); } void OnGUI() { print ("OnGUI"); }

二：常見基礎控制項使用

GUI基本的控制項如下圖所示：

public class Demo : MonoBehaviour { private string _StrText=""; private string _StrPW=""; private int _IntSelectIndex=0; private bool _BoolCheck1=false; private bool _BoolCheck2=false; private float value=0; private int min=0; private int max=100; void OnGUI() { GUI.Label (new Rect(0,0,100,30),"I am the Label"); _StrText = GUI.TextField (new Rect(0,50,100,30),_StrText); _StrPW = GUI.TextField (new Rect (0, 100, 100, 30), _StrPW); GUI.Button (new Rect(0,150,50,30),」Sure");_IntSelectIndex=GUI.Toolbar(new Rect(0,200,200,30),_IntSelectIndex,new string[]{"Duty","Equip","Peopel"} ); _BoolCheck1 = GUI.Toggle (new Rect(0,260,100,50),_BoolCheck1,"zhuangbei"); _BoolCheck2 = GUI.Toggle (new Rect(0,300,100,50),_BoolCheck2,"renyuan"); value = GUI.HorizontalSlider (new Rect (0, 350, 200, 50), value, max, min);}}

三：GUILayout自動布局

前面我們進行布局的時候，會發現每次都需要輸入new Rect（），裡面包含四個坐標。為了解決這個煩人的問題，Unity公司提供了一個相對簡單的布局方案。即每個控制項的寬頻高度按照一些字體的大小進行統一計算。位置採取靠左對齊，一個控制項佔據一行的原則。

void OnGUI() { GUILayout.BeginArea (new Rect (100, 200, 300, 400)); GUILayout.Label ("I am label"); GUILayout.Label ("hello world"); GUILayout.Label ("Hello Mornig"); GUILayout.EndArea (); } GUILayout.BeginArea (new Rect (100, 200, 300, 400)); //相當於布局一個盒子，盒子使用Rect進行定義，如果字體太多，超出範圍則不顯示。 private bool _BoolDisplay=false; private bool _BoolDisplayWindow=false; void OnGUI() { if (GUILayout.Button ("Show")) { GUILayout.Label("I cant show in window"); } if (GUILayout.Button (" xianshi")) { _BoolDisplay=true; } if (_BoolDisplay) { GUILayout.Label("I can be show"); } if (GUILayout.Button ("Show Window")) { _BoolDisplayWindow=true; } if (_BoolDisplayWindow) { GUILayout.Window(0,new Rect(100,100,200,200),AddWindow,"MyWindow"); } } void AddWindow(int winId) { if (GUILayout.Button ("Exit")) { _BoolDisplayWindow=false; } }

四：GUI皮膚

1:我們使用GUI.DrawTexture()方法進行貼圖的繪製輸出，另外，我們還可以結合Resource.Load()類靜態方法進行動態提取項目視圖中存在的貼圖資源。

public class Demo4 : MonoBehaviour { //public Texture2D Txt2D_bird; private Texture2D _Txt2D_bird; // Use this for initialization void Start () { _Txt2D_bird = (Texture2D)Resources.Load ("A"); } // Update is called once per frame void Update () { } void OnGUI() { GUI.DrawTexture (new Rect(Screen.width/2-_Txt2D_bird.width/2,Screen.height/2-_Txt2D_bird.height/2,_Txt2D_bird.width, _Txt2D_bird.height),_Txt2D_bird); }}

之前我們設計的界面，美觀程度太低了，真正的遊戲項目不可能接受醜陋的界面的，那麼我們該如何去做呢？Unity已經為我們提供好了一個解決方案，答案就是使用GUISkin

（1）首先項目視圖中滑鼠右鍵點擊Create->GUI SKin,然後選擇CustomStyle進行貼圖的賦值，需要幾個就進行賦值幾個即可。

（2）代碼中public GUISkin prijectSkin，進行連接即可。

public class Demo5 : MonoBehaviour { public GUISkin projectSkin; public Texture2D Text2D_Btn1; // Use this for initialization void Start () {} // Update is called once per frame void Update () { } void OnGUI() { GUI.skin = projectSkin; GUI.Button(new Rect(0,0,100,100),"",projectSkin.GetStyle("Button1")); }}

2:滾動視圖的使用

滾動視圖是一種非常大眾化的界面，大部分遊戲都存在滾動視圖的影子。

//Parameters（參數）：

position ： Rect —— 滾動視圖在屏幕上的矩形位置；

scrollPosition : Vector2 —— 用來顯示滾動位置；

viewRect : Rect —— 滾動視圖內使用的矩形；

alwayShowHorizontal : boolean —— 可選參數！總是顯示水平滾動條，如果設置為false或者不設置時，只用當內矩形區域寬於外矩形區域時才顯示；

alwayShowVertical : boolean —— 可選參數！總是顯示垂直滾動條，如果設置為false或者不設置時，只用當內矩形區域高於外矩形區域時才顯示；

horizontalScrollbar : GUIStyle —— 用於水平滾動條的可選設置，如果不設置，水平滾動條將使用當前的GUISkin；

verticalScrollbar : GUIStyle —— 用於垂直滾動條的可選設置，如果不設置，垂直滾動條將使用當前的GUISkin；

Returns（返回）：Vector2 二維向量—— 被修改的滾動位置scrollPosition。返回值應該賦予你的變數；

Description（描述）：在GUI中開始一個滾動視圖，滾動視圖讓你在屏幕上產生一個小的區域，使用滾動條可以查看一個大的區域。

private string[] infos= new string [5];? Vector2 scrollPosition; void OnGUI(){ //開始滾動視圖 ? scrollPosition = GUI.BeginScrollView(? new Rect(10,10,400,400),? scrollPosition,new Rect(10,10,700,700)? ,false,false); ? //標籤內容 ? GUI.Label(new Rect(10,10,770,40),infos[0]); ? GUI.Label(new Rect(10,50,770,40),infos[1]); ? GUI.Label(new Rect(10,90,770,40),infos[2]); ? GUI.Label(new Rect(10,130,770,60),infos[3]); ? GUI.Label(new Rect(10,190,770,40),infos[4]); ?? //結束滾動視圖 ? GUI.EndScrollView(); }

3:網格布局的使用

for (int i = 0; i < 5; i++) {? for (int j = 0; j < 5; j++) {? if (GUI.Button (new Rect (100 * j, 100 * i,80, 80),"", mySkin.GetStyle ("Coin1"))) {? ButtonClicked (i * 5 + j);? }? }? } void ButtonClicked(int tag){? print (tag);? }

4:遊戲暫停與繼續

public class NewBehaviourScript : MonoBehaviour {?? public float moveSpeed = 2.0f;? ?void Update ()? {? transform.Translate (new Vector3(0,0,?moveSpeed* Time.deltaTime));? }? void OnGUI ()? {? if (GUI.Button (new Rect (140, 0, 100, 50), "暫停")) {? Time.timeScale = 0;? }? if (GUI.Button (new Rect (280, 0, 100, 50), "繼續")) {? Time.timeScale = 1;? }? }?}

推薦閱讀：