天天看點

GUI學習筆記

一.概述

  IMGUI(即時模式遊戲使用者互動界面)一般簡稱GUI,是代碼驅動的UI系統,主要作為程式員的調試工具、為腳本建立自定義檢視面闆、建立新的編輯器視窗和工具以拓展Unity等,不會用于制作與玩家互動的界面。在繼承MonoBehaviour的腳本中調用調用GUI提供的方法,在OnGUI函數中書寫GUI的相關代碼。

二.GUI控件繪制的共同點

  1.都是GUI類提供的靜态函數;

  2.參數都基本相同,常見參數如下:

    位置參數:Rect參數,x、y位置,w、h尺寸;

    顯示文本:string參數;

    圖檔資訊:Texture參數;

    綜合資訊:GUIContent參數;

    自定義樣式:GUIStyle參數;

  3.每種空間都有多種重載,但是位置資訊和顯示資訊是必備參數。

三.各種GUI控件

1.文本控件

GUI學習筆記

使用GUI的Label靜态函數建立文本控件。Rect是一個代表GUI位置和大小的結構體,GUIContent是一個記錄GUI内容的類,下面是它們的構造函數:

GUI學習筆記

Rect可以使用其他Rect構造,也可以傳入兩個分别代表位置和大小的Vector2結構體構造,也可以分開傳入位置坐标x、y和大小w、h。

GUI學習筆記

 GUIContent的構造函數比較多,其中text代表其中包含的文本,image代表圖檔資訊,tooltip是提示資訊(滑鼠選中後可以得到),但是GUIContent的内容較少,隻有上面說的這3種屬性,沒有public的方法,下面是Texture的構造函數:

GUI學習筆記

這個類隻有一個protected的無參構造,是以沒有繼承這個類是無法new的。我們一般采用聲明Texture後拖動指派或者使用代碼尋找圖檔資源的方式擷取資源。

文本控件的簡單使用如下:

GUI學習筆記

可以看到Game視圖中最左上角的位置坐标是(0,0),圖中寬100像素,高20像素的文字以左上角為錨點。

一般在使用的過程中,我們可以提前将要使用到的Rect、Image等在OnGUI函數的外部聲明為public類型,在Inspector面闆靈活地調整。

 2.按鈕控件

GUI學習筆記

按鈕控件和文本控件類似,重載函數的參數的意思也是相同的。按鈕控件需要被監聽。

Button函數的傳回值是bool類型,代表是否被點選,這裡的bool值為true的時刻是OnMouseButtonUp。同時GUI還提供了長按的按鈕:

GUI學習筆記

這種按鈕傳回的bool值為true的時刻是OnMouseButton。

3.單選框控件

GUI學習筆記

單選框參數中都有一個bool值value,這代表預設是否選中,每次點選會傳回一個bool值,代表點選後是否選中,是以這個控件的使用需要額外聲明一個bool類型的變量,否則無法更改選中狀态,如下:

每次選中後傳回值會被isSelected變量記錄下來,下次根據這個變量渲染toggle,就改變了選中狀态。

單選框的拓展:多選框。多選框是多個單選框合成,使用int辨別目前選中的選項:

每次進行3個if判斷時會渲染出相應的單選框,單選框是否選中根據int辨別決定,當選中目前辨別後會傳回true,這樣進入if語句将選中辨別作出相應修改,下次渲染其他兩個單選框就不會是選中狀态,之後選中其他單選框也會進入相應的if語句作出相應的修改。

4.輸入框控件

GUI學習筆記

使用TextField函數添加輸入框控件,其中text參數的意思是預設的輸入内容。和toggle的思路類似,TextField的傳回值為string類型,就是剛才輸入的内容,也需要使用一個額外的變量記錄這個值,每次進入OnGUI函數渲染時将這個變量作為text參數傳入,這樣輸入了内容後輸入框中的内容才會發生改變。maxLength代表最大輸入長度,超過這個長度的字元會被自動删除。

輸入框進化版:密碼輸入框。

GUI學習筆記

密碼輸入框不會顯示剛才輸入的内容,會使用maskChar替換掉剛才輸入的内容。

5.拖動條控件

GUI學習筆記

水準拖動條控件,拖動條的值在leftValue和rightValue之間變化,傳回值代表目前拖動後的值。按照使用套路,這裡還是需要額外聲明一個float變量,每次将傳回值儲存,并在下一次渲染時設定為value參數。

GUI學習筆記

豎直拖動條控件,和水準拖動條的使用方法相同。

6.圖檔控件

GUI學習筆記

使用DrawTexture函數顯示圖檔,參數scaleMode是一個枚舉類型,指縮放模式,alphaBlend是混合透明參數,控制圖檔是否開啟透明通道,borderRadius指寬高比,不設定使用圖檔本身寬高比,設定後根據設定的寬高比顯示圖檔。

7.框控件

使用Box函數添加一個框,這個框不可被選中,可以用于繪制背景圖檔或者區分區域。

四.複合控件

1.工具欄控件

GUI學習筆記

工具欄一般有多個按鈕,選中一個按鈕其他按鈕會變為未選中狀态,可以了解為對多選框實作的封裝,參數中數組的值是每個按鈕的顯示(文本或圖檔)。控件的傳回值是int,可以配合switch...case...使用這個控件。

2.選擇網格控件

GUI學習筆記

這個控件相對toolbar多了一個水準方向最多按鈕數量的xCount屬性,傳回值和其他參數類型的作用相同。可以使用SelectionGrid将水準方向最多控件設定為1,實作豎向的工具欄。

3.分組控件

GUI學習筆記
GUI學習筆記

一般隻使用倒數第3個函數重載,可以了解為為控件增加一個父對象,這個對象的Rect資訊會控制被包裹的控件的位置和顯示(如果包裹控件太小,會導緻被包裹控件顯示不全)。

4.滾動清單

GUI學習筆記
GUI學習筆記

參數意思:position:整個滾動條的位置和大小資訊,scrollPosition:顯示的位置,viewRect:顯示内容框的位置和大小資訊。使用Toolbar(工具欄)為滾動清單添加文本或者圖檔資訊。

5.視窗繪制

GUI學習筆記

繪制視窗需要為視窗指定編号id,clientRect是視窗的位置和大小等資訊,func參數是一個用于繪制視窗内容的委托函數。視窗的傳回值為Rect類型,是移動後的視窗位置,但是要想實作視窗拖動,除了視窗位置重新指派為上一幀的傳回值外,還需要在func中調用DragWindow函數:

GUI學習筆記

重載函數的position參數表示視窗能拖動的範圍。

GUI學習筆記

模态視窗和視窗的差別在于模态視窗處于最上層,當此視窗顯示時,其他的UI控件會失效。

五.自定義整體樣式

GUI學習筆記

 在GUI類中提供了一些屬性,其中的某些public的屬性對應了GUI的全局設定:

color:全局顔色;backgroundColor:背景顔色;contentColor:文本顔色;skin:皮膚(在project視窗中可以右鍵建立GUISkin檔案,在這個檔案中設定GUI中的所有樣式設定,相當于建立了一個GUI樣式模闆)(GUI控件的樣式首先找每個GUI具體每個控件單獨的GUIStyle,再看GUISkin進行整體設定);

六.GUILayout類

GUILayout中的方法幾乎和GUI相同,相當于拓展了GUI,這個類提供了自動布局的功能。這個類主要用于編輯器開發,用于制作遊戲UI不合适。

繼續閱讀