文.圖:林昭自

 本文轉載自聯成電腦技術論壇,歡迎點選此連結,前往駐站專欄與講師互動。 

20140515pic0000

 

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

聯成電腦昭自老師專欄:超好用Unity外掛-NGUI介紹 (二)


關於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元件排版的效果。


結論
    在這篇文章中,為各位介紹NGUI中的兩個通用控制項,在下一篇文章中,我們將為各位繼續介紹其它好用的元件。

延伸閱讀

聯成電腦昭自老師專欄:超好用Unity外掛-NGUI介紹 (二)

聯成電腦昭自老師專欄:超好用Unity外掛-NGUI介紹 (一)

聯成電腦昭自老師專欄:如何將Unity開發的遊戲上架到Google Play。

聯成昭自老師專欄:如何在Android手機上測試由Unity開發的遊戲

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(0) 人氣()