unity之UGUI系統基礎
UGUI系統基礎
一.UGUI 簡介：
①.Unity3D4.6 版本開始，Unity 引擎內出現了一個自己的完整 UI 系統。在此之
前，國內 90%以上的 Unity 專案，專案 UI 介面都是使用 NGUI 外掛製作的。
②.舊版 UI：GUITexture，GUIText。
OnGUI：主要用於“Unity 介面擴充套件開發”，用於寫引擎外掛介面。
二.UGUI 遊戲物體：
①.基礎介紹
Unity 引擎將 UGUI 內的 UI 元件進行了簡單封裝，封裝成了一些簡單的 UI 遊
戲物體，這些遊戲物體是可以直接作為 UI 使用的。
②.建立步驟
步驟 1：在unity導航欄點選GameObject -> UI-> UI 遊戲物體
步驟 2：Hierarchy 面板點選滑鼠右鍵 -> UI -> UI 遊戲物體
備註：
這兩種操作步驟，都可以找到同樣的 UI 遊戲物體列表，點選即可創建出該物體。
開發過程中，一般使用的是步驟 2 這種方式，相對比較方便。
③.建立步驟分析
當我們使用上面的步驟在場景內創建出第一個 UI 遊戲物體的時候，會順帶出現
兩個其他遊戲物體：Canvas 和 EventSystem。【見圖】
Canvas：畫板，所有的 UGUI 遊戲物體，都必須是 Canvas 的子物體。否則，
UI 遊戲物體將無法正常渲染顯示。【見圖】
EventSystem：事件系統，UGUI 所有的操作事件都是由該遊戲物體處理。
如果場景內沒有該遊戲物體，UGUI 相關物體將無法操作。【簡單演示】
在Hierarchy 面板點選滑鼠右鍵 -> UI -> Button完成按鈕的建立，執行測試你會發現可以點選，測試完成後把EventSystem刪除掉，再次執行測試。
三.UGUI 元件：
①.基礎介紹
UGUI 系統中除了官方簡單封裝過的 UI 遊戲物體外，還提供了獨立的 UI 元件，
方便我們直接使用 UI 元件製作一些複雜的 UI 功能。
其實官方的簡單 UI 遊戲物體的封裝，使用的就是該區域的 UI 元件。
②.建立步驟
步驟：在unity導航欄Component -> UI -> UI 元件
備註：
這個 UI 元件列表，預設是灰色不可用狀態。
只有當你選中了遊戲物體後，該 UI 元件列表才是可用狀態。
③.建立步驟分析
在 Canvas 遊戲物體下，建立一個空的遊戲物體，選中它，然後給它新增相關
的 UI 元件。[見圖]
備註：
Canvas 遊戲下，建立的空物體，這些空物體身上預設存在 Rect Transform。
Rect Transform 繼承至 Transform，在原有的 Transform 元件的功能基
礎上，進行了新的功能擴充套件。
----------------------------------------------------------------------UGUI元件之Text文字----------------------------------------------------------------------
一.Text 遊戲物體組成部分
①Rect Transform：用於控制 UI 物體的基本屬性。
②Canvas Renderer：畫板 UI 渲染器，UI 遊戲物體必備且不可編輯的元件。
③Text 元件：當前 UI 物體的的核心元件。
④Default UI Material：預設 UI 材質球，UI 的顯示也是需要材質球的。
備註：
①②④是所有的 UGUI 遊戲物體必備的元件，其實 UI 的形態改變，就是通過使
用不同的 UI 元件來實現的。【見圖】
二.Text 面板屬性
Text：文字
控制當前的 UI 遊戲物體要顯示的文字內容。
Font：字型
控制文字顯示的樣子；Unity 支援的字型格式是 TTF 格式。
在企業專案開發中，一款遊戲，一般會使用到三到五款字型檔案。
Font Style：字型樣式
正常字型，加粗，傾斜，加粗並且傾斜。
這樣的字型樣式在 Word，Excel，Web 開發都是有的，最基礎的字型美化。
Font Size：字型大小
控制字型的顯示大小，但是當字型很大的時候，需要配合調整當前區域的寬和高，
否則字型將因為空間太小，無法顯示。
Line Spacing：行間距
當 Text 內的文字是多行資料的時候，控制行與行之間的間隔空隙。
Rich Text：富文字支援
勾選開啟後，我們可以在 Text 內編寫富文字標籤。
比如： <color=“red”>MkCode</color>
Alignment：對其方式
控制文字在區域內的九宮顯示位置。
Align By Geometry:是否支援圖文混排。
Horizontal Overflow:橫向溢位(對應X水平方向)，當文字框內容超出文字框尺寸的時候，將Wrap更改為Overflow觀察效果。
Vertical Overflow:縱向移除(對應Y垂直方向)， 當文字框內容超出文字框尺寸的時候，將Truncate更改為Overflow觀察效果。
Color：顏色
控制文字顯示的顏色。
Raycast Target：射線投射目標
當前遊戲物體是否接受射線，如果取消勾選，射線將會直接穿透該物體，勾選則
會阻擋射線。
備註：UGUI 的 UI 互動，是系統以滑鼠點選位置發射射線與 UI 進行互動的。
----------------------------------------------------------------------UGUI元件之Image圖片--------------------------------------------------------------------
一.Image 基本使用
①.Image 使用演示
Image 元件是用於顯示圖片資源的。
使用方式有兩種：1.顯示純粹的顏色；2.指定圖片源，用於顯示圖片。
注意事項：匯入 Unity 內的圖片資源，如果是用於 UI 顯示的，需要手動將這些
圖片的型別修改為Sprite(2D and UI)【見圖】
②.元件面板核心屬性
Source Image：設定用於顯示的圖片。
Color：設定用於顯示的顏色。
兩個“資料來源”可以分開使用，也可以同時使用，如果同時時候，顏色會改變圖
片的顯示色調。如果使用圖片，那麼顏色就要設定成白色，否則會影響圖片效果。
Set Native Size：設定圖片以原始尺寸顯示。
設定完圖片，首先就需要點選一下該按鈕，保證圖片是原始尺寸比例【見圖】
二.Image 四種顯示方式
Image Type：圖片顯示型別
Simple：簡單模式
Sliced：九宮模式
Tiled：平鋪模式
Filled：填充模式
①.Simple 簡單模式
Preserve Aspect：勾選後圖片會等比例進行縮放，不會變形。
測試：勾選該屬性，隨便調整圖片的寬和高，你會發現不管邊框多大圖片始終還是原圖的形狀。
②.Sliced 九宮模式
注意：預設的圖片是不支援該模式的，需要編輯圖片，設定圖片的九宮邊框。
設定邊框的步驟：
①選中圖片->屬性區域點選“Sprite Editor”;
②在編輯面板，設定圖片的 Border 邊框數值；
③設定完畢後，不要忘記點選 Apply 儲存操作【見圖】
將編輯後的圖片模式更改為 Sliced模式，取消Fill center屬性的勾選，觀察效果你會發現圖片有一塊兒區域鏤空了，這就是我們剛才編輯圖片的時候設定的可拉伸區域。【見圖】
③.Tiled 平鋪模式
設定成了該模式後，改變圖片區域的大小，圖片就會以瓷磚平鋪的方式進
行顯示。
如果使用的圖片設定了九宮邊框，則只會平鋪中間區域，不會平鋪邊框。
測試：將圖片的模式更改為Tiled平鋪模式，手動改變圖片尺寸，你會發現圖片只是平鋪了剛才編輯過的區域【見圖】
④.Filled 填充模式
Fill Method：填充方式；水平，垂直，或者角度量；
Fill Origin：填充起點；跟隨填充方式發生改變；
Fill Amount：填充量；0~1 表示從無到填充滿。
----------------------------------------------------------------------UGUI元件之Button按鈕-------------------------------------------------------------------
Button 簡單介紹：
按鈕是 UI 中最基本的互動方式；點選按鈕後，觸發相應的程式碼邏輯。
最常用的使用場合有兩個：
①點選按鈕後載入一個新的場景；
②點選按鈕後彈出或者關閉一個 UI 面板。
按鈕組成分析
一個按鈕遊戲物體是由三個 UI 元件組合實現的：Text，Image，Button【見圖】
無論多複雜的 UI 介面，最終都是可以分解成簡單的 UI 元件的。
①.基本屬性
Interactable：是否可用，表示當前的按鈕是否可以互動。
Transition：過渡，是一個列舉，分別是Color Tint 、Sprite Swap和Animation。
專案開發過程中，最常用的就是圖片過渡方式，按鈕互動過程中，切換不同的圖
片進行狀態的展示。
②.顏色過渡(Color Tint)
Normal Color：預設顏色
Highlighted Color：高亮顏色
Pressed Color：按下顏色
Disabled Color：不可用顏色
③.圖片過渡(Sprite Swap)
Target Graphic：預設圖片，按鈕要控制改變的元件。
Highlighted Sprite：高亮圖片，滑鼠進入就會觸發；點選按鈕後，如果不點
擊其他位置，則一直觸發。專案開發過程中，該圖片可以為空。
Pressed Sprite：按下圖片，滑鼠按下切換成該狀態。
Disabled Sprite：不可用圖片，按鈕禁用後顯示的圖片。
④.動畫過渡(Animation)
Normal Trigger:預設動畫狀態
Highlighted Trigger:滑鼠進入後按鈕的動畫狀態
Pressed Trigger:滑鼠按下後的按鈕動畫狀態
Disabled Trigger:按鈕不可用時的動畫狀態
Navigation：當你有兩個或者兩個以上的按鈕時會在倆者之間顯示視覺化導航線，是一個列舉分別為:None(沒有)、Horizontal(水平方向的)、Vertical(垂直方向的)、Automatic(自動的)、Explicit(明確的)
測試準備：
1.建立五個按鈕分別命名為Center、Up、Down、Left、Right
2.調整上、下、左、右，四個按鈕的位置
3.將Center按鈕的Navigation選項更改為Explicit模式
4.將對應的按鈕拖拽到對應的選項內，點選Visualize按鈕觀察效果【見圖】
二.Button 事件繫結
1.事件繫結介紹
當我們點選按鈕後，需要執行程式碼邏輯，這個程式碼邏輯，往往封裝到一個方法內，
然後和當前按鈕的單擊事件進行繫結。
2.屬性面板繫結【不推薦使用】
①建立一個指令碼命名為TestButtonClick，掛載到按鈕遊戲物體上，編寫一個無參無返回值且公開的方法；
②屬性面板上的 OnClick 面板新增一個新的項；
③拖拽當前的這個指令碼賦值給新新增的項；
④在 Function 的位置找到剛才建立的指令碼對應的方法。
3.程式碼繫結【推薦使用】
①重新建立一個Button,把剛才建立的指令碼掛載到這個Button身上
②在指令碼內編寫一個無參無返回值且私有的方法；
③程式碼查詢到 Button 遊戲物體並存儲為物件；
④Button 物件 .onClick.AddListener(方法名)。
執行測試你會發現和剛才的效果一模一樣。
----------------------------------------------------------------------UGUI元件之Toggle複選框----------------------------------------------------------------
Toggle 組成部分分析：
Toggle 元件 [核心元件，用於控制整個 UI 遊戲物體]
|---Image 元件 [背景圖片]
| |---Image 元件 [複選標記，只要當選中時，該圖片才會顯示]
|---Text 元件 [功能文字描述]
Toggle 元件屬性
①.基本屬性
Toggle 元件和 Button 元件是比較類似的，因為他們兩個都是通過單擊來改變
狀態。也就意味著它們兩個在元件屬性方面，有很大一部分是一樣的。
Toggle 和 Button 相似的元件屬性，我們就不需要重複學習了，直接套用學習
Button 元件時已經掌握的知識即可。【用已知消化未知】
②.特有屬性
Is On：表示當前 Toggle 的狀態，是選中還是未選中。另外該屬性只是響應
UI 的狀態切換，在面板上操作該屬性不會影響 UI 狀態。
Target Graphic：對應的是 Toggle 的背景圖；
Graphic：對應的是 Toggle 的選中圖。
Group:管理Toggle開關的切換
測試控制兩個Toggle按鈕互相切換:
1.在Canvas下面建立一個空物體命名為ToggleGroup並新增Toggle Group元件
2.在建立兩個Toggle按鈕分別命名為Toggle1和Toggle2,然後拖拽作為ToogleGroup的子物體
3.分別選中Toggle1和Toggle2將Is On屬性的勾去掉，然後將ToggleGroup拖拽到Gruop選項上
----------------------------------------------------------------------UGUI元件之Slider滑塊----------------------------------------------------------------
一.Slider 元件介紹
①.Slider 介紹
在開發過程中常用於“控制大小”，比如說播放器(視訊/音訊)軟體的音量控制。
其實 Unity 引擎介面上就有很多 Slider 元件。Project 面板的資源大小預覽滑
塊；Game 面板畫面比例縮放滑塊。
②.Slider 組成部分分析
Slider 元件 [核心控制組件]
|---Background 元件 [Slider 的背景圖片]
|---Fill Area [用於控制填充圖片的活動範圍]
|---Fill元件 [填充圖片]
|---Handle Slider Area [用於控制滑塊圖片的活動範圍]
|---Handle元件 [滑塊圖片]
二.Slider 元件屬性
①.基本屬性
Slider 元件的一部分屬性和 Toggle，Button 是一樣的。
需要通過單擊操作來觸發的 UI 元件，他們都有一部分屬性是相同的。
②.特有屬性
Fill Rect：滑塊條遊戲物體的 Transform；
Handle Rect：滑塊遊戲物體的 Transform；
Direction：滑塊的滑動方向；
Min Value：滑塊元件最小值；
Max Value：滑塊元件最大值；
Whole Numbers：整數，勾選後 Slider 只能整數控制；
Value：當前滑塊元件的值。
----------------------------------------------------------------------UGUI元件之ScrollBar捲動條----------------------------------------------------------
Scrollbar 組成部分分析
Scrollbar Image [整體功能控制 + 背景圖片顯示]
|---空物體 [控制子物體活動範圍]
|---Image [滑塊圖片]
ScrollBar元件特有屬性
Size：用於控制滑塊的大小；
Number Of Steps：用於控制滑塊每次移動的步長。
----------------------------------------------------------------------UGUI元件之InputField輸入欄----------------------------------------------------------
一.InputField 元件介紹
①.InputField 介紹
InputField：輸入欄，輸入框。
輸入欄的主要用途是接收使用者輸入的單行資料，常見於輸入使用者名稱，密碼。
現階段在遊戲專案的 UI 介面開發中，尤其是手遊，輸入欄元件並不常用。因為
現在大部分手遊是直接接入騰訊，微信，360 之類的第三方登入介面。
但是在其他開發方向卻大量使用，比如：網站後臺程式，網站前臺頁面。
②.InputField 組成部分分析
InputField Image [整體控制組件，背景圖片]
|---Placeholder Text [提示文字]
|---Text [接收使用者輸入的文字]
二.InputField元件特有屬性
Text Component：用於接收顯示使用者輸入內容的 Text 元件；
Text：在該區域輸入的文字會直接顯示在 Text 元件上；
Character Limit：字元限制，表示該輸入框能輸入的最大長度，0 表示不限制；
Content Type：內容型別，用於限制輸入的資料型別；
|---Standard：標準的，任何字元都可以輸入
|---Autocorrected：自動校正，自動更正確定輸入是否跟蹤未知單詞，並向用戶建議一個更合適的替代選項，自動替換鍵入的文字，除非使用者顯式地重寫該操作(官方解釋，本人也沒看懂)。
|---Integer Number：整數，只允許輸入整數。
|---Decimal Number：小數，只允許輸入小數。
|---Alphanumeric：字母數字，只允許輸入字母和數字，不能輸入符號。
|---Name：名字，自動大寫每個單詞的第一個字母。注意，使用者可以使用Delete鍵繞過大寫規則。
|---Email Address：電子郵箱，允許使用者輸入郵箱格式的內容。
|---Password：密碼，將使用者輸入的內容隱藏起來，用*號代替。
|---Pin:整數，之允許使用者輸入整數，用*號代替。
|---Custom：自定義，允許您自定義行型別、輸入型別、鍵盤型別和字元驗證。
Line Type：行型別，用於設定輸入欄是單行還是多行；
|---Single Line：單行模式，也是預設模式；
|---Multi Line Submit：多行，不支援回車鍵換行；
|---Multi Line NewLine：多行，支援回車鍵換行。
|---Placeholder:佔位符，輸入框預設狀態下顯示的內容。
|---Caret Blink Rate：插入符號閃爍速度，定義放置在行的標記的閃爍速率。
|---Custom Caret Color：是否開啟自定義插入符號的顏色設定面板。
|---Selection Color：選取的顏色，選定文字部分的背景顏色。
|---Hide Mobile Input：隱藏手機輸入，隱藏連線到移動裝置螢幕鍵盤的本地輸入欄位。注意，這隻適用於iOS裝置。
|---Read Only:是否只讀。
三.InputField 事件繫結
①.On Value Changed(string)噹噹值改變事件事件(也就是說使用者在輸入框輸入內容的時候執行)
②.On End Edit(string)當停止編輯後的事件(退出執行模式後或者游標焦點切換到下一個輸入框的時候執行)
程式碼演示:
----------------------------------------------------------------------UGUI元件之Scroll View捲動區域------------------------------------------------------
一.ScrollRect 元件介紹
①.ScrollRect 介紹
“捲動區域”是在 ScrollBar 的基礎之上延伸出來的 UI 介面效果。
單獨是 ScrollBar 元件是無意義的，需要結合 ScrollRect 才能真正實現功能。
②.ScrollRect 組成部分分析
Scroll View :Image [核心元件，背景圖片]
|--- Viewport : Mask Image [遮罩，用於遮罩的圖片]
|---Content:空物體 [用於捲動顯示的資料]
|---Scrollbar Horizontal:橫向捲動條 [ScrollBar 遊戲物體]
|---Scrollbar Vertical:縱向捲動條 [ScrollBar 遊戲物體]
二.ScrollRect 元件屬性
Content：ScrollRect 控制的資料區域；
Horizontal：控制資料是否可以橫向拖動；
Vertical：控制資料是否可以縱向拖動；
Movement Type：三種運動型別；[不限制 -- 彈性 -- 不動]
Elasticity：靈活性，這是彈性模式下的彈跳量。
Inertia：慣性，當設定慣性時，當指標在拖動後被釋放時，內容將繼續移動。當慣性未設定時，內容只會在拖動時移動。
Deceleration Rate：減速率，當設定慣性時，減速速率決定了內容停止移動的速度。速率為0將立即停止移動。值為1意味著移動永遠不會慢下來。
Scroll Sensitivity：靈敏度，對滾動輪和跟蹤盤滾動事件的敏感性。
Viewport：視口區域的引用；
Horizontal Scrollbar：橫向滾動區域遊戲物體的引用；
Visibilty：捲動條的清晰度，當不需要滾動條時，是否應該自動隱藏滾動條，以及可選地展開檢視。
Spacing：控制捲動條和資料區域之間的間距。
Vertical Scrollbar：縱向滾動區域遊戲物體的引用；
Visibilty：捲動條的清晰度，當不需要滾動條時，是否應該自動隱藏滾動條，以及可選地展開檢視。
Spacing：控制捲動條和資料區域之間的間距。
----------------------------------------------------------------------UGUI元件之Canvas畫布------------------------------------------------------
一.Canvas 元件介紹
Canvas 元件的用途是用於 UGUI 系統內的 UI 遊戲物體的渲染。
如果沒有該元件，所有的 UGUI 遊戲物體都將無法顯示。
而 Canvas 元件本身又分為三種渲染模式：
①Screen Space - Overlay
②Screen Space - Camera
③World Space
這三種渲染模式分別用於不同的渲染需求，Canvas 元件上其餘的屬性都是根
據我們選擇的不同的渲染模式，而跟隨發生改變的。
也就是說：不同的渲染模式，對應不同的控制屬性。
二.Screen Space - Overlay 模式
1.模式介紹
該模式全稱是 Screen Space-Overlay（螢幕空間-覆蓋模式）。
螢幕空間：指的是電腦或者手機顯示屏的 2D 空間，x 軸和 y 軸；
覆蓋模式：指的是 UI 元素永遠在 3D 元素的前面，UI 覆蓋 3D；
Canvas 創建出來後，預設就是該模式。
[簡單演示]
①.建立一個Cube三維模型，然後將位置歸零
②.建立一個Image，執行觀察效果，是否是UI物體在3D物體的前面
備註：該模式和攝像機無關，即使場景內沒有攝像機，UI 遊戲物體照樣渲染。
在 Overlay 模式下，UGUI 和攝像機無關。
2.相關屬性
Pixel Perfect：完美畫素，UI 和螢幕畫素對應，UI 圖片不會出現鋸齒邊緣；
Sort Order：排序層，用於設定畫布的深度層級（場景存在多個 Canvas 時）；
在同一個場景內是允許出現多個 UGUI 的 Canvas 畫布
測試準備:
①.分別建立倆個Canvas並命名為Canvas1和Canvas2,然後分別在這兩個Canvas下面建立圖片並將其中一個圖片更改為紅色，層級結構如下圖:
②.然後選中Canvas2將它的Sort Order更改為1，你會發現紅顏色的圖片優先被渲染了。
注意事項:這兩個Canvas的模式必須保持一致才起效果。
Target Display:目標顯示屏(對應的就是Game檢視的Display選項)
Additional Shader Channels:附加的材質通道。
三.Screen Space - Camera模式
①.模式介紹
該模式全稱是 Screen Space-Camera（螢幕空間-攝像機模式）。
攝像機模式：設定成該模式後，需要指定一個攝像機遊戲物體，指定完畢後，
UGUI 就會自動出現在該攝像機的“投射範圍”內。
如果現在隱藏掉攝像機遊戲物體，UGUI 也是無法渲染顯示的。
②.相關屬性
Render Camera：渲染攝像機，指定用於渲染 UGUI 元素的攝像機；
Plane Distance：面板距離，控制 UGUI 元素和攝像機之間的距離。
四：WorldSpace 模式
①.模式介紹
該模式全稱就是 WorldSpace（世界空間模式）。
世界空間模式：是相對於螢幕空間而言的，世界空間是 x，y，z 三個軸向。
設定成該模式後，UGUI 就相當於是場景內的一個普通的“Cube 遊戲模型”，
我們是可以在場景內任意的移動 UGUI 元素的位置。
②.應用場景
3D 模式的跟隨血條；
VR 專案開發中的場景 UI。
----------------------------------------------------------------------UGUI元件之Canvas Scaler畫布定位器-----------------------------------------------
一.Canvas Scaler 元件介紹
在 Unity 專案開發過程中，尤其是手遊專案，UI 介面的開發工作量是很大的。
對於 UI 介面有一個很關鍵的技術，叫做“螢幕自適應”，就是說我們的遊戲 UI
要能自動適配不同的螢幕比例和螢幕尺寸。
在 UGUI 中用於實現“螢幕自適應”需要用到兩個元件：
①AnChors [錨點] ②Canvas Scaler [畫布定位器]
這兩個元件配合使用，才能相對完美的實現 UI 螢幕自適應的開發需求。
Canvas Scaler 元件有三種定位模式：
①Constant Pixel Size
②Scale With Screen Size
③Constant Physical Size
二.Constant Pixel Size 模式
①.模式介紹
該模式可以稱之為“恆定(固定)畫素大小模式”，UGUI 預設就是該模式。
該模式下的 Scale Factor 引數會作用於 Canvas 遊戲物體的 Scale 引數。
在該模式下無論螢幕尺寸發生什麼樣的變化，UI 元素的大小都不會改變。
②.相關屬性
Scale Factor：比例因子，預設保持為 1 即可；
Reference Pixels Per Unit：參考畫素單位，預設保持為 100 即可。
三.Scale With Screen Size 模式
①.模式介紹
該模式可以稱之為“跟隨螢幕尺寸縮放模式”，在手遊專案開發中，使用該模式。
該模式下 UI 元素的尺寸就不是固定的了，會跟隨螢幕的尺寸比例進行相應的自動
縮放。
②.相關屬性
Reference Resolution：參考解析度，設定成專案開發時使用的解析度。
Screen Match Mode：螢幕匹配模式，推薦用第一種模式。
|---Match Width Or Height [匹配寬度或者高度]
|---Expand [擴大] ---Shrink [縮小]
Match：匹配，當螢幕匹配模式選擇為 Match Width Or Height 時該屬性有效。
一個滑塊控制條，0~1，代表寬和高。
橫屏遊戲用 Height 匹配，豎屏遊戲用 Width 匹配[以短方向進行匹配]。
四.Contant Physical Size 模式
該模式可以稱之為“恆定(固定)的物理尺寸”，在該模式下 UI 元素永遠保持固定
的物理尺寸，使用場合較少 。
此文章只是為了記錄一下學習筆記，如有不足還望多多指點！