Unity UGUI 原理篇(三)：RectTransform

RectTransform

RectTransform 是 Transform 的 2D 對應 Component，Transform 表示單個點，RectTransform 表示一個2D矩形(UI空間)，如果父子物體都有RectTransform，那麼子物體可以指定在父物體矩形中的位置與大小，簡單來說RectTransform 就是定義UI元素的位置、旋轉、大小

 

 

Anchor (錨點)

物體的錨點(對齊點)，如果父子都有 RectTransform 情況下，子物體可以依據 Anchor 對齊到父物體，又分為 Min 與 Max 位置，如下圖物體四周有4個三角形

Anchor Min	物體左下角對齊點，(0,0) 對應到父物體中的最左下位置，(1,1) 對應到父物體中的最右上位置
Anchor Max	物體右上角對齊點

 

Anchor位置座標與關係

當我們使用滑鼠點選4個三角形調整Anchor時，會貼心的出現比例訊息，此比例是子物體在父物體中的縮放比例

 

 

當Canvas 下有1張圖 Anchor Min 與 Anchor Max 皆為 (0.5 , 0.5)，如下左圖部分

如果將Anchor Min調整為(0.3, 0.5) ，Anchor Max調整為 (0.5, 0.7)，如下右圖部分

注意看 左圖 Pos X、Pos Y、Width、Height ，會改變為 右圖 Left、Top、Right、Buttom

因為當 Anchor 在同一點時，顯示的是物體的座標與大小，當 Anchor 不在同一點時(此時會形成矩形)，顯示的會是 Anchor 矩形填充空間，如下圖，(P.S.在我們移動物體時會貼心的顯示目前與 Anchor 距離關係)

 

上面看完一定還是不了解怎麼運作，讓我們來透過實例了解一下

Canvas 下有5張圖，Anchor Min 與 Anchor Max 皆為 (0.5 , 0.5)，物體的位置會對齊到父物體的中心，當父物體大小改變時，情形如下

 

Canvas 下有1張圖，Anchor Min 與 Anchor Max 皆為 (0.0, 1.0)，物體的位置會對齊到父物體的左上角，當父物體大小改變時，情形如下，物體會固定在左上角

 

Canvas 下有1張圖，Anchor Min 為 (0.0, 0.0)， Anchor Max 為 (1.0, 0.0)，物體的位置會對齊到父物體的左下角與右下角，當父物體大小改變時，情形如下，物體寬度會隨著父物體改變

 

由上面的幾個實例可以知道，子物體會依據所設定 Anchor 對齊到父物體，當父物體大小改變時，透過 Anchor 更新子物體，上面有提到當我們點選4個三角形調整Anchor時，畫面會貼心的出現比例訊息，相信有經驗的人一定知道該比例的用意，此比例就是子物體在父物體中的縮放比例，以下舉例

 

原來數值

Parent Size (400, 350)

Image Size (120, 105)

Anchor Min 為 (0.2, 0.5)， Anchor Max 為 (0.5, 0.8)

 

Parent Size 一半時數值

Parent Size (200, 175)

Image Size (60, 52.5)

Image Size Width  = 400 * 50% * 30% = 60

Image Size Height = 350 * 50% * 30% = 52.5

Anchor Min 為 (0.2, 0.5)， Anchor Max 為 (0.5, 0.8)

經由上面可以得知父物體在縮小2倍後，父物體透過子物體的 Anchor 比例更新子物體，透過這種方式，我們可以達到不同螢幕解析度自動改變UI大小與位置

 

Anchor Presets

點選 RectTransform 左上角，可以開啟Anchor Presets 工具，這邊列出了常用的 Anchor ，可以快速套用，按住Shift 可以連同 Pivot 一起改變，按住 Alt 可以連同位置一起改變

 

 

Pivot (支點)

物體自身的支點，影響物體的旋轉、縮放、位置，改變 UI Pivot 必須先開啟控制面板的 Pivot 按鈕，如下圖

 

當 Pivot (0.5, 0.5)

 

 

當 Pivot (0, 1)

 

 

Blue Print Mode(藍圖模式) 、 Raw Edit Mode(原始编辑模式)

 

Blue Print Mode (藍圖模式)

忽略了物體的 Local Rotation 和 Local Scale，方便以原來的旋轉與大小調整物體

 

Raw Edit Mode (原始编辑模式)

在 Inspector 中調整 Pivot 和 Anchor 時，物體會維持目前的位置與大小(Inspector 中數值部分)，調整情形如下，請注意數值部分

Inspector 中調整  Pivot

 

Inspector 中調整  Anchor

 

 

參考資料

■ Unity – Manual: Basic Layout

http://docs.unity3d.com/Manual/UIBasicLayout.html