柚子快報邀請碼778899分享：UI系統(tǒng)-GUI
柚子快報邀請碼778899分享：UI系統(tǒng)-GUI
概述
什么是UI？
UI是User Interface（用戶界面）的簡稱，例如游戲中的登錄注冊背包小地圖人物等等功能面板，游戲中最多的邏輯功能就是和UI相關(guān)的功能。Unity中的UI系統(tǒng)可以理解成他給我們提供的制作UI功能的手段
主要內(nèi)容
UI控件的使用
UI控件的事件響應(yīng)
UI的分辨率自適應(yīng)
工作原理和主要作用
GUI是什么
全稱 即時模式游戲用戶交互界面(IMGUI) 在Unity中一般簡稱為GUI 它是一個代碼驅(qū)動的UI系統(tǒng)
GUI主要作用
1.作為程序員的調(diào)試工具，創(chuàng)建游戲內(nèi)調(diào)試工具 2.為腳本組件創(chuàng)建自定義檢視面板 3.創(chuàng)建新的編輯器窗口和工具以拓展Unity本身(一般用作內(nèi)置游戲工具）
注意：一般不用GUI來為玩家制作UI功能（若為玩家制作UI在，運行游戲才能看到UI面板，開發(fā)效率低，因為他是代碼驅(qū)動的UI系統(tǒng)）
GUI工作原理
在繼承于MonoBehavior的腳本中的特殊函數(shù)里，調(diào)用GUI提供的方法，類似于生命周期函數(shù)：
OnGUI
在其中寫GUI相關(guān)的代碼就可以顯示GUI內(nèi)容，
注意：
該函數(shù)是每幀執(zhí)行的，相當(dāng)于專門用于繪制GUI界面的函數(shù)
一般只在其中執(zhí)行GUI相關(guān)界面的繪制和操作邏輯
該函數(shù)在Ondisable之前，LateUpdate之后執(zhí)行
只要繼承了Mono腳本都可以在OnGUI中繪制GUI
重要參數(shù)和文本及按鈕
GUI控件繪制的共同特點
1.他們都是GUI公共類中提供的靜態(tài)函數(shù) 直接調(diào)用即可 2.他們的參數(shù)都大同小異 位置參數(shù):Rect參數(shù)：xy位置 w h尺寸 顯示文本:string參數(shù) 圖片信息:Texture參數(shù) 綜合信息:GUIContent參數(shù) 自定義樣式:GUIstyle參數(shù) 3.每一種控件都有多種重載，都是各個參數(shù)的排列組合 必備的參數(shù)內(nèi)容 是 位置信息和顯示信息
文本控件（Label）
GUIContent中可以存放圖片文字等信息（其中Tooltip不顯示，為隱藏的提示信息），可以作為第二個參數(shù)，同時顯示文字和圖片（圖片在左文字在右）
public Texture tex;
public Rect rect;
public Rect rect1;
public GUIContent content;
public GUIStyle style;
private void OnGUI()
{
//基本顯示
GUI.Label(new Rect(0, 0, 100, 20),"GUI", style);
GUI.Label(rect, tex);
//綜合使用
GUI.Label(rect1, content);
//通過當(dāng)前鼠標(biāo)選中的GUI控件獲取對應(yīng)的 tooltip信息
Debug.Log(GUI.tooltip);
}
自定義樣式：
加上第三個參數(shù)GUIStyle，具體功能如下：
按鈕控件（Button）
public Rect bntRect;
public GUIContent bntcontent;
public GUIStyle bntstyle;
private void OnGUI()
{
//按下再抬起算一次點擊
if (GUI.Button(bntRect, bntcontent, bntstyle))
{
Debug.Log("Click");
}
//長按按鈕，按下就算點擊
if (GUI.RepeatButton(bntRect, bntcontent))
{
Debug.Log("Long Click");
}
}
多選框和單選框
單選框
多個選項只能選一個，選一個其他就取消選中 實現(xiàn)方法：加入一個Private int 用來表示哪個選項被選中了：
private int nowSelIndex = 1;
...
if(GUI.Toggle(new Rect(0, 100, 100, 30), nowSelIndex == 1, "選項一"))
{
nowSelIndex = 1;
}
if(GUI.Toggle(new Rect(0, 140, 100, 30), nowSelIndex == 2, "選項一"))
{
nowSelIndex = 2;
}
if(GUI.Toggle(new Rect(0, 180, 100, 30), nowSelIndex == 3, "選項一"))
{
nowSelIndex = 3;
}
多選框
style中normal表示未選中狀態(tài)圖標(biāo)，on normal表示選中狀態(tài)下的圖標(biāo)
isSel1 = GUI.Toggle(new Rect(0, 0, 100, 30), isSel1, "效果開關(guān)");
isSel2 = GUI.Toggle(new Rect(0, 40, 100, 30), isSel2, "音效開關(guān)", style);
輸入框和拖動條
輸入框
普通輸入
private string inputStr = "";
...
inputStr = GUI.TextField(new Rect(0, 0, 100, 30), inputStr);
密碼輸入
最后一個參數(shù)為輸入后變成的字符
private string inputPW = "";
...
inputPW = GUI.PasswordField(new Rect(0, 50, 100, 30), inputPW, '*');
拖動條
水平拖動條
最后三個參數(shù)分別是：當(dāng)前值，最小值，最大值，再后面的三個參數(shù)是調(diào)整拖動條樣式用的
private float nowValue = 0.5f;
...
nowValue = GUI.HorizontalSlider(new Rect(0, 100, 100, 50), nowValue, 0, 1);
豎直拖動條
private float nowValue1 = 0.5f;
...
nowValue1 = GUI.VerticalSlider(new Rect(0,150,50,100),nowValue1, 0, 1);
圖片繪制和框
圖片繪制
參數(shù)1：位置，參數(shù)2：圖片，參數(shù)3：拉伸方式，參數(shù)4：是否透明，參數(shù)5：自定義寬高比（一般不改，保持原圖寬高比，默認為0）
其中拉伸方式有三種
ScaleAndcrop:保持圖片寬高比但會進行裁剪 StretchToFill:始終填充滿你傳入的 Rect范圍，圖片會變形 ScaleToFit:會自動根據(jù)寬高比進行計算 不會拉變形 會一直保持圖片完全顯示的狀態(tài)
public Rect texPos;
public Texture tex;
public ScaleMode mode = ScaleMode.StretchToFill ;
public bool alpha;
public float wh = 0;
private void OnGUI()
{
GUI.DrawTexture(texPos, tex,mode,alpha,wh);
}
框
半透明的框
GUI.Box(texPos, "123");
工具欄和選擇網(wǎng)格
工具欄
private int toolbarIndex = 0;
private string[] toolbarInfos = new string[] { "選項一", "選項二", "選項三" };
private void OnGUI()
{
toolbarIndex = GUI.Toolbar(new Rect(0, 0, 200, 30), toolbarIndex, toolbarInfos);
switch (toolbarIndex)
{
case 0:
break;
case 1:
break;
case 2:
break;
default:
break;
}
}
選擇網(wǎng)格
相比于工具欄多了一個參數(shù)，表示水平方向最多顯示的按鈕數(shù)量
selGrindIndex = GUI.SelectionGrid(new Rect(0, 50, 200, 60), selGrindIndex, toolbarInfos,2);
滾動列表和分組
public Rect groupPos;
public Rect scPos;//顯示框的大小
public Rect showPos;//總的內(nèi)容范圍大小
private Vector2 nowPos;//當(dāng)前顯示框所在的位置
private string[] strs = new string[]{ "123","234","222","111"};
private void OnGUI()
{
//分組
GUI.BeginGroup(groupPos);
GUI.Button(new Rect(0, 0, 100, 50), "Test");
GUI.Label(new Rect(0, 60, 100, 20), "Label");
GUI.EndGroup();
//滾動列表
nowPos = GUI.BeginScrollView(scPos, nowPos, showPos);
GUI.Toolbar(new Rect(0, 0, 300, 50), 0, strs);
GUI.Toolbar(new Rect(0, 60, 300, 50), 0, strs);
GUI.Toolbar(new Rect(0, 120, 300, 50), 0, strs);
GUI.Toolbar(new Rect(0, 180, 300, 50), 0, strs);
GUI.EndScrollView();
}
窗口
第一個參數(shù)表示窗口id，id可以區(qū)分不同窗口，在委托函數(shù)中可以通過id來區(qū)分不同窗口做出不同響應(yīng)，第二個參數(shù)位置大小，第三個參數(shù)是委托函數(shù)，第四個參數(shù)是標(biāo)題
private void OnGUI()
{
GUI.Window(1, new Rect(100, 100, 200, 150), DrawWindow, "TestWindow1");
GUI.Window(2, new Rect(100, 100, 200, 150), DrawWindow, "TestWindow2");
}
private void DrawWindow(int id)
{
switch(id)
{
case 1:
GUI.Button(new Rect(0, 0, 100, 50),"b1");
break;
case 2:
GUI.Button(new Rect(0, 0, 100, 50), "b2");
break;
}
}
模態(tài)窗口：
GUI.ModalWindow(3, new Rect(300, 100, 200, 150), DrawWindow, "TestWindow3");
模態(tài)窗口出現(xiàn)后會將其他所有窗口都失效，無法點擊
拖動窗口：
dragWindowPos = GUI.Window(4, dragWindowPos, DrawWindow, "TestWindow4");
注意要在委托函數(shù)中加入
GUI.DragWindow();
才能拖動，GUI.DragWindow()中可以填入?yún)?shù)，參數(shù)為鼠標(biāo)選中哪些范圍才能被拖動，不填則默認無參點擊窗口任意位置都能拖動窗口
自定義皮膚
全局顏色
全局顏色設(shè)置
相當(dāng)于顏色疊加，不需要之前改成GUI.color = Color.white
GUI.color = Color.red;
GUI.Label(new Rect(0, 0, 100, 50), "Label");
GUI.Button(new Rect(50, 50, 100, 50), "Button");
GUI.color= Color.white;
GUI.Button(new Rect(100, 100, 100, 50), "Button",bntStyle);
?文字顏色設(shè)置（會和全局顏色相乘）
GUI.contentColor = Color.yellow;
背景顏色設(shè)置（會和全局顏色相乘）
GUI.backgroundColor = Color.red;
整體皮膚樣式
skin可以設(shè)置整套GUIStyle，比單個設(shè)置樣式方便，但是假如使用了skin但是還在控件上加上了style還是會按照加上的style來顯示
在資源管理器中可以右鍵新建GUIskin，在其中可以設(shè)置各種控件的樣式，可以在類中聲明一個public的GUIskin后將需要的skin拖入既使用
GUI.skin = null;//不顯示
GUILayout自動布局
主要用于進行編輯器開發(fā)，如果用它來做游戲UI不太合適
GUILayout.BeginArea(new Rect(100, 100, 100, 100));//可見范圍
GUILayout.BeginHorizontal();//水平布局，不設(shè)置默認為豎直
GUILayout.Button("123",GUILayout.Width(200));
GUILayout.Button("1234");
GUILayout.Button("12345", GUILayout.ExpandWidth(false));
GUILayout.EndHorizontal();
GUILayout.EndArea();
//控件的固定寬高
GUILayout.Width(300);
GUILayout.Height(200);
//允許控件的最小寬高
GUILayout .MinWidth(50);
GUILayout.MinHeight(50);
//允許控件的最大寬高
GUILayout.MaxWidth(100);
GUILayout.MaxHeight(100);
//允許或禁止水平拓展
GUILayout.ExpandWidth(true);
//允許
GUILayout.ExpandHeight(false);
//禁上
GUILayout.ExpandHeight(true);
//允許
GUILayout.ExpandWidth(false);
//禁止
總結(jié)
優(yōu)點：簡單快捷，代碼控制
缺點：重復(fù)工作量繁多，控件繪制相關(guān)代碼很多
最大缺點：必須運行時才能去查看結(jié)果，不支持分辨率自適應(yīng)
主要用處：用于進行unity內(nèi)置編輯器、調(diào)試工具、編輯工具等等相關(guān)開發(fā)，一般不用來做游戲UI
柚子快報邀請碼778899分享：UI系統(tǒng)-GUI
參考閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Jollychic樂享坊
