【Unity】8.2 GUI Style和GUISkin

分類：Unity、C#、VS2015

創建日期：2016-04-27

一、自定義GUI Control

功能控件 (Functional Control) 是游戲必要的，而這些控件的外觀對游戲的美感非常重要。在 UnityGUI 中，可以微調控件 (Control) 外觀的很多細節。

默認情況下，當你在未定義 GUIStyle 時創建一個控件 (Control)，將應用 Unity 的默認 GUIStyle。這種樣式內置於 Unity 中，且可用於對已發布的游戲進行快速原型設計，你也可以選擇不對控件 (Control) 進行樣式化。

如果你要處理大量不同的 GUIStyles，可以在單個 GUISkin 中定義所有 GUIStyles。GUISkin 不僅僅只是 GUIStyles 的集合。

二、樣式 (Style) 如何改變“GUI 控件”(GUI Control) 的外觀

GUIStyles 模仿網頁瀏覽器的層疊樣式表 (CSS)。很多 CSS 方法得到調整，包括樣式的個體狀態屬性的差異化和內容與外觀的分離。

其中，控件 (Control) 定義內容，而樣式 (Style) 定義外觀。這樣你就可以創建組合，比如看起來像常規 按鈕 (Button) 的功能切換鍵 (Toggle)。

三、皮膚 (Skin) 與樣式 (Style) 的區別

如上文所述，GUISkins 為 GUIStyles 的集合。樣式 (Style) 定義 GUI 控件 (GUI Control) 的外觀。如果您要使用樣式 (Style)，也可以不使用皮膚 (Skin)。

1、處理樣式 (Style)

所有“GUI 控件”(GUI Control) 都具有一個可選的最后參數：用於顯示控件的 GUIStyle。如果將其忽略，則使用 Unity 的默認 GUIStyle。樣式處理通過將控件類型名稱作為字符串應用而在內部進行，因此 GUI.Button() 使用 "按鈕" 樣式，GUI.Toggle() 使用 "toggle" 樣式，等等。但您可以通過將控件的默認 GUIStyle 指定為最后參數來覆蓋默認 GUIStyle。

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    void OnGUI () {
        // 創建使用 "框" GUIStyle 的標簽
        GUI.Label (new Rect (0,0,200,100), "Hi - I'm a label looking like a box", "box");

        // 創建使用"“切換鍵" GUIStyle 的按鈕
        GUI.Button (new Rect (10,140,180,20), "This is a button", "toggle");
    }
}

2、創建一個公共變量 GUIStyle

當你聲明一個公共 GUIStyle 變量時，該樣式 (Style) 的所有元素都將在檢視器 (Inspector)中顯示。您可以在此編輯所有不同的值：

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    public GUIStyle customButton;

    void OnGUI () {
        // 創建按鈕。提交以上定義的 GUIStyle 作為使用的樣式
        GUI.Button (new Rect (10,10,150,20), "I am a Custom Button", customButton);
    }
}

3、改變不同的樣式元素

當你已聲明了 GUIStyle，就可以在“檢視器” (Inspector) 中修改此樣式。檢視器中有大量的狀態 (State) 進行定義，並將其應用到任何類型的控件中。

注意：在應用指定的文本顏色 (Text Color) 之前，必須為每個控件狀態 (Control State) 分配背景 (Background) 顏色。

四、處理皮膚 (Skins)

Unity默認的控件外觀比較簡單。在游戲開發過程中，開發者都會根據游戲的類型和內容來沒計一套個性化的游戲界面。在Unity中，可以通過配置GUISkin來更改控件的默認樣式，從而制作出符合游戲風格的控件外觀。

GUISkin含有多種不同的樣式 (Styles)，基本上可完全更新所有 GUI 控件 (GUI Control) 的外觀設計。

1、創建一個新的 GUISkin

要創建一個 GUISkin，請從菜單欄選擇資源 (Assets)->創建 (Create)->GUI 皮膚 (GUI Skin) 這將在您的“工程文件夾”(Project Folder) 里面創建一個新的“GUI 皮膚”(GUI Skin)。選擇 GUI 皮膚可查看“檢視器”(Inspector) 中的皮膚 (Skin) 定義的所有 GUIStyles。

2、將皮膚應用到 GUI

要使用創建的皮膚，請將其分配到 OnGUI() 函數中的 GUI.skin：

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    public GUISkin mySkin;

    void OnGUI () {
        // 將該皮膚分配為當前所用的皮膚。
        GUI.skin = mySkin;

        // 創建按鈕。這將從分配到 mySkin 的皮膚獲得默認的“按鈕”樣式。
        GUI.Button (new Rect (10,10,150,20), "Skinned Button");
    }
}

這樣一來，通過一次 OnGUI() 調用就可隨意切換皮膚：

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    public GUISkin mySkin;
    private bool toggle = true;

    void OnGUI () {
        // 將該皮膚分配為當前所用的皮膚
        GUI.skin = mySkin;

        // 創建切換鍵。這將從分配到 mySkin 的皮膚獲得“按鈕”樣式。
        toggle = GUI.Toggle (new Rect (10,10,150,20), toggle, "Skinned Button", "button");

        // 將當前皮膚分配到 Unity 的默認皮膚
        GUI.skin = null;

        // 創建按鈕。這將從內置皮膚獲得默認的“按鈕”樣式。
        GUI.Button (new Rect (10,35,150,20), "Built-in Button");
    }
}

3、示例

GUISkin在使用前需要先創建和配置。創建方法是在Project視圖的上方單擊Create按鈕，在彈出菜單中單擊GUISkin選項。另一種辦法是打開菜單欄中的【Assets】->【Create】->【GUISkin】來創建。

新建的GUISkin文件會顯示在Project視圖中，單擊GUISkin文件，在Inspector視圖中可設置其參數。

在一個GUISkin中，可對所有GUI控件的樣式進行設置，例如Button、Toggle等。

下面以Button為例，說明如何通過GUISkin設置其樣式。

假設現在需要更換按鈕的背景圖片，以及設置按鈕上的字體為楷體，可先制作下面的圖片素材：

首先把按鈕的背景圖和字體文件放入Project的Assets下，然后查看GUISkin的檢視器視圖，單擊【Button】折疊項，展開Button的樣式參數，更改Normal、Hover、Active、On Normal、OnHover、On Active、Font、Font Size這幾個參數。

現在可以試試修改后的效果。在CUI腳本中聲明一個類型為CUISkin的變量，在Inspector視圖中將該變量的值沒置為剛修改好的CUISkin文件。

在繪制控件代碼前將變量賦值給CUI.skin參數，則控件就會以用戶配置的GUISkin樣式來繪制，示例代碼如下：

public GUISkin myGUISkin;

void OnGUI()

{

GUI.skin=myGUISkin;

GUI.Button(Rect(60,50,240,60),"自定義按鈕");

}

按【播放】按鈕，就會看到下面的效果：