- UGUI Canvas 畫布
- UGUI Event System 事件系統(tǒng)
- UGUI Panel 控件
- UGUI Text 控件
- UGUI Image 控件
- UGUI Raw Image 控件
- UGUI Button 控件
- UGUI Toggle 控件
- UGUI Slider 控件
- UGUI Scrollbar 控件
- TUGUI Input Field 控件
UGUI 是 Unity 官方的 UI 實現(xiàn)方式灯抛，自從 Unity 4.6 起姿锭，Unity 官方推出了新版 UGUI 系統(tǒng)。
新版 UGUI 系統(tǒng)相比于 OnGUI 系統(tǒng)更加人性化，而且是一個開源系統(tǒng)已脓，利用游戲開發(fā)人員進(jìn)行游戲界面開發(fā)同木。
UGUI 系統(tǒng)有 3 個特點：靈活皱坛、快速肢簿、可視化。
對于游戲開發(fā)者來說深浮，UGUI 運行效率高压怠，執(zhí)行效果好，易于使用飞苇，方便擴(kuò)展菌瘫，與 Unity 3D 兼容性高。
在 UGUI 中創(chuàng)建的所有 UI 控件都有一個 UI 控件特有的 Rect Transform組件玄柠。
在 Unity 3D 中創(chuàng)建的三維物體是 Transform突梦，而 UI 控件的 Rect Transform 組件是UI控件的矩形方位诫舅，其中的 PosX羽利、PosY、PosZ 指的是 UI 控件在相應(yīng)軸上的偏移量刊懈。
UI 控件除了 Rect Transform 組件外这弧，還有一個 Canvas Renderer（畫布渲染）組件。
- UGUI Canvas 畫布
Canvas畫布是擺放所有 UI 元素的區(qū)域虚汛，在場景中創(chuàng)建的所有控件都會自動變?yōu)?Canvas游戲?qū)ο蟮淖訉ο蟆?/p>
若場景中沒有畫布匾浪，在創(chuàng)建控件時會自動創(chuàng)建畫布。
不論是你主動創(chuàng)建還是被動創(chuàng)建卷哩，系統(tǒng)都會自動創(chuàng)建一個名為 EventSystem 的游戲?qū)ο蟮氨玻搶ο髵燧d了若干與事件監(jiān)聽相關(guān)的組件，可供設(shè)置将谊。
渲染模式
在畫布屬性欄中有一個 Render Mode 屬性冷溶。
1.Screen Space-Overlay 渲染模式。
在
Screen Space-Overlay 渲染模式下尊浓，場景中的 UI 會被渲染到屏幕上逞频，如果屏幕大小或分辨率發(fā)生改變，畫布會自動適配栋齿。
該模式下不需要 UI 攝像機(jī)苗胀， UI 將永遠(yuǎn)出現(xiàn)在所有攝像機(jī)的最前面襟诸。
| 參數(shù) | 功能 |
|---|---|
| Pixel Perfect | 重置元素大小和坐標(biāo)，使貼圖的像素完美對應(yīng)到屏幕像素上基协。 |
| Sort Order | 排列順序歌亲。 |
2.Screen Space-Camera 渲染模式。
Screen Space-Camera 渲染模式類似于Screen Space-Overlay 渲染模式澜驮。
這種渲染模式下应结，畫布被放置在指定攝像機(jī)前的一個給定距離上，它支持在 UI 前方顯示 3D 模型與粒子系統(tǒng)等內(nèi)容泉唁，通過指定的攝像機(jī) UI 被呈現(xiàn)出來鹅龄，如果屏幕大小改變或更改了分辨率，畫布將自動更改大小以適配屏幕亭畜。
| 參數(shù) | 功能 |
|---|---|
| Pixel Perfect | 重置元素大小和坐標(biāo)扮休，使貼圖的像素完美對應(yīng)到屏幕像素上。 |
| Render Camera | UI 繪制所對應(yīng)的攝像機(jī)拴鸵。 |
| Plane Distance | UI 距離攝像機(jī)鏡頭的距離玷坠。 |
| Sorting Layer | 界面分層，執(zhí)行 Edit → Project Setting → Tags and |
| Layers → Sorting Layers | 命令進(jìn) 行界面分層劲藐，越下方的層在界面顯示時越在前面八堡。 |
| Order Layer | 界面順序，該值越高聘芜，在界面顯示時越在前面兄渺。 |
3.World Space 渲染模式。
在 World Space 渲染模式下呈現(xiàn)的UI 好像是 3D 場景中的一個Plane對象汰现。與前兩種渲染模式不同挂谍，其屏幕的大小將取決于拍攝的角度和相機(jī)的距離。
它是一個完全三維的 UI瞎饲，也就是把 UI 也當(dāng)成三維對象口叙，例如攝像機(jī)離 UI 遠(yuǎn)了，其顯示就會變小嗅战，近了就會變大妄田。
| 參數(shù) | 功能 |
|---|---|
| Event Camera | 設(shè)置用來處理用戶界面事件的攝像機(jī)。 |
| Sorting Layer | 界面分層驮捍，執(zhí)行 Edit → Project Setting → Tags and |
| Layers → Sorting Layers | 命令進(jìn) 行界面分層疟呐，越下方的層在界面顯示時越在前面。 |
| Order Layer | 界面順序厌漂，該值越高萨醒，在界面顯示時越在前面。 |
UGUI Event System 事件系統(tǒng)
在 Unity 3D 中創(chuàng)建 UGUI 控件后苇倡，會同時創(chuàng)建 Event System 事件系統(tǒng)的 GameObject富纸，用于控制各類事件囤踩。
Unity 3D 自帶兩個 Input Module ，一個用于響應(yīng)標(biāo)準(zhǔn)輸入晓褪，另一個用于響應(yīng)觸摸操作堵漱。
Input Module 封裝了 Input模塊的調(diào)用，根據(jù)用戶操作觸發(fā)各 Event Trigger涣仿。
Event System 事件處理器
Event System事件處理組件勤庐。
將基于輸入的時間發(fā)送到應(yīng)用程序中的對象，使用鍵盤好港、鼠標(biāo)愉镰、觸摸或自定義輸入均可。Standalone Input Module獨立輸入模塊钧汹。
基于輸入InputManager管理器的狀態(tài)發(fā)送事件丈探，用于鼠標(biāo)、鍵盤和控制器拔莱。該模塊被配置為查看InputManager碗降。Touch Input Module觸控輸入模塊。
被設(shè)計為使用在可觸摸的基礎(chǔ)設(shè)備上塘秦。
UGUI Panel 控件
Unity 3D panel 控件又叫面板讼渊，該面板實際上就是一個容器，在其上可放置其他 UI 控件尊剔。
當(dāng)移動該面板時爪幻，放在其中的UI 控件就會跟隨移動，這樣可以更加合理與方便地移動與處理一組控件赋兵。
拖動面板控件的 4 個角或 4 條邊可以調(diào)節(jié)面板的大小笔咽。
一個功能完備的 UI 界面往往會使用多個 Panel 容器控件搔预，而且一個面板里還可套用其他面板霹期，如下圖所示。
當(dāng)面板被創(chuàng)建時拯田，會默認(rèn)包含一個
Image （Script 組件）历造。
-
Source Image用來設(shè)置面板的圖像。 -
Color用來改變面板的顏色船庇。
UGUI Text 控件
在 Unity 3D UGUI 中創(chuàng)建的很多 UI 控件都有一個支持文本編輯的 Text控件吭产。
Text 控件也被稱為標(biāo)簽。Text區(qū)域用于輸入將要顯示的文本鸭轮。通過它可以設(shè)置字體臣淤、樣式、字號等內(nèi)容窃爷。
參數(shù)列表
| 參數(shù) | 描述 |
|---|---|
| Font | 設(shè)置字體邑蒋。 |
| Font Style | 設(shè)置字體樣式姓蜂。 |
| Font Size | 設(shè)置字體大小。 |
| Line Spacing | 設(shè)置行間距（多行）医吊。 |
| Rich Text | 設(shè)置富文本钱慢。 |
| Alignment | 設(shè)置文本在 Text 框中的水平以及垂直方向上的對齊方式。 |
| Horizontal Overflow | 設(shè)置水平方向上溢出時的處理方式卿堂。分兩種：Wrap(隱藏）束莫；Overflow(溢出）
|
| Vertical Overflow | 設(shè)置垂直方向上溢出時的處理方式。分兩種：Truncate(截斷）草描；Overflow(溢出）
|
| Best Fit | 設(shè)置當(dāng)文字多時自動縮小以適應(yīng)文本框的大小 |
| Color | 設(shè)置字體顏色 |
UGUI Image 控件
Unity 3D Image 控件除了兩個公共的組件 Rect Transform與 Canvas Renderer 外览绿，默認(rèn)的情況下就只有一個 Image 組件，如下圖所示穗慕。
其中挟裂，
Source Image 是要顯示的源圖像，要想把一個圖片賦給 Image揍诽，需要把圖片轉(zhuǎn)換成精靈格式诀蓉，轉(zhuǎn)化后的精靈圖片就可拖放到 Image 的 Source Image 中了。
轉(zhuǎn)換方法為：在 Project 視圖中選中要轉(zhuǎn)換的圖片暑脆，然后在 Inspector 屬性面板中渠啤，單擊 Texture Type（紋理類型）右邊的下拉列表，選中 Sprite（2D and UI）并單擊下方的 Apply按鈕添吗，就可以把圖片轉(zhuǎn)換成精靈格式沥曹，然后就可以拖放到 Image 的 Source Image 中了。
參數(shù)列表
| 參數(shù) | 描述 |
|---|---|
| Color | 設(shè)置應(yīng)用在圖片上的顏色 |
| Material | 設(shè)置應(yīng)用在圖片上的材質(zhì) |
| Image Type | 設(shè)置貼圖類型 |
UGUI Raw Image 控件
Unity 3D Raw Image 控件向用戶顯示了一個非交互式的圖像碟联，如下圖所示妓美。它可以用于裝飾、圖標(biāo)等鲤孵。
Raw Image 控件類似于 Image 控件壶栋，但是，Raw Image 控件可以顯示任何紋理普监，而 Image只能顯示一個精靈贵试。參數(shù)列表
| 參數(shù) | 描述 |
|---|---|
| Texture | 設(shè)置要顯示的圖像紋理 |
| Color | 設(shè)置應(yīng)用在圖片上的顏色 |
| Material | 設(shè)置應(yīng)用在圖片上的材質(zhì) |
| UV Rect | 設(shè)置圖像在控件矩形中的偏移和大小，范圍為0?1 |
UGUI Button 控件
除了公共的 Rect Transform 與 Canvas Renderer 兩個 UI 組件外凯正，Unity 3D Button 控件還默認(rèn)擁有 Image 與 Button 兩個組件毙玻，如下圖（a）所示。
Image 組件里的屬性與前面介紹的是一樣的廊散。Button是一個復(fù)合控件桑滩，其中還包含一個 Text 子控件，通過此子控件可設(shè)置 Button 上顯示的文字的內(nèi)容允睹、字體运准、文字樣式往声、文字大小、顏色等戳吝，與前面所講的 Text 控件是一樣的浩销。
Button 控件屬性
Interactable（是否啟用交互）。
如果把該選項取消听哭，則該 Button 在運行時將不可點擊慢洋，失去了交互性。Transition（過渡方式）陆盘。
共有 4 個選項普筹，如下圖（b）所示。默認(rèn)為Color Tint（顏色色彩）隘马。
-
None：沒有過渡方式太防。 -
Color Tint：顏色過渡，相關(guān)屬性參考下文列表酸员。 -
Sprite Swap：精靈交換蜒车，需要使用相同功能、不同狀態(tài)的貼圖幔嗦，相關(guān)屬性參考下文列表酿愧。 -
Animation：動畫過渡。
image.png
Color Tint 屬性
| 屬性 | 描述 |
|---|---|
| Target Graphic | 設(shè)置目標(biāo)圖像邀泉。 |
| Normal Color | 設(shè)置正常顏色嬉挡。 |
| Highlighted Color | 設(shè)置高亮色。 |
| Pressed Color | 設(shè)置單擊色汇恤。 |
| Disabled Color | 設(shè)置禁用色庞钢。 |
| Color Multiplier | 設(shè)置顏色倍數(shù)。 |
| Fade Duration | 設(shè)置變化持續(xù)的時間因谎。 |
Sprite Swap 屬性
| 屬性 | 描述 |
|---|---|
| Target Graphic | 設(shè)置目標(biāo)圖像基括。 |
| Highlighted Sprite | 設(shè)置鼠標(biāo)經(jīng)過時的貼圖。 |
| Pressed Sprite | 設(shè)置單擊時的貼圖蓝角。 |
| Disabled Sprite | 設(shè)置禁用時的貼圖阱穗。 |
UGUI Toggle 控件
Unity 3D Toggle控件也是一個復(fù)合型控件，如下圖所示使鹅。它有 Background與 Label 兩個子控件，而 Background控件中還有一個 Checkmark子控件昌抠。
Background是一個圖像控件患朱，而其子控件 Checkmark也是一個圖像控件，其 Label控件是一個文本框炊苫，通過改變它們所擁有的屬性值裁厅，即可改變 Toggle 的外觀冰沙，如顏色、字體等执虹。
參數(shù)列表
| 屬性 | 描述 |
|---|---|
| Is On | 設(shè)置復(fù)選框默認(rèn)是開還是關(guān)拓挥。 |
| Toggle Transition | 設(shè)置漸變效果。 |
| Graphic | 用于切換背景袋励，更改為一個更合適的圖像侥啤。 |
| Group | 設(shè)置多選組。 |
UGUI Slider 控件
在游戲的 UI 界面中會見到各種滑塊茬故，用來控制音量或者是搖桿的靈敏度盖灸。
Unity 3D Slider控件也是一個復(fù)合控件，Background 是背景磺芭，默認(rèn)顏色是白色赁炎，Fill Area 是填充區(qū)域，如下圖所示钾腺。
Slider 控件的一個需要注意的參數(shù)是 Whole Number徙垫，該參數(shù)表示滑塊的值是否只可為整數(shù)，開發(fā)人員可根據(jù)需要進(jìn)行設(shè)置放棒。
除此以外松邪，Slider 控件也可以掛載腳本，用來響應(yīng)事件監(jiān)聽哨查。
參數(shù)列表
| 屬 性 | 描述 |
|---|---|
| Fill Rect | 設(shè)置填充矩形區(qū)域逗抑。 |
| Handle Rect | 設(shè)置手柄矩形區(qū)域。 |
| Direction | 設(shè)置 Slider 的擺放方向寒亥。 |
| Min Value | 設(shè)置最小數(shù)值邮府。 |
| Max Value | 設(shè)置最大數(shù)值。 |
| Value | 設(shè)置滑塊當(dāng)前的數(shù)值溉奕。 |
UGUI Scrollbar 控件
Unity 3D Scrollbar（滾動條）控件可以垂直或水平放置褂傀，主要用于通過拖動滑塊以改變目標(biāo)的比例，如下圖所示加勤。
它最恰當(dāng)?shù)膽?yīng)用是用來將一個值變?yōu)橹付ò俜直认杀伲畲笾禐?（100%），最小值為0（0%）鳄梅，拖動滑塊可在0和1之間改變叠国，例如改變滾動視野的顯示區(qū)域。
參數(shù)列表
| 屬 性 | 描述 |
|---|---|
| Handle Rect | 設(shè)置最小值與最大值之間的范圍戴尸，也就是整個滑條的最大可控制范圍粟焊。 |
| Direction | 設(shè)置滾動條的方向為從左至右、從上至下或其他的方向。 |
| Value | 設(shè)置當(dāng)前滾動條對應(yīng)的值项棠。 |
| Size | 設(shè)置操作條矩形對應(yīng)的縮放長度悲雳，即 handle 部分的大小，取值為 0?1香追。 |
| Numbers Of Steps | 設(shè)置滾動條可滾動的位置數(shù)目合瓢。 |
| On Value Changed | 設(shè)置值改變時觸發(fā)消息。 |
UGUI Input Field 控件
Unity 3D Input Field 控件也是一個復(fù)合控件透典，包含 Placeholder 與 Text 兩個子控件晴楔，如下圖所示。
其中掷匠，Text是文本控件滥崩，程序運行時用戶所輸入的內(nèi)容就保存在Text控件中，Placeholder 是占位符讹语，表示程序運行時在用戶還沒有輸入內(nèi)容時顯示給用戶的提示信息钙皮。
Input Field輸入字段組件與其他控件一樣，也有Image（Script）組件顽决，另外也包括 Transition 屬性短条，其默認(rèn)是 Color Tint，如下圖所示才菠，具體屬性如下表所示茸时。參數(shù)列表
| 屬 性 | 描述 |
|---|---|
| Interactable | 設(shè)置是否啟用 Input Field 組件。勾選表示輸入字段可以交互赋访，否則表示不可以交互可都。 |
| Transition | 設(shè)置當(dāng)正常顯示、突出顯示蚓耽、按下或禁用時輸入字段的轉(zhuǎn)換效果渠牲。 |
| Navigation | 設(shè)置導(dǎo)航功能。 |
| Text Component | 設(shè)置此輸人域的文本顯示組件步悠，用于顯示用戶輸人的文本框签杈。 |
| Text | 設(shè)置此輸入域的初始值。 |
| Character Limit | 設(shè)置此輸人域最大的輸入字符數(shù)鼎兽，0 為不限制輸入字符數(shù)答姥。 |
| Placeholder | 設(shè)置此輸入域的輸人位控制符，對于任何帶有 Text 組件的物體均可設(shè)置此 |
另外還有兩個較為特殊的參數(shù)：
1.Content Type 屬性谚咬。
輸入此輸入域的內(nèi)容類型鹦付，包括數(shù)字、密碼等序宦，常用的類型如下：
-
Standard：允許輸入任何字符睁壁，只要是當(dāng)前字體支持的即可背苦。 -
Autocorrected:自動校正輸入的未知單詞互捌，并建議更合適的替換候選對象潘明，除非 用戶明確地覆蓋該操作，否則將自動替換輸入的文本秕噪。 -
Integer Number：只允許輸入整數(shù)钳降。 -
Decimal Number：允許輸入整數(shù)或小數(shù)。 -
Alpha numeric：允許輸入數(shù)字和字母腌巾。 -
Name：允許輸入英文及其他文字遂填，當(dāng)輸入英文時能自動提示姓名拼寫。 -
Email Address：允許輸入一個由最多一個 @ 符號組成的字母數(shù)字字符串澈蝙。 -
Password：輸入的字符被隱藏吓坚，只顯 7K 星號。 -
Pin：只允許輸入整數(shù)灯荧。輸入的字符被隱藏礁击，只顯示星號。 -
Custom：允許用戶自定義行類型逗载、輸入類型哆窿、鍵盤類型和字符驗證。
image.png
Line Type 屬性厉斟。
設(shè)置當(dāng)輸入的內(nèi)容超過輸入域邊界時的換行方式：
-Single Line：超過邊界也不換行挚躯，繼續(xù)向右延伸此行，即輸入域中的內(nèi)容只有一行擦秽。
-
Muhi Line Submit:允許文本換行码荔。只在需要時才換行。 -
Multi Line Newline：允許文本換行感挥。用戶可以按回車鍵來換行缩搅。
