UGUI 第一篇

UGUI ,一直都是沒仔細看看,這裏至少列出需要去學的東西。

using UnityEngine.UI;
using UnityEngine.Events;
using UnityEngine.EventSystems;

1、Canvas 相關組件

Canvas、—— 主要設置 Render Mode,決定是屏幕空間還是3D空間
Canvas Scaler、—— 主要設置 UI Scale Mode,決定UI的自適應縮放(和自動佈局不同)
Graphic Raycaster、—— 射線,應該是忽略一些層的物體之類的

Canvas Group、
Canvas Renderer、

第1點——Canvas 渲染模式

Canva 3種渲染模式 說明
Screen Space - Overlay 默認,類似屏幕貼膜,一定是最上層的,無須指定相機
Screen Space - Camera Canvas放在一個相機的指定距離,通過該相機渲染,相機設置改變會有影響
World Space 此模式下,Canvas類似普通的3D物體,通過座標來決定遮擋關係

第2點——Canvas Scaler 縮放模式

Canvas Scaler 3種縮放模式 說明
Constant Pixel Size
Scale with Screen Size
Constant Physical Size

第3點——Graphic Raycaster

Graphic Raycaster
每個Canvas都會有一個 Grahpic Raycaster,用於獲取用戶選中的 UI控件;
如果有多個 Canvas,那麼Canvas之間的事件響應順序由其顯示順序決定,Hierachy面板越靠上越後響應;
除了Screen Space - Overlay,另外兩種渲染模式,Graphic Raycaster可以用來設置遮擋目標。

第4點——注意要點

注意要點
1、UI元素在Canvas裏的繪製順序和它們在Hierachy中的順序相同,後一個會擋在前一個上邊
2、如果有多個 Canvas,那麼Canvas之間的事件響應順序由其顯示順序決定,Hierachy面板越靠上越後響應
3、除了Graphic Raycaster,Component / Event / …還有 Physics Raycaster、Physics 2D Raycaster

2、Event System

Event System 對象是自動創建的,默認帶了2個組件,是Unity中的事件管理系統,是一種將輸入事件發送到應用程序的對象,包括鼠標、鍵盤、或自定義輸入。

Component -> Event -> xxx(這裏邊有輸入、事件觸發器、射線(這個射線應該放在Canvas中))

默認帶的兩個

Event System
Standalone Input Module

其他

Touch Input Module (已經不再需要,因爲它的功能已經被 Standalone Input Module 實現)
Event Trigger
。。。。。

3、可視化組件

Text(考慮富文本RichText)、
Image、—— 用於顯示 sprite
Raw Image、—— 用於顯示 texture
Mask、—— 用於限定子物體的顯示不會超出此物體的範圍
RectMask2D、——
顯示組件共用的UI Effect Components —— Shadow、Outline、Position as UV1

GameObject -> UI - > Panel 物體 —— 創建的UI是一個帶Image組件的對象,沒有 Panel 這樣的組件
一個覆蓋屏幕的平面,一般可以用來顯示UI背景,另外它的 Image 的 alpha不會影響子物體
另外,Panel 會自動根據屏幕大小來調整自身大小,所以不用擔心其屏幕自適應問題
至於爲何會調整自身大小,是因爲它的Rect Transform的 Anchor是父物體Canvas的4個角

4、交互組件

Selectable Base Class —— Transition Options、Navigation Options
Button、
Toggle、
Toggle Group、
Slider、
Scrollbar、
Dropdown、
Input Field、
Scroll Rect、

GameObject -> UI -> ScrollView,創建的UI是一個複合對象,沒有 Scroll View 這樣的組件,用的是 Scroll Rect + Image + xx

//Button一種註冊方式,點擊時就會自動調用相應方法
button.onClick.AddListener(Test_AddFunction);

5、Rect Transform 與 錨點Anchor

6、Animation Intergation —— UI動畫

7、Auto Layout自動佈局

LayoutElement、
Content Size Fitter、
Aspect Ratio Fitter、
Horizontal Layout Group、
Vertical Layout Group、
Grid Layout Group、

8、各種UI事件 ——

回調函數、如何註冊事件

9、UI How Tos ——

爲多分辨率設計UI
使UI元素適應容器大小
創建一個世界座標的UI
由腳本創建UI元素
用動畫來創建一個屏幕移動的效果(例如UI元素由屏幕外移動到屏幕內)

10、UGUI源碼

11、UI框架

發佈了46 篇原創文章 · 獲贊 8 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章