UGUI-IMGUI 基礎(chǔ)知識(shí)
本部分將介紹使用 Unity 的即時(shí)模式 GUI 系統(tǒng) (IMGUI) 來(lái)編寫__控件__腳本的必要條件。
使用 IMGUI 創(chuàng)建控件
Unity 的 IMGUI 控件使用一個(gè)名為?OnGUI()?的特殊函數(shù)。只要啟用包含腳本，就會(huì)在每幀調(diào)用?OnGUI()?函數(shù)，就像?Update()?函數(shù)一樣。
IMGUI 控件本身結(jié)構(gòu)非常簡(jiǎn)單。此結(jié)構(gòu)如以下示例中所示。
/* 示例關(guān)卡加載程序 */?
// JavaScript?
function OnGUI () { ? ?
// 創(chuàng)建背景框 ? ?
GUI.Box (Rect (10,10,100,90), "Loader Menu"); ? ?
// 創(chuàng)建第一個(gè)按鈕。如果按下此按鈕，則會(huì)執(zhí)行 Application.Loadlevel (1) ? ?
if (GUI.Button (Rect (20,40,80,20), "Level 1")) { ? ? ? ?
Application.LoadLevel (1); ? ?
} ? ?
// 創(chuàng)建第二個(gè)按鈕。 ? ?
if (GUI.Button (Rect (20,70,80,20),"Level 2")) { ? ? ? ?
Application.LoadLevel (2); ? ?
} }
//C#?
using UnityEngine;?
using System.Collections;?
public class GUITest : MonoBehaviour { ? ? ? ? ? ? ? ?
void OnGUI () { ? ? ? ?
// 創(chuàng)建背景框 ? ? ? ?
GUI.Box(new Rect(10,10,100,90), "Loader Menu"); ? ? ? ? ? ?
// 創(chuàng)建第一個(gè)按鈕。如果按下此按鈕，則會(huì)執(zhí)行 Application.Loadlevel (1) ? ? ? ?if(GUI.Button(new Rect(20,40,80,20), "Level 1")) { ? ? ? ? ? ?
Application.LoadLevel(1); ? ? ??
?} ? ? ? ? ??
?// 創(chuàng)建第二個(gè)按鈕。 ? ? ? ?
if(GUI.Button(new Rect(20,70,80,20),"Level 2")) { ? ? ? ? ? ?
Application.LoadLevel(2); ? ? ? ?
}} }
此示例是一個(gè)可運(yùn)行的完整關(guān)卡加載程序。如果復(fù)制/粘貼此腳本并將其附加到__游戲?qū)ο骭_，則在進(jìn)入__播放模式__時(shí)，將顯示以下菜單：
讓我們仔細(xì)研究一下示例代碼：
第一個(gè) GUI 行?GUI.Box (Rect (10,10,100,90), “Loader Menu”);?將顯示一個(gè)標(biāo)題文本為 “Loader Menu” 的?Box?控件。該語(yǔ)句遵循典型的 GUI 控件聲明模式（我們接下來(lái)馬上探討此主題）。
下一個(gè) GUI 行是?Button?控件聲明。請(qǐng)注意，該聲明與 Box 控件聲明略有不同。具體而言，整個(gè) Button 聲明都位于?if?語(yǔ)句內(nèi)。當(dāng)游戲運(yùn)行并單擊 Button 時(shí)，此?if?語(yǔ)句返回 true，并執(zhí)行?if?代碼塊中的所有代碼。
由于每幀都會(huì)調(diào)用?OnGUI()?代碼，因此無(wú)需顯式創(chuàng)建和銷毀 GUI 控件。聲明控件的行與創(chuàng)建控件的行是同一行。如果需要在特定時(shí)間顯示控件，可以使用任何類型的腳本邏輯來(lái)執(zhí)行此操作。
/* 閃爍按鈕示例 */?
// JavaScript?
function OnGUI () { ? ?
if (Time.time % 2 < 1) { ? ? ? ?
if (GUI.Button (Rect (10,10,200,20), "Meet the flashing button")) { ? ? ? ? ? ?
print ("You clicked me!"); ? ? ? ?
}} }?
// C#?
using UnityEngine;?
using System.Collections;?
public class GUITest : MonoBehaviour { ? ? ? ? ? ? ? ?
void OnGUI () { ? ? ? ?
if (Time.time % 2 < 1) { ? ? ? ? ? ?
if (GUI.Button (new Rect (10,10,200,20), "Meet the flashing button")) { ? ? ? ? ? ? ? ?
print ("You clicked me!"); ? ? ? ? ? ?
}}}}
此處，每隔一秒才調(diào)用一次?GUI.Button()，因此按鈕會(huì)出現(xiàn)再消失。當(dāng)然，用戶只能在按鈕可見時(shí)單擊按鈕。
如您所見，可使用任何所需的邏輯來(lái)控制 GUI 控件的顯示和運(yùn)行時(shí)間?，F(xiàn)在我們將探討每個(gè)控件的聲明的細(xì)節(jié)。
控件剖析
聲明 GUI 控件時(shí)，需要三段關(guān)鍵信息：
Type?(Position,?Content)
可以看到，此結(jié)構(gòu)是一個(gè)帶有兩個(gè)參數(shù)的函數(shù)。我們現(xiàn)在將探討此結(jié)構(gòu)的細(xì)節(jié)。
Type
Type?是指?Control Type（控件類型）__；通過調(diào)用 Unity 的?GUI 類或?GUILayout 類中的函數(shù)來(lái)聲明該類型（在本指南的布局模式部分對(duì)此進(jìn)行了詳細(xì)討論）。例如，__GUI.Label()?將創(chuàng)建非交互式標(biāo)簽。本指南稍后的控件部分將介紹所有不同的控件類型。
Position
Position?是所有?GUI?控件函數(shù)中的第一個(gè)參數(shù)。此參數(shù)本身隨附一個(gè)?Rect()?函數(shù)。Rect()?定義四個(gè)屬性：__最左側(cè)位置、最頂部位置、總寬度、總高度。所有這些值都以__整數(shù)__提供，對(duì)應(yīng)于像素值。所有 UnityGUI 控件均在__屏幕空間 (Screen Space)?中工作，此空間表示已發(fā)布的播放器的分辨率（以像素為單位）。
坐標(biāo)系基于左上角。Rect(10, 20, 300, 100)?定義一個(gè)從坐標(biāo) 10,20 開始到坐標(biāo) 310,120 結(jié)束的矩形。值得再次強(qiáng)調(diào)的是，__Rect()__ 中的第二對(duì)值是總寬度和高度，而不是控件結(jié)束的坐標(biāo)。這就是為什么上面提到的例子結(jié)束于 310,120 而不是 300,100。
可使用?Screen.width?和?Screen.height?屬性來(lái)獲取播放器中可用的屏幕空間的總尺寸。以下示例可能有助于解釋如何完成此操作：
/* Screen.width 和 Screen.height 示例 */
// JavaScript
function OnGUI()
{
? ? GUI.Box(Rect(0, 0, 100, 50), "Top-left");
? ? GUI.Box(Rect(Screen.width - 100, 0, 100, 50), "Top-right");
? ? GUI.Box(Rect(0, Screen.height - 50, 100, 50), "Bottom-left");
? ? GUI.Box(Rect(Screen.width - 100, Screen.height - 50, 100, 50), "Bottom-right");
}
// C#
using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour
{
? ? void OnGUI()
? ? {
? ? ? ? GUI.Box(new Rect(0, 0, 100, 50), "Top-left");
? ? ? ? GUI.Box(new Rect(Screen.width - 100, 0, 100, 50), "Top-right");
? ? ? ? GUI.Box(new Rect(0, Screen.height - 50, 100, 50), "Bottom-left");
? ? ? ? GUI.Box(new Rect(Screen.width - 100, Screen.height - 50, 100, 50), "Bottom-right");
? ? }
}
Content
GUI 控件的第二個(gè)參數(shù)是要與控件一起顯示的實(shí)際內(nèi)容。通常會(huì)希望在控件上顯示一些文本或圖像。要顯示文本，請(qǐng)將字符串作為 Content 參數(shù)傳遞，如下所示：
/* 字符串內(nèi)容示例 */
// JavaScript
function OnGUI()
{
? ? GUI.Label(Rect(0, 0, 100, 50), "This is the text string for a Label Control");
}
// C#
using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour
{
? ? void OnGUI()
? ? {
? ? ? ? GUI.Label(new Rect(0, 0, 100, 50), "This is the text string for a Label Control");
? ? }
}
要顯示圖像，請(qǐng)聲明?Texture2D?公共變量，并將變量名稱作為 Content 參數(shù)傳遞，如下所示：
/* Texture2D 內(nèi)容示例 */
// JavaScript
var controlTexture : Texture2D;
function OnGUI()
{
? ? GUI.Label(Rect(0, 0, 100, 50), controlTexture);
}
// C#
public Texture2D controlTexture;
? ...
void OnGUI()
{
? ? GUI.Label(new Rect(0, 0, 100, 50), controlTexture);
}
以下是更接近真實(shí)情況的示例：
/* 按鈕內(nèi)容示例 */
// JavaScript
var icon : Texture2D;
function OnGUI()
{
? ? if (GUI.Button(Rect(10, 10, 100, 50), icon))
? ? {
? ? ? ? print("you clicked the icon");
? ? }
? ? if (GUI.Button(Rect(10, 70, 100, 20), "This is text"))
? ? {
? ? ? ? print("you clicked the text button");
? ? }
}
// C#
using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour
{
? ? public Texture2D icon;
? ? void OnGUI()
? ? {
? ? ? ? if (GUI.Button(new Rect(10, 10, 100, 50), icon))
? ? ? ? {
? ? ? ? ? ? print("you clicked the icon");
? ? ? ? }
? ? ? ? if (GUI.Button(new Rect(10, 70, 100, 20), "This is text"))
? ? ? ? {
? ? ? ? ? ? print("you clicked the text button");
? ? ? ? }
? ? }
}
此外還可通過第三個(gè)選項(xiàng)在 GUI 控件中一起顯示圖像和文本。為此，可提供?GUIContent?對(duì)象作為 Content 參數(shù)，并定義要在 GUIContent 中顯示的字符串和圖像。
/* 使用 GUIContent 來(lái)顯示圖像和字符串 */
// JavaScript
var icon : Texture2D;
function OnGUI()
{
? ? GUI.Box(Rect(10, 10, 100, 50), GUIContent("This is text", icon));
}
// C#
using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour
{
? ? public Texture2D icon;
? ? void OnGUI()
? ? {
? ? ? ? GUI.Box(new Rect(10, 10, 100, 50), new GUIContent("This is text", icon));
? ? }
}
此外，還可在 GUIContent 中定義__工具提示 (Tooltip)__，當(dāng)鼠標(biāo)懸停在 GUI 上時(shí)將工具提示顯示在 GUI 中的其他位置。
/* 使用 GUIContent 來(lái)顯示工具提示 */
// JavaScript
function OnGUI()
{
? ? // 此行將 "This is the tooltip" 傳入 GUI.tooltip
? ? GUI.Button(Rect(10, 10, 100, 20), GUIContent("Click me", "This is the tooltip"));
? ? // 此行讀取并顯示 GUI.tooltip 的內(nèi)容
? ? GUI.Label(Rect(10, 40, 100, 20), GUI.tooltip);
}
// C#
using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour
{
? ? void OnGUI()
? ? {
? ? ? ? // 此行將 "This is the tooltip" 傳入 GUI.tooltip
? ? ? ? GUI.Button(new Rect(10, 10, 100, 20), new GUIContent("Click me", "This is the tooltip"));
? ? ? ? // 此行讀取并顯示 GUI.tooltip 的內(nèi)容
? ? ? ? GUI.Label(new Rect(10, 40, 100, 20), GUI.tooltip);
? ? }
}
如果夠大膽的話，也可以使用 GUIContent 來(lái)顯示字符串、圖標(biāo)和工具提示！
/* 使用 GUIContent 來(lái)顯示圖像、字符串和工具提示 */
// JavaScript
var icon : Texture2D;
function OnGUI()
{
? ? GUI.Button(Rect(10, 10, 100, 20), GUIContent("Click me", icon, "This is the tooltip"));
? ? GUI.Label(Rect(10, 40, 100, 20), GUI.tooltip);
}
// C#
using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour
{
? ? public Texture2D icon;
? ? void OnGUI()
? ? {
? ? ? ? GUI.Button(new Rect(10, 10, 100, 20), new GUIContent("Click me", icon, "This is the tooltip"));
? ? ? ? GUI.Label(new Rect(10, 40, 100, 20), GUI.tooltip);
? ? }
}
GUIContent 構(gòu)造函數(shù)的腳本參考頁(yè)面提供了一些用法示例。
