UGUI

Canvas對(duì)象上依附的:

• Canvas:畫布組件，用于渲染UI控件

• Canvas Scaler:畫布分辨率自適應(yīng)組件，主要用于分辨率自適應(yīng)

• Graphic Raycaster:射線事件交互組件，主要用于控制射線響應(yīng)相關(guān)

• RectTransform: UI對(duì)象位置錨點(diǎn)控制組件，主要用于控制位置和對(duì)其方

  EventSystem對(duì)象上依附的:

• EventSystem和Standalone Input Module玩家輸入事件響應(yīng)系統(tǒng)和獨(dú)立輸入模塊組件，主要用于監(jiān)聽玩家操作作

6六大基礎(chǔ)組件

Canvas組件

屏幕空間覆蓋模式，UI始終在前

• 覆蓋模式: UI始終顯示在最前面

• 攝像機(jī)模式:3D物體可以顯示在UI之前

• 3D模式:用于制作3DUI，在VR和AR中常用，游戲中的3D UI效果才使用

其他參數(shù)

• Pixel Perfect: 是否開啟無鋸齒精確染 (性能換效果

• SortOrder: 排序?qū)泳幪?hào) (用于控制多個(gè)Canvas時(shí)的渲染先后順序

• TargetDisplay:目標(biāo)設(shè)備(在哪個(gè)顯示設(shè)備上顯示

• Additional Shader Channels: 其他著色器通道，決定著色器可以讀取哪些數(shù)據(jù)

UI平面的交互感覺

不關(guān)聯(lián)攝像機(jī)就無法處理事件

CanvasScaler

用于畫布縮放控制器，用于分辨率自適應(yīng)的組件，主要負(fù)責(zé)在不同分辨率下UI控件大小的自適應(yīng)，不負(fù)責(zé)位置，位置由RectTransform組件負(fù)責(zé)，提供了三種分辨率自適應(yīng)模式

屏幕分辨率會(huì)參與自使用的計(jì)算

• 重要公式:寬x高x縮放系數(shù) = 分辨率

• Reference Resolution:在縮放模式的寬高模式中出現(xiàn)的參數(shù)，參與分辨率自適應(yīng)的計(jì)算

總結(jié):

• 屏幕分辨率————當(dāng)前設(shè)備的分辨率編輯器下Game窗口中可以查看到參考分辨率在其中一種適配模式中出現(xiàn)的關(guān)鍵參數(shù)，參與分辨率自適應(yīng)的計(jì)算

• 畫布寬高和縮放系數(shù)一一分辨率自適應(yīng)會(huì)改變的參數(shù)，通過屏幕分辨率和參考分辨率計(jì)算而來

• 分辨率大小自適應(yīng)一一通過一定的算法以屏幕分辨率和參考分辨率參與計(jì)算得出縮放系數(shù)該結(jié)果會(huì)影響所有UI控件的縮放大小

三種方式UI縮放的模式

• Constant Pixel Size (恒定像素模式):無論屏幕大小如何，UI始終保持相同像素大小

• Scale With Screen Size (縮放模式) :根據(jù)屏幕尺寸進(jìn)行縮放，隨著屏幕尺寸放大縮小

• Constant Physical Size (恒定物理模式):無論屏幕大小和分辨率如何，UI元素始終保持相同物理大小

恒定像素模式

無論屏幕大小如何，UI始終保持相同像素大小，很少使用這種方式

Scale Factor:縮放系數(shù)，按此系數(shù)縮放畫布中的所有UI勻速

Reference Pixels Per Unti:單位參考像素，多少像素對(duì)應(yīng)Untiy中的一個(gè)單位，默認(rèn)一個(gè)單位為100像素，

UI的原始尺寸 = 圖片大?。ㄏ袼兀?(Piexls Per Unit/Referenc Pixels Per Unit)

縮放模式

• Reference Resolution: 參考分辨率 (美術(shù)同學(xué)出圖的標(biāo)準(zhǔn)分辨率，縮放模式下的所有匹配模式都會(huì)基于參考分辨率進(jìn)行自適應(yīng)計(jì)算

• Screen Match Mode: 屏幕配模式，當(dāng)前屏幕分辨率寬高比不適應(yīng)參考分辨率時(shí)，用于分辨率大小自適應(yīng)的匹配模式

不同算法的匹配模式:

1. Expand:水平或垂直拓展畫布區(qū)域，會(huì)根據(jù)寬高比的變化來放大縮小畫布，可能有黑邊

匹配公式: 將Canvas Size進(jìn)行寬或高擴(kuò)大，讓他高于參考分辨率

計(jì)算公式: 縮放系數(shù) ?= Mathf.Min(屏幕寬/參考分辨率寬,屏幕高/參考分辨率高);

畫布尺寸 = 屏幕儲(chǔ)存/縮放系數(shù)

變現(xiàn)的最終效果:最大程度的縮小UI元素，顯示UI的所有位置，會(huì)有黑邊

1. Shrink:水平或垂直裁剪畫布區(qū)域，會(huì)根據(jù)寬高比的變化來放太縮小畫布，可能會(huì)裁剪

匹配公式: 將Canvas Size進(jìn)行寬或高擴(kuò)大，讓他低于參考分辨率

計(jì)算公式: 縮放系數(shù) ?= Mathf.Max(屏幕寬/參考分辨率寬,屏幕高/參考分辨率高);

畫布尺寸 = 屏幕儲(chǔ)存/縮放系數(shù)

變現(xiàn)的最終效果:最大程度的放大UI元素，顯示UI的所有位置，會(huì)有UI的裁剪

1. Match Width Or Height: 以寬高或者二者的平均值作為參考來縮放畫布區(qū)域

//在取平均值之前，我們先取相對(duì)寬度和高度的對(duì)數(shù)

• float logWidth = Mathf.Log(屏幕寬/參考分辨率寬2);

• float logHeight = Mathf.Log(屏幕高 /參考分辨率高,2);

//在對(duì)數(shù)空間中變換是為了獲得更好的性能以及更準(zhǔn)確的結(jié)果

• float logWeightedAverage = MathfLerp(logWidth, logHeight, m MatchWidthOrHeight)

• scaleFactor = Mathf.Pow(2, logWeighteAverage);

  
  

表現(xiàn)效果 主要用于只有橫屏模式或者豎屏模式的游

• 豎屏游戲: Match = 0將畫布寬度設(shè)置為參考分辨率的寬度并保持比例不變，屏幕越高可能會(huì)有黑邊

• 橫屏游戲: Match = 1將畫布高度設(shè)置為參考分辨率的高度并保持比例不變，屏幕越長可能會(huì)有黑邊

恒定物理模式

無論屏幕大小和分辨率如何，UI元素始終保持相同物理大小，比如一張圖片在2k和4k的區(qū)別

DPI:圖像每英寸長度內(nèi)的像素點(diǎn)數(shù)

Physical Unit：物理單位，使用的物理單位種類

Fallback Screen DPI:備用DPI，當(dāng)找不到設(shè)備DPI時(shí)，使用此值

Default Sprite DPI:默認(rèn)圖片DPI

3D模式

• Dynamic Pixels Per Unit: U中動(dòng)態(tài)創(chuàng)建的位圖 (例如文本)中，單位像素?cái)?shù) (類似密度)，可以讓文字變得清除

• Reference Pixels Per Unit: 單位參考像素，多少像素對(duì)應(yīng)Unity中的一個(gè)單位 (默認(rèn)一個(gè)單位為100像素)

Graphic RayCaster

Graphic Raycaster意思是圖形射線投射器它是用于檢測UI輸入事件的射線發(fā)射器，它主要負(fù)責(zé)通過射線檢測玩家和UI元素的交互判斷是否點(diǎn)擊到了UI元素

參數(shù):

• lgnore Reversed Graphics: 是否忽略反轉(zhuǎn)圖形

• Blocking Objects:射線被哪些類型的碰撞器阻擋 (在覆蓋渲染模式下無效)

• Blocking Mask:射線被哪些層級(jí)的碰撞器阻擋(在覆蓋染模式下無效)

Event System

事件系統(tǒng)，用于管理玩家的輸入事件并分發(fā)給各UI空間，事件邏輯處理模塊，所有的UI事件都通過EventSystem組件中輪訓(xùn)檢測并做相應(yīng)的執(zhí)行，類似一個(gè)中專站和其他模塊一起共同協(xié)作

• First Selected:首先選擇的游戲?qū)ο?，可以設(shè)置游戲一開始的默認(rèn)選擇

• Send Navigation Events: 是否允許導(dǎo)航事件 (移動(dòng)/按下/取消)

• Drag Threshold:拖拽操作的闖值(移動(dòng)多少像素算拖拽

Standalone Input Module

獨(dú)立輸入模塊 它主要針對(duì)處理鼠標(biāo)/鍵盤/控制器/觸屏(新版Unity)的輸入輸入的事件通過EventSystem進(jìn)行分發(fā)它依賴于EventSystem組件，他們兩缺一不可，其實(shí)是控制UI選擇按鍵

RectTransform

RectTransform意思是矩形變換它繼承于Transform是專門用于處理UI元素位置大小相關(guān)的組件

Pivot：軸心(中心)點(diǎn)，取值范圍0~1

Anchors(相對(duì)父矩形錨點(diǎn))： 控制圖像基于那個(gè)點(diǎn)位置進(jìn)行偏移

Min是矩形錨點(diǎn)范圍X和Y的最小值 Max是矩形錨點(diǎn)范圍X和Y的最大值 取值范圍都是0~1

Pos(X,Y,Z)：軸心點(diǎn)(中心點(diǎn))相對(duì)錨點(diǎn)的位置

Width/Height：矩形的寬高

Left/Top/Right/Bottom：矩形邊緣相對(duì)于錨點(diǎn)的位置；當(dāng)錨點(diǎn)分離時(shí)會(huì)出現(xiàn)這些內(nèi)容

Rotation：圍繞軸心點(diǎn)旋轉(zhuǎn)的角度

Scale：縮放大小 ：

錨點(diǎn)是一個(gè)點(diǎn)是，會(huì)基于這個(gè)點(diǎn)進(jìn)行偏移，也就是組件xy都是基于錨點(diǎn)偏移。

錨點(diǎn)是一個(gè)范圍時(shí)，會(huì)基于范圍進(jìn)行計(jì)算。組件的四個(gè)邊和四個(gè)父對(duì)象邊的偏移

Blueprint Mode（藍(lán)圖模式），啟用后，編輯旋轉(zhuǎn)和縮放不會(huì)影響矩形，只會(huì)影響顯示內(nèi)容：

Raw Edit Mode（原始編輯模式），啟用后，改變軸心和錨點(diǎn)值不會(huì)改變矩形位置

三大基礎(chǔ)控件

Imgae

參數(shù):

• Source lmage:圖片來源片類型必須是”精靈“類型)

• Color: 圖像的顏色

• Material: 圖像的材質(zhì) (一般不修改，會(huì)使用UI的默認(rèn)材質(zhì))

• Raycast Target: 是否作為射線檢測的目標(biāo) (如果不勾選將不會(huì)響應(yīng)射線檢測)

• Maskable: 是否能被遮罩 (之后結(jié)合遮罩相關(guān)知識(shí)點(diǎn)進(jìn)行講解)

• Imgae Type:

  
  

1. Filled-填充模式

1. sliced-切片模式，9宮格拉伸，只拉伸中央十字區(qū)域只拉伸切片內(nèi)也就是中央的區(qū)域！很有用！

3. Tiled-平鋪模式，重復(fù)平鋪中央部分

1. simple-普通模式，均勻縮放整個(gè)圖片

2. lmage Type: 圖片類型,當(dāng)物體拉伸時(shí)，

• Use Sprite Mesh: 使用精靈網(wǎng)格，勾選的話Unity會(huì)幫我們生成圖片網(wǎng)格

• Preserve Aspect: 確保圖像保持其現(xiàn)有尺寸

• Set Native Size: 設(shè)置為圖片資源的原始大小

Text

文本的參數(shù)很多，基于

RawImgae

RawImage是原始圖像組件，是UGUI用于顯示任何紋理圖片的關(guān)鍵組件

和Imgae的去唄是 一般RawImgae用于顯示大圖(背景圖，不需要打入圖集的圖片，網(wǎng)絡(luò)下載圖等)

組合控件

Button

Button由兩個(gè)組件構(gòu)成，一個(gè)是父對(duì)象可以作為按鈕的背景圖，另外一個(gè)是button的子對(duì)象，按鈕的文本選項(xiàng)

Interactable: 是否接受輸入

• ColorTint:用顏色表示不同狀態(tài)的變化

• TargetGraphic:控制的目標(biāo)圖形Normal Color:正常狀態(tài)顏色Highlighted Color: 鼠標(biāo)進(jìn)入時(shí)顯示高亮顏色

• Pressed Color: 按下顏色

• Selected Color: 選中的顏色

• Disabled Color:禁用時(shí)的顏色

• Color Multiplier: 顏色倍增器，過渡顏色乘以該值

• FadeDuration:豪減持續(xù)時(shí)間，從一個(gè)狀態(tài)進(jìn)入另一個(gè)狀態(tài)時(shí)需要的 時(shí)間

過渡(按鈕切換)方式:

1. 顏色

2. 精靈圖切花

3. 圖片動(dòng)畫

監(jiān)聽按鈕事件的方式:

1. 拖腳本

Toggle

是一種開關(guān)組件，用于處理多選框相關(guān)交互的關(guān)鍵組件,用于選擇，想要做多選時(shí)，可以放到一個(gè)物體下，讓父物體加上Group Toggle 就可以實(shí)現(xiàn)在幾個(gè)選項(xiàng)中進(jìn)行單選

InputFidelis

InputField是輸入字段組件，是UGUI中用于處理玩家文本輸入相關(guān)交互的關(guān)鍵組件，默認(rèn)創(chuàng)建的InputField由3個(gè)對(duì)象組成//父對(duì)象-InputField組件依附對(duì)象 以及 同時(shí)在其上掛載了一個(gè)Image作為背景圖，子對(duì)象一文本顯示組件 (必備)、默認(rèn)顯示文本組件 (必備)

• TextCompoent: 用于關(guān)聯(lián)顯示輸入內(nèi)容的文本組件

• Text: 輸入框的起始默認(rèn)值

• Character Limit: 可以輸入字符長度的最大值

• Content Type: 輸入的字符類型限制

• Line Type: 行類型，定義文本格式

• Placeholder:關(guān)聯(lián)用于顯示初始內(nèi)容文本控件

• Caret Blink Rate:光標(biāo)爍速率

• Caret Width:光標(biāo)寬

• Custom Caret Color: 自定義光標(biāo)顏色

• Selection Color: 批量選中的背景顏色

• Hide Mobile Input: 隱藏移動(dòng)設(shè)備屏幕上鍵盤，僅適用于

• IOSRead Only: 只讀，不能改

• Character Limit: 可以輸入字符長度的最大值

?InputField input = this.GetComponent<InputField>();//組件
?Input.text = "123"//更改字符串內(nèi)容
?//通過事件的方式
?input.OnvalueChaged.AddListener((str)=>
?{
? ? ? ? ?//字符改變時(shí)
?})
?//觸發(fā)事件
?public void changeInput(string str)
?{
? ? ?//字符改變時(shí)
?}
?
?public void EndInput(string str)
?{
? ? ?//結(jié)束輸入時(shí)
?}

Slider-滑動(dòng)條

slider是滑動(dòng)條組件是UGUI中用于處理滑動(dòng)條相關(guān)交互的關(guān)鍵組件，默認(rèn)創(chuàng)建的slider由4組對(duì)象組成，父對(duì)象-slider組件依附的對(duì)象兒/子對(duì)象~背號(hào)圖進(jìn)度圖，沒動(dòng)塊三組對(duì)象

參數(shù):

• FillRect: 用于填充的進(jìn)度條圖形

• Handle Rect: 用于滑動(dòng)的滑動(dòng)塊圖形

• Direction: 滑動(dòng)條值增加的方向

• Min Value 和 Max Value: 最小值和最大值，滑動(dòng)滾動(dòng)條時(shí)值從最小到最大之間變化 (左右、上下極值)

• Whole Numbers: 是否約束為整數(shù)值變化

• Value:當(dāng)前滑動(dòng)條代表的數(shù)值

• OnValueChanged: 滑動(dòng)條值改變時(shí)執(zhí)行的函數(shù)列表

?Slider s = this.GetComponnet<Slider>();
?print(s.value)

ScrollBar

scrollbar是滾動(dòng)條組件,是UGUI中用于處理滾動(dòng)條相關(guān)交互的關(guān)鍵組件,默認(rèn)創(chuàng)建的scrollbar由2組對(duì)象組成//父對(duì)象-scrollbar組件依附的對(duì)象,子對(duì)象一滾動(dòng)塊對(duì),一般情況下我們不會(huì)單獨(dú)使用滾動(dòng)條//都是合scrollview滾動(dòng)視圖來使用

重要參數(shù):

• up To Bottom: 從上到

• Value: 滾動(dòng)條初始位置值 (0~1)

• Value: 滾動(dòng)塊在條中的比例大小 (0~1)

• Number of steps: 允許可以滾動(dòng)多少次 (不同滾動(dòng)位置的數(shù)量OnValueChanged: 滾動(dòng)條值改變時(shí)執(zhí)行的函數(shù)列表

?ScrollBar sb. = this.GetComponet<ScrollBar>();
?sb.OnvlaueChanged.AddEventListener((value)=>{
? ? ?//事件
?})

ScrollView滾動(dòng)視圖

參數(shù):

• Content: 控制滾動(dòng)視圖顯示內(nèi)容的父對(duì)象，它的尺寸有多大滾動(dòng)視圖就能拖多遠(yuǎn),所有內(nèi)容都在這里

• Horizontal: 啟用水平滾動(dòng)

• Vertical: 啟用垂直滾動(dòng)

• Movement Type: 滾動(dòng)視圖元素的運(yùn)動(dòng)類型。主要控制拖動(dòng)時(shí)的反饋效果

1. Unrestricted(一般不使用) :不受限制，隨便拖動(dòng)回彈效果，當(dāng)滾出邊緣后，會(huì)彈回邊界

2. Elastic (常用) :Elasticity: 回彈系數(shù)，控制回彈效果。值越大回彈越慢

3. Clamped: 夾緊效果，始終限制在范圍內(nèi)，沒有回彈效果

• Inertia: 移動(dòng)慣性，如果開啟，松開鼠標(biāo)后會(huì)有一定的移動(dòng)慣性

• Deceleration Rate: 減速率 (0~1)0沒有慣性，1不會(huì)停止

• Scroll sensitivity: 滾輪 (鼠標(biāo)中間)和觸摸板 (筆記本)的滾動(dòng)事件敏感性

• Viewport: 關(guān)聯(lián)滾動(dòng)視圖內(nèi)容視口對(duì)象

• Horizontal Scrollbar: 關(guān)聯(lián)水平滾動(dòng)條

?ScrollRect sr ?= this.getcomponent<ScrollRec t>();
?sr.content.sizeDelta = new Vecotr(200,200);
?sr.normalizedPostion = new Vector2（0,0.5）
?
? //動(dòng)態(tài)布局
? ? ? void Start()
? ? ?{
? ? ? ? ?for(int i =0;i<30;i++)
? ? ? ? ?{
? ? ? ? ? ? ?GameObject item = Instantiate(Resources.Load<GameObject>("BagItem"));
? ? ? ? ? ? ?item.transform.SetParent(svItems.content, false);
?
? ? ? ? ? ? ?item.transform.localPosition = new Vector3(10, -10, 0)+new Vector3(i%4*x,-i/4*y,0);
? ? ? ? ?}
? ? ? ?
?
? ? ? ? ?svItems.content.sizeDelta = new Vector2(0, Mathf.CeilToInt(30 / 4f) * 100);
? ? ?}

DropDown下拉列表

是UGUT中用于處理下拉列表相關(guān)交互的關(guān)鍵組件，默認(rèn)創(chuàng)建的DropDown由4組對(duì)象組成

父對(duì)象

1. DropDown組件依附的對(duì)象

2. Image組件 作為背景圖

子對(duì)象

1. Labe1是當(dāng)前選項(xiàng)描述

2. Arrow右側(cè)小箭頭

3. Template下拉列表選單

參數(shù)相關(guān):

• Transition: 響應(yīng)用戶輸入的過渡效果

• Navigation: 導(dǎo)航模式，可以設(shè)置UI元素如何在播放模式中控制器導(dǎo)航

• Interactable: 是否接受輸入

• Template: 關(guān)聯(lián)下拉列表對(duì)象

• Caption Text: 關(guān)聯(lián)顯示當(dāng)前選擇內(nèi)容的文本組件

• Caption lmage: 關(guān)聯(lián)顯示當(dāng)前選擇內(nèi)容的圖片組件

• ltem Text: 關(guān)聯(lián)下拉列表選項(xiàng)用的文本控件

• ltem Image: 關(guān)聯(lián)下拉列表選項(xiàng)用的圖片控件Value: 當(dāng)前所選選項(xiàng)的索引值

• Alpha Fada Speed: 下拉列表窗口淡入淡出的速度

• Options: 存在的選項(xiàng)列表

?Dropdown dd = this.GetConponent<DropDown>();
?dd.value
?dd.options[dd.vlaue].text//得到當(dāng)前的選項(xiàng)的文字
? ? ?
? ? ?
?dd.OnValueChanged.AddListener((index)=>{});

圖集制作

性能優(yōu)化方面，減少Draw Call的數(shù)量

在工程設(shè)置面板中打開功能 Edit-->Project Setting-->Editor

Sprite Packer(精靈包裝器，可以通過unity自帶圖集工具生成圖集)

• Disabled: 默認(rèn)設(shè)置，不會(huì)打包圖集

• Enabled For Builds (Legacy Sprite Packer): Unity僅在構(gòu)建時(shí)打包圖集，在編輯模式下不會(huì)打包圖集

• Always Enabled (Legacy Sprite Packer) : Unity在構(gòu)建時(shí)打包圖集，在編輯模式下運(yùn)行前會(huì)打包圖集

  Legacy Sprite Packer傳統(tǒng)打包模式 相對(duì)下面兩種模式來說 多了一個(gè)設(shè)置圖片之間的間隔距離

• Padding Power:選擇打包算法在計(jì)算打包的精靈之間以及精靈與生成的圖集邊緣之間的間隔距離這里的數(shù)字 代表2的n次方

• Enabled For Build: Unity進(jìn)在構(gòu)建時(shí)打包圖集，在編輯器模式下不會(huì)打包

• Enabled: Unity在構(gòu)建時(shí)打包圖集，在編輯模式下運(yùn)行前會(huì)打包圖集Always

UI進(jìn)階

UI事件事件接口

日前所有的控件都只提供了常用的事件監(jiān)聽列表，如果想做一些類似長按，雙擊，拖拽等功能是無法制作的//或者想讓Image和Text，RawImage三大基礎(chǔ)控件能夠響應(yīng)玩家輸入也是無法制作的，而事件接口就是用來處理類似問題，讓所有控件都能夠添加更多的事件監(jiān)聽來處理對(duì)應(yīng)的邏輯

注意:UI事件的接口要打開射線檢測

常用的事件接口:

• IPointerEnterHandler - OnPointerEnter當(dāng)指針進(jìn)入對(duì)象時(shí)調(diào)用(鼠標(biāo)進(jìn)入)

• IPointerExitHandler - OnPointerExit -當(dāng)指針對(duì)出對(duì)象時(shí)調(diào)用(鼠標(biāo)離開)

• IPointerDownHandler - OnPointerDown - 在對(duì)象上按下指針時(shí)調(diào)用 (按下)

• IPointerUpHandler - OnPointerUp - 松開指針時(shí)調(diào)用 (在指針正在點(diǎn)擊的游戲?qū)ο笊险{(diào)用)(起)

• IPointerclickHandler - onPointerclick - 在同一對(duì)象上按下再松開指針時(shí)調(diào)用 (點(diǎn)擊)

拖拽系:

• IBeginDragHandler - OnBeginDrag - 即將開始拖動(dòng)時(shí)在拖動(dòng)對(duì)象上調(diào)用(開始拖拽)

• IDragHandler - onDrag - 發(fā)生拖動(dòng)時(shí)在拖動(dòng)對(duì)象上調(diào)用 (拖拽中)

• IEndDragHandler - OnEndDrag - 拖動(dòng)完成時(shí)在拖動(dòng)對(duì)象上調(diào)用 (結(jié)束拖拽)

不常用系:

• IInitializePotentialDragHandler - OnInitializePotentialDrag-在找到拖動(dòng)目標(biāo)時(shí)調(diào)用，可用于初始化值

• IDropHandler - OnDrop - 在拖動(dòng)目標(biāo)對(duì)象上調(diào)用

• IScrol1Handler - OnScroll - 當(dāng)鼠標(biāo)滾輪滾動(dòng)時(shí)調(diào)用

• IUpdateSelectedHandler - OnUpdateSelected - 每次勾選時(shí)在選定對(duì)象上調(diào)用

• ISelectHandler - OnSelect - 當(dāng)對(duì)象成為選定對(duì)象時(shí)調(diào)用

• IDeselectHandler - OnDeselect - 取消選擇選定對(duì)象時(shí)調(diào)用

導(dǎo)航相關(guān):

• IMoveHandler - onMove - 發(fā)生移動(dòng)事件 (上、下、左、右等) 時(shí)調(diào)用

• ISubmitHandler- onSubmit - 按下 submit 按鈕時(shí)調(diào)用

• ICancelHandler- onCancel - 按下 Cancel 按鈕時(shí)調(diào)用

  栗子:

?public class IEnmertortest : MonoBehaviour,IPointerEnterHandler,IPointerExitHandler,IPointerDownHandler,IPointerUpHandler
?{
? ? ?public void OnPointerExit(PointerEventData eventData)
? ? ?{
? ? ? ? ?print("鼠標(biāo)退出");
? ? ?}
?
? ? ?void IPointerDownHandler.OnPointerDown(PointerEventData eventData)
? ? ?{
? ? ? ? ?print("鼠標(biāo)按下");
? ? ?}
?
? ? ?void IPointerEnterHandler.OnPointerEnter(PointerEventData eventData)
? ? ?{
? ? ? ? ?print("鼠標(biāo)進(jìn)入");
? ? ?}
?
? ? ?void IPointerUpHandler.OnPointerUp(PointerEventData eventData)
? ? ?{
? ? ? ? ?print("鼠標(biāo)抬起");
? ? ?}
?}

接口函數(shù)的參數(shù)講解:

父類: BaseEventData

• pointerId: 鼠標(biāo)左右中鍵點(diǎn)擊鼠標(biāo)的ID 通過它可以判斷左中右鍵的按下

• position:當(dāng)前指針位置 (屏幕坐標(biāo)系)

• pressPosition: 按下的時(shí)候指針的位置

• delta: 指針移動(dòng)增量，按下后記錄這次點(diǎn)，然后后續(xù)事件與這個(gè)點(diǎn)的偏移量

• clickCount: 連擊次數(shù)

• clickTime: 點(diǎn)擊時(shí)間，兩次點(diǎn)擊得到的是系統(tǒng)的事件

• pressEventCamera: 最后一個(gè)onPointerPress按下事件關(guān)聯(lián)的攝像機(jī)

• enterEvetnCamera: 最后一個(gè)onPointerEnter進(jìn)入事件關(guān)聯(lián)的攝像機(jī)

EventTriagger

事件觸發(fā)器是EventTrigger組件,它是一個(gè)集成所有事件接口的腳本,它可以讓我們更方便的為控件添加事件監(jiān)聽

直接加腳本然后加上對(duì)應(yīng)事件

?et.triggers.Add();
?//聲明一個(gè)希望監(jiān)聽的事件對(duì)象
?EventTrigger.Entry entry = new EventTrigger.Entry();
?//聲明事件類型
?entry.eventID = EventTriggerType.PointerUp;
?//監(jiān)聽函數(shù)關(guān)聯(lián)
?entry.callback.AddListenr((data)={
? ? ?print("test");
?})
?et.triggers.Add(entry);
? ? ?
?//聲明一個(gè)希望監(jiān)聽的事件對(duì)象

屏幕UI坐標(biāo)系轉(zhuǎn)換

RectTransformUtility 公共類是一個(gè)RectTransform的輔助類,主要用于進(jìn)行一些 坐標(biāo)的轉(zhuǎn)換等等操作,其中對(duì)于我們目前來說 最重要的函數(shù)是 將屏幕空間上的點(diǎn)，轉(zhuǎn)換成UI本地坐標(biāo)下的點(diǎn)，優(yōu)點(diǎn)是更加的準(zhǔn)確

? public void OnDrag(PointerEventData eventData)
? ? ?{
? ? ? ? ?Vector2 newPos;
? ? ? ? ?//將屏幕空間轉(zhuǎn)換為UI的相對(duì)父對(duì)象的轉(zhuǎn)換
? ? ? ? ?RectTransformUtility.ScreenPointToLocalPointInRectangle(
? ? ? ? ? ? ?this.transform.parent as RectTransform,
? ? ? ? ? ? ?eventData.position,
? ? ? ? ? ? ?eventData.enterEventCamera,
? ? ? ? ? ? ?out newPos
? ? ? ? ? ? ?);
?
? ? ? ? ?this.transform.localPosition = newPos;
? ? ? ? ?print(newPos);
?
? ? ?}

Mask遮罩

在不改變圖片的情況下，去改變圖像就叫遮罩的作用，通過在父對(duì)象上加Mask組件就可以了

1. 想要被遮罩的Image需要勾選Maskable

2. 只要父對(duì)象添加了Mask組件，那么所有的UI子對(duì)象都會(huì)被遮罩

3. 遮罩父對(duì)象圖片的制作，不透明的地方顯示，透明的地方被遮罩

模型和粒子UI之前

模型顯示UI之前

方法一：直接用攝像機(jī)渲染3D物體

canvas的渲染模式要不是覆蓋模式//攝像機(jī)模式 和 世界(3D)模式都可以讓模型顯示在UI之前 (軸在UI元素之前即可) 注意:

1. 攝像機(jī)模式時(shí)建議用專門的攝像機(jī)渲染UI相關(guān)

2. 面板上的3D物體建議也用UI攝像機(jī)進(jìn)行渲染

方法二**:** 將3D物體渲染在圖片上，通過圖片顯示(適用于但角色之類的) 專門使用一個(gè)攝像機(jī)渭染3D模型，將其渲染內(nèi)容輸出到Render Texture上，類似小地圖的制作方式//再將渲染的圖顯示在UI上，該方式 不管canvas的渲染模式是哪種都可以使用

粒子特效

方法一:直接加到UI層

添加到UI層可以更改渲染層級(jí)去選擇層級(jí)的渲染

異形按鈕

在Untiy中，有些圖片最為按鈕鏤空部分點(diǎn)擊也會(huì)觸發(fā)射線檢測，因?yàn)闄z測的時(shí)候不是按有無像素，而是圖像的邊框，所以會(huì)發(fā)生誤觸

方法一:通過添加子對(duì)象的形式

按鈕之所以能夠響應(yīng)點(diǎn)擊，主要是根據(jù)圖片矩形范圍進(jìn)行判斷的/它的范圍判斷是自下而上的，意思是如果有子對(duì)象圖片，子對(duì)象圖片的范圍也會(huì)算為可點(diǎn)擊范圍/那么我們就可以用多個(gè)透明圖拼湊不規(guī)則圖形作為按鈕子對(duì)象用于進(jìn)行射線檢測

上面鏤空的地方會(huì)有響應(yīng)，更改如下結(jié)構(gòu)

將Button變?yōu)橐粋€(gè)空的矩形范圍，然TargetImage變?yōu)锽utton的父對(duì)象，這樣點(diǎn)擊的還是Button，響應(yīng)的是父對(duì)象的圖片

點(diǎn)擊事件是自下而上反饋，所以可以拼接多個(gè)圖形，盡可能完美

方法二 通過代碼改變圖片的透明度響應(yīng)聞值

1. 第一步:修改圖片參數(shù) 開啟Read/Write Enabled開關(guān)

2. 2.第二步:通過代碼修改圖片的響應(yīng)闖值 該參數(shù)含義: 指定一個(gè)像素必須具有的最小alpha值，以變能夠認(rèn)為射線命中了圖片，就是通過透明度檢測

開啟透明度讀寫，然后調(diào)整閾值

img.alphaHitTestMinimunThreshhold = 0.1f

自動(dòng)布局

自動(dòng)布局是什么

雖然uGUI的RectTransform已經(jīng)非常方便的可以幫助我們快速布局//但UGUI中還提供了很多可以幫助我們對(duì)uI控件進(jìn)行自動(dòng)布局的組件//他們可以幫助我們自動(dòng)的設(shè)置UI控件的位置和大小等

自動(dòng)布局的工作方式一般是

1. 自動(dòng)布局控制組件 + 布局元素 ?自動(dòng)布局

2. 自動(dòng)布局控制組件: unity提供了很多用于自動(dòng)布局的管理性質(zhì)的組件用于布局//布局元素: 具備布局屬性的對(duì)象們，這里主要是指具備RectTransform的uI組件

水平布局組件

將子對(duì)象并排或者豎直的放在一起 組件名: Horizontal Layout Group 和 Vertical Layout Group

• Padding: 左右上下邊緣偏移位置

• Spacing:子對(duì)象之間的間距

• childAlignment:九宮格對(duì)其方式

• control child size: 是否控制子對(duì)象的寬高

• use child scale: 在設(shè)置子對(duì)象大小和布局時(shí)，是否考慮子對(duì)象的縮放

• child Force Expand: 是否強(qiáng)制子對(duì)象拓展以填充額外可用空間

也可以給子元素添加布局元素的控件，控制子對(duì)象的UI

網(wǎng)格布局組件

將子對(duì)象當(dāng)成一個(gè)個(gè)的格子設(shè)置他們的大小和位置 組件名: Grid Layout Group 參數(shù)相關(guān):

• Padding: 左右上下邊緣偏移位置

• Cel1 size:每個(gè)格子的大小

• Spacing: 格子間隔

• start corner:第一個(gè)元素所在位置 (4個(gè)角)

• start Axis: 沿哪個(gè)軸放置元素，Horizontal水平放置滿換行，Vertical豎直放置滿換列

• child Alignment: 格子對(duì)其方式 (9宮格)

• Constraint:行列約束

• Flexible: 靈活模式，根據(jù)容器大小自動(dòng)適應(yīng)

• Fixed Column Count: 固定列數(shù)

• Fixed Row Count: 固定行數(shù)

內(nèi)容大小適配器

它可以自動(dòng)的調(diào)整RectTransform的長寬來讓組件自動(dòng)設(shè)置大小//一般在Text上使用 或者 配合其它布局組件一起使用 組件名: Content size Fitter//參數(shù)相關(guān)

• Horizontal Fit: 如何控制寬度

• Vertical Fit:如何控制高度

• Unconstrained: 不根據(jù)布局元素伸展

• Min size: 根據(jù)布局元素的最小寬高度來伸展

• Preferred size: 根據(jù)布局元素的偏好寬度來伸展寬度

####寬高比適配器

1. 讓布局元素按照一定比例來調(diào)整自己的大小

2. 使布局元素在父對(duì)象內(nèi)部根據(jù)父對(duì)象大小進(jìn)行適配 組件名: Aspect Ratio Fitter

   參數(shù)相關(guān):

• Aspect Mode: 適配模式，如果調(diào)整矩形大小來實(shí)施寬高比

• None:不讓矩形適應(yīng)寬高比

• width Controls Height: 根據(jù)寬度自動(dòng)調(diào)整高度

• Height Controls width: 根據(jù)高度自動(dòng)調(diào)整寬度

• Fit In Parent: 自動(dòng)調(diào)整寬度、高度、位置和錨點(diǎn)，使矩形適應(yīng)父項(xiàng)的矩形，同時(shí)保持寬高比，會(huì)出現(xiàn)“黑邊”

• Envelope Parent: 自動(dòng)調(diào)整寬度、高度、位置和點(diǎn)，使矩形覆蓋父項(xiàng)的整個(gè)區(qū)域，同時(shí)保持寬高比，會(huì)出現(xiàn)“裁剪”

• Aspect Ratio: 寬高比; 寬除以高的比值

Canvas Group

可以解決面板整體禁用，整體的淡入淡出的問題

為面板父對(duì)象添加 canvasGroup組件 即可整體控制 參數(shù)相關(guān): Alpha: 整體透明度控制 Interactable:整體啟用禁用設(shè)置 Blocks Raycasts: 整體射線檢測設(shè)置 Ignore Parent Groups: 是否忽略父級(jí)CanvasGroup的作用#endregion

實(shí)在是懶得傳圖了