|
##1、UGUI概述 ++1.1、Unity界面發(fā)展史 ++++【老版本界面onGUI】=>【GUI插件NGUI】=>【新版本界面UGUI】 ++1.2、UGUI特點(diǎn) ++++新的UI系統(tǒng)是從Unity4.6開始被集成到Unity編譯器中的。Unity官方給這個(gè)新的UI系統(tǒng)賦予的標(biāo)簽是：靈活，快速和可視化。 ++++對于開發(fā)者而言，就是有三個(gè)優(yōu)點(diǎn)：效率高效果好，易于使用和擴(kuò)展以及與Unity的兼容性高。 ++++新的UGUI系統(tǒng)具有以下特點(diǎn)： --1、引擎內(nèi)置，結(jié)合更加緊密。 --2、運(yùn)行穩(wěn)定，操作方便。 ++1.3、UGUI優(yōu)點(diǎn) ++++UGUI與老版本onGUI相比： --1、獨(dú)立的坐標(biāo)體系； --2、全新的事件機(jī)制； --3、更佳高效率的運(yùn)轉(zhuǎn)效率。 ++++UGUI與GUI插件NGUI相比： --1、由NGUI創(chuàng)始人參與開發(fā)； --2、與Unity結(jié)合更加密切； --3、自適應(yīng)系統(tǒng)更加完善； --4、更方便的深度處理； --5、省去Altas，直接使用Sprite Packer；
##2、UGUI畫布 ++2.1、創(chuàng)建UGUI控件 ++++第一種： 在Hierarchy當(dāng)中通過 右鍵=>UI，找到相應(yīng)的UI控件。 ++++第二種：通過工具欄【GameObject】=>【UI】，找到相應(yīng)的UI控件。 ++2.2、Canvas畫布 ++++當(dāng)我們?nèi)我鈩?chuàng)建一個(gè)UI控件的時(shí)候可以看到在層級視圖當(dāng)中不但生成我們創(chuàng)建的控件，還會同時(shí)創(chuàng)建一個(gè)Canvas和EventSystem。
++++Canvas是畫布，是所有UI控件的根類，也可以看作所有UI控件的父物體，所有UI控件都必須在Canvas上面繪制。它是一個(gè)帶有Canvas組件的游戲物體EventSystem事件系統(tǒng)，負(fù)責(zé)監(jiān)聽用戶的輸入。 ++++創(chuàng)建UI控件時(shí)，當(dāng)層級視圖當(dāng)中沒有Canvas和EventSystem系統(tǒng)會幫我們自動創(chuàng)建。 ++2.3、總結(jié) ++++1、UGUI畫布也稱為Canvas，UGUI是所有控件的父類。 ++++2、所有UGUI控件都必須繪制在畫布上面。 ++++3、當(dāng)創(chuàng)建UGUI控件，工程當(dāng)中沒有Canvas的時(shí)候會自動創(chuàng)建Canvas與EventSystem。
##3、UGUI基礎(chǔ)控件 ++3.1、Text ++++Text控件是用來顯示文本的文本控件，選中Text可以查看屬性： --Text ：創(chuàng)建控件時(shí)顯示的文字 --Character： --Font ：字體 --Font Style ：字體格式：黑體/斜體 --Font Size ：字體大小 --Line Spacing ：行間距 --Rich Text ：富文本 --Paragraph： --Alignment ：對其方式 --Horizontal Overflow ：水平溢出 --Vertical Overflow ：垂直溢出
++++Text的屬性可以在Inspector當(dāng)中通過Text組件進(jìn)行設(shè)置，也可以在代碼當(dāng)中進(jìn)行動態(tài)設(shè)置。給Canvas掛載腳本 UGUISetting.cs 示例： Text text; void Start(){ text = GameObject.Find(“Text”).GetComponent<Text>(); text.text = “立鉆哥哥”; text.alignment = TextAnchor.MiddleCenter; text.fontSize = 20; text.fontStyle = FontStyle.BoldAndItalic; //字體樣式 text.color = Color.red; }
++3.2、Image ++++Image控件主要是用來顯示圖片，顯示圖片的格式是Sprite，具體屬性如下： --Source Image ：Image顯示的圖片，圖片格式為Sprite --Color ：顏色。 --Material ：材質(zhì)。 --Preserve Aspect ：圖像寬高是否按原始比例。 --Set Native Size ：將Image大小設(shè)置為圖片默認(rèn)大小。
++++當(dāng)我們給Image選擇一張貼圖之后會出現(xiàn)Image Type選項(xiàng)，如下圖。ImageType總共有四種選項(xiàng)： --simple ：顯示單個(gè)會拉伸； --Tilled ：平鋪顯示，圖片按照原始顯示； --Sliced ：按照九宮格顯示，拉伸區(qū)域只會在九宮格中間； --Filled ：填充顯示，可以根據(jù)不同的填充方式模擬技能冷卻的效果。
++++Image Type的Filled填充模式常可以用來制作血條，冷卻技能等。 ++++示例：如何使用程序控制圖片填充顯示： 當(dāng)按鍵A按下的時(shí)候Image控件180度填充顯示。 --在Start方法中獲取Image控件，設(shè)置填充模式為180度填充： void Start(){ image = GameObject.Find(“Image”).GetComponent<Image>(); image.fillMethod = Image.FillMethod.Radial180; } --在Update方法中判斷當(dāng)按鍵A按下的時(shí)候讓圖片180度填充： bool isFilled = true; void Update(){ if(Input.GetKeyDown(KeyCode.A)){ isFilled = false; } if(! isFilled){ image.fillAmount += Time.deltaTime; if(image.fillAmount >= 1){ image.fillAmount = 1; isFilled = true; } } }
++3.3、RawImage ++++RawImage同樣是用來顯示圖片的控件，跟Image控件的差別就是Image顯示圖片的格式為Sprite，RawImage顯示圖片的格式為Texture，此外RawImage可以控制行列。 --Raw Image(Script) --Texture ：導(dǎo)入的圖片樣式 --UV Rect：紋理貼圖坐標(biāo)，w和h 
++3.4、Button ++++Button控件，包含的Text控件用于顯示按鈕的文本。 ++++當(dāng)某個(gè)UGUI控件添加了Button組件便擁有了按鈕點(diǎn)擊的功能。 ++++Button組件： --Interactable ：是否可以交互。 --Transition ：按鈕的過渡效果。 --按鈕在不同狀態(tài)的顏色： --Normal Color --Highlighted Color --Pressed Color --Disabled Color --Color Multiplier --Navigation ：控件間導(dǎo)航。 --On Click() ：給按鈕添加響應(yīng)事件。
++++Transition用于設(shè)置按鈕在不同狀態(tài)間的過渡效果，總共有四種方式： --（1）None ：無過渡效果 --（2）Color Tint ：設(shè)置不同狀態(tài)不同顏色來過渡。 --（3）Sprite Swap ：設(shè)置不同圖片來過渡不同狀態(tài)。 --（4）Animation ：設(shè)置不同動畫過渡不同狀態(tài)。
++++給按鈕添加監(jiān)聽事件： Button btn; void Start(){ //獲取到按鈕 btn = GameObject.Find(“Button”).GetComponent<Button>(); //給按鈕添加監(jiān)聽事件 btn.onClick.AddListener(BtnClick); }
void BtnClick(){ //按鈕響應(yīng)事件 Debug.Log(“btn.onClick.AddListener()”); }
++3.5、Slider ++++給滑動條Slider添加監(jiān)聽事件。 示例： Slider slider; void Start(){ //獲取到Slider組件 slider = GameObject.Find(“Slider”).GetComponent<Slider>(); //添加監(jiān)聽事件 slider.onValueChanged.AddListener(SliderValueChange); }
//事件響應(yīng) public void SliderValueChange(float value){ Debug.Log(“value = ” + value); }
++3.6、ScrollBar ++++滾動條ScrollBar，Scrollbar層級視圖當(dāng)中包含了滑塊Handle。 ++++Scrollbar屬性： --Handle Rect ：滑動區(qū)域。 --Direction ：滑動方向。 --Value ：滑塊當(dāng)前值。 --Size ：滑塊大小。 --Number Of Steps ：可滑動區(qū)域分為幾步。 --On Value Changed(Single) ：滑塊響應(yīng)事件。 
++3.7、Toggle ++++Toggle為單選框，可以用來創(chuàng)建開關(guān)按鈕。如下圖，層次視圖當(dāng)中包含了顯示背景的Background和顯示文本的Label。
++++Toggle屬性如下，其中Group表示當(dāng)前選中框是否屬于某一組選中框，若是的話則所有選中框只能選中一個(gè)。 --Is On ：交互是否開啟。 --Toggle Transition ：狀態(tài)改變過渡效果設(shè)置。 --Graphic ：選中或取消要顯示或隱藏的文本或圖片。 --Group ：當(dāng)前選中框是否屬于某個(gè)組。 --On Value Changed(Boolean) ：事件響應(yīng)。
++++給Toggle添加監(jiān)聽事件
示例： Toggle toggle; void Start(){ toggle = GetComponent<Toggle>(); //獲取Toggle組件 //給Slider組件添加監(jiān)聽事件 toggle.onValueChanged.AddListener(ToggleAction); } void ToggleAction(bool isOn){ print(isOn); }
++3.8、InputField ++++InputField創(chuàng)建出來如下圖，InputField層級視圖當(dāng)中包含Placeholder與Text， --Placeholder 用于顯示占位符，即輸入框沒有輸入文本時(shí)顯示的文本，例如下圖的“Enter text”； --Text 用于顯示輸入的內(nèi)容。 ++++輸入框Inputield的具體屬性： --Text ：初始文本顯示的內(nèi)容 --Character Limit ：字符數(shù)量限制。 --Content Type ：文本類型。 --Line Type ：文本單行顯示還是多行。 --Caret Blink Rate ：光標(biāo)閃動頻率。 --Caret Width ：光標(biāo)的寬度。 --Custom Caret Color ：自定義光標(biāo)的顏色。 --Selection Color ：選中文本時(shí)的顏色。 --On Value Changed(String) ：文本編輯時(shí)觸發(fā)的事件。 --On End Edit(string) ：結(jié)束編輯的時(shí)候觸發(fā)的事件。
++++給InputField添加監(jiān)聽事件 示例： InputField inputField; void Start(){ //獲取輸入框 inputField = GameObject.Find(“InputField”).GetComponent<InputField>(); inputField.onEndEdit.AddListener(InputFieldEndEdit); }
void InputFieldEndEdit(string text){ print(“文本框當(dāng)中的文本：” + text); }
++3.9、Panel ++++Panel ：面板，功能相當(dāng)于控制的容器，里面可以存放其他控件。 --作用： 使用Panel控件可以整體移動和處理一組控件。 --設(shè)計(jì)規(guī)范： 一個(gè)功能完備的UI界面往往會使用多個(gè)Panel控件。 ++++示例： 將資源商店當(dāng)中的所有分類放在單獨(dú)一塊Panel當(dāng)中。
##4、RectTransform ++4.1、RectTransform ++++RectTransform的作用用來計(jì)算UI的位置和大小，RectTransform繼承于Transform，具有Transform的所有特征，通過RectTransform能夠?qū)崿F(xiàn)基本的布局和層次控制。 ++++RectTransform當(dāng)中專有名字： --Pos X, Pos Y ：Pivot與Anchor的距離 --Pivot ：中軸，中心點(diǎn) --Anchor ：錨點(diǎn) --Width&Height ：寬與高，相對于錨點(diǎn) --Left, Right, Top, Bottom ：左右上下
++4.2、中心點(diǎn)Pivot ++++按下T鍵選中某一個(gè)UI控件即可看到UI控件的中心點(diǎn)，中心點(diǎn)也叫中心軸，當(dāng)鼠標(biāo)拖動UI控件進(jìn)行旋轉(zhuǎn)的時(shí)候會圍繞中心點(diǎn)旋轉(zhuǎn)。 --中心點(diǎn)是矩形的一部分。 --0對應(yīng)左下角，1對應(yīng)右上角。
++4.3、錨點(diǎn)Anchor ++++如圖所示，箭頭所指即為錨點(diǎn)，錨點(diǎn)表示的是相對于父級矩形的子矩形區(qū)域。 ++++如圖所示，錨點(diǎn)為四邊形，錨點(diǎn)有多種擺放方式，可以為矩形，點(diǎn)狀或是為線狀。 ++++錨點(diǎn)移動范圍僅限于父級視圖當(dāng)中。
++4.4、錨點(diǎn)的四種擺放方式 --錨點(diǎn)呈點(diǎn)狀 --錨點(diǎn)與組件本身重合 --錨點(diǎn)跟父物體重合 --錨點(diǎn)呈線狀 ++++（1）錨點(diǎn)呈點(diǎn)狀： 當(dāng)UI的錨點(diǎn)為中心點(diǎn)時(shí)，不管父控件的大小怎么改變，UI距離錨點(diǎn)的位置固定，大小固定，此時(shí)RectTransform(Pos X, Pos Y, Width, Height)，其中Pos X與Pos Y分別表示UI中心點(diǎn)到錨點(diǎn)的水平與方向距離。Width與Height是UI的大小。
++++（2）錨點(diǎn)與組件本身重合： 當(dāng)UI的錨點(diǎn)為四方形或者與UI本身大小相同的時(shí)候，UI的大小與父控件的大小變換成正比，此時(shí)RectTransform(Left, Top, Right, Botton)，分別為錨點(diǎn)左，上，右，底 距離UI對應(yīng)邊的距離。
++++（3）錨點(diǎn)跟父物體重合： 當(dāng)UI控件的錨點(diǎn)與父物體重合的時(shí)候，不管父物體怎么變化，UI控件四條邊相對于錨點(diǎn)四條邊的距離保持不變。
++++（4）錨點(diǎn)呈線狀： --當(dāng)UI控件的錨點(diǎn)呈線狀并為豎直方向時(shí)，則UI控件豎直方向的大小與父物體豎直方向的大小成正比，水平方向大小不變。 --當(dāng)錨點(diǎn)呈線狀并且為水平方向時(shí)，則水平方向大小與父物體水平方向的大小成正比，豎直方向大小不變。
--_--VRunSoft : lovezuanzuan--_-- |
|
|
