NGUI介紹(三)Widget及Anchor

2014/5/21

名師專欄 Unity 林昭自

文.圖：林昭自

前言
在上一篇介紹內，我們說明了在NGUI中如何新增Sprite元件以讓我們在場景中設置一些圖片。事實上幾乎所有的NGUI的元件中幾乎都包含一個叫做Widget的控制項，在這篇文章中，我們就來為各位介紹什麼是Widget。此外，針對不同螢幕尺寸，我們可以透過設定Anchor的方式來達到更動態更彈性的排版方式。

關於Widget

20140515pic0001
Widget這個控制項在NGUI中被設計成一個通用型的控制元件，由於幾乎所有的UI物件都需要可以設定顏色，或是對齊方式等功能，這些共通性的設定就由Widget這個控制項來實作。首先第一個欄位可以讓我們針對個別UI物件設定色偏，接著Pivot可以讓我們設定UI物件的對齊方式，共有左上，左下，右上，右下，水平置中，垂直至中等，借由組合Pivot的設定。通常在製作UI時，我們常常會遇到要設定個別元件的深度值，以決定哪個元件在上，哪個元件在下，我們可以利用Depth欄位的值來決定。Dimensions則可以讓我們設定UI元件的尺寸，如果要讓UI元件的大小直接跟圖片的大小相同，則可以透過Snap功能達成。如果希望固定元件的長寬比，我們可以利用Aspect Ratio來設定，計算長寬比的依據有自由設定，基於元件寬度，與基於元件高度等三種模式。

關於Anchor

20140515pic0002

Unity本身是一個跨平台的遊戲引擎，因此由Unity所製作的遊戲會被發佈在許多不同的平台上。不同平台的螢幕有大有小，因此如果我們將UI元件的位置或是尺寸設定成定值，並不能滿足不同螢幕尺寸的問題。在NGUI中，個別UI元件可以透過設定Anchor來動態計算UI元件的位置或是尺寸，概念上我們可以透過Anchor設定中，先指定一個參考用的物件，通常是父物件或是UIRoot物件，然後我們再指定此元件的上下左右邊界，與參考元件的距離，這樣即使遇到不同的螢幕解析度，任何UI元件總是能透過參考元件的尺寸，反推出本身物件的位置或是尺寸，進而達到自動計算UI元件排版的效果。