每個UI元件都具備的元件就是RectTransform了,Transform表示空間中點座標,RectTransform表示的就是UI元素放置在矩形空間的位置。如果RectTransform的父元素也是RectTransform,那麼RectTransform子元素也可以設定如何對應於父層矩形定位和調整大小,但UI的零組件必須存在於Canvas底下,產生階層關係方能使用,我們可以透過GameObject選單>UI 在場景上新增UI的其他元件,接下來就看看有那些吧。
首先只要是UI組件都會有的元件
RectTransform
創建任意的UI組件後可以看到RectTransform的元件取代了一般遊戲物件的Transform。
Pos(X,Y,Z) | 矩形的軸點相對於錨點的位置。 |
Width/Height | 矩形的寬度和高度。 |
Left, Top, Right, Bottom | 矩形邊緣相對於它們的錨點的位置。這可以被認為是由錨所定義的矩形內的間距。 |
Anchors | 矩形的左下角和右上角的定位點。 |
Min矩形左下角的錨點定義。0,0對應錨到父項的左下角,而1,1對應錨到父項的右上角。 | |
Max矩形右上角的定位點定。0,0對應錨到父項的左下角,而1,1對應錨到父項的右上角。 | |
Pivot | 矩形旋轉的樞軸點的位置,定義為矩形本身的大小的一部分。0,0對應於左下角,而1,1對應於右上角。 |
Rotation | 物體繞樞軸點沿X、Y、Z軸的旋轉角度。 |
Scale | 在X、Y、Z上應用的比例。 |
版面類組件
依照選單的分隔線劃分,版面框架組件除了先前講的Canvas外,還有Panel、ScrollView可以加到Canvas下做分層使用。
Panel
Panel相當單純,就是圖層的概念,他只有一個Image在底下用來設定背景圖片或顏色,通常會把相關的UI放在這個組件底下做分類,重點在於它的Rect預設是滿版的。
我麼可以透過點選左上的圖示來改變,就可以用不同的方式設定對齊和尺寸。
Scroll View
這個組件就複雜許多,通常是內容超出畫面大小時使用,他的子元件包括一個Viewport和兩個卷軸Scrollbar Horizontal、Scrollbar Vertical。
整體結構如下圖,Viewport底下的Content就是內容,它的大小會決定卷軸的狀態,也可以取消某一邊的卷軸。
Scroll View上的ScrollRect有指定Content對象,看需不需要橫直軸的選項,和相關的參數。
Content | 要滾動的元素。 |
Horizontal | 啟用水平滾動 |
Vertical | 啟用垂直滾動 |
Movement Type | 彈性或夾緊。使用Elastic或Clamped強制內容保持在Scroll Rect的邊界內。彈性模式在到達Scroll Rect邊緣時彈回內容 |
Elasticity | 彈性模式中使用的彈跳量。 |
Inertia | 設置慣量時,拖動後釋放指針時內容將繼續移動。未設置慣性時,內容僅在拖動時移動。 |
Deceleration Rate | 設置慣量時,速率為0將立即停止運動。值為1表示運動永不減速。 |
Scroll Sensitivity | 滾輪和的靈敏度。 |
Viewport | 內容物的父級物件。 |
Horizontal Scrollbar | 可選參考水平滾動條元素。 |
Vertical Scrollbar | 可選參考垂直滾動條元素。 |
Visibility | 滾動條是否在不需要時自動隱藏。 |
Spacing | 滾動條和Viewport之間的空間。 |
內容組件
Text
Text | 顯示的文本內容。 |
Character | |
Font | 顯示的文本字體。 |
Font Style | 文本的樣式。選項為正常,粗體,斜體和粗體+斜體。 |
Font Size | 文本字體大小。 |
Line Spacing | 文本行之間的垂直距離。 |
Rich Text | 文本中的標記元素是否被解釋為RichText樣式。 |
Paragraph | |
Alignment | 文本的水平和垂直對齊。 |
Align by Geometry | 使用字形幾何的範圍來執行水平對齊。 |
Horizontal Overflow | 文本太寬而無法放入矩形的情況可以選擇Overflow。 |
Vertical Overflow | 用於處理文本太高而不適合矩形的情況可以選擇Overflow。 |
Best Fit | 忽略尺寸屬性,試圖將文本放到控件的矩形極限值。 |
Color | 設定文本的顏色。 |
Material | 設定材質。 |
Image & RawImage
顯示圖像用的元件有兩種Image和RawImage,Image只允許使用Sprite格式,RawImage則可以接受多種不同影像。
Source Image | 表示顯示的圖像紋理(必須為Sprite)。 |
Color | 要應用於圖像的顏色。 |
Material | 用於渲染圖像的材質。 |
Raycast Target | 射線是否可碰觸目標。 |
Preserve Aspect | 確保圖像保持現有維度。 |
Set Native Size | 按鈕將圖像框的尺寸設為紋理的原始像素尺寸。 |
Texture | 表示要顯示的圖像的紋理。 |
Color | 要應用於圖像的顏色。 |
Material | 用於渲染圖像的材質。 |
UV Rect | 圖像在控制矩形內的偏移量和大小,範圍0.0到1.0。 |
功能型組件
Button
按鈕組件則組合了圖像和文字的元件外,就是按鈕本身必備的Button元件。
Interactable | 該組件是否作用。 |
Transition | 控件對用戶操作進行可視化響應,改變顏色或圖案。 |
Navigation | 確定控件序列的屬性。 |
On Click | 當用戶單擊按鈕並釋放按鈕時調用UnityEvent。 |
Toggle
切換或複選框,可以配合ToggleGroup使用,讓群組的選項一次只能啟動一個。
Interactable | 該組件是否作用。 |
Transition | 控件對用戶操作進行可視化響應,改變顏色或圖案。 |
Navigation | 確定控件序列的屬性。 |
Is On | 開關是否預設開啟。 |
Toggle Transition | 切換值在更改時以圖形方式反應的方式。 |
Graphic | 用於選中標記的圖像。 |
Group | 切換群組間的選項(如果有的話)。 |
On Value Changed | 值產生變化時觸發事件。 |
Slider & Scrollbar
也都有和之前幾個很類似的參數屬性設定顏色圖像設置,值改變時要觸發事件,或將值寫入。
Dropdown
則是可以設定下拉的選項內容,Options可以透過+號新增,還有選項改變時要執行的事件。
InputField
提供了輸入文字的框架,可以用值改變時或結束編輯兩個條件觸發事件,結構下有兩個Text組件分別負責提示文字和實際輸入的文字,對應欄位是Placeholder和Text Component。
主要的元件大致上就是這些,之後再針對各元件的應用逐一介紹。