聯成電腦-讓你價值連城

文.圖：林昭自

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

      在使用Unity無論是製作2D或是3D遊戲本身的過程中，透過Unity內建的GUI工具來製作UI時，絕大多數的開發者都覺得並不是這麼好用。無論是GUITexture組件或是直接透過在Script中的OnGUI函式來製作UI時，都會面臨相同的問題，就是必須要自己去計算螢幕當時的解析度，再回過頭來計算每個UI元件合適的位置及尺寸。如果今天的遊戲規模很小，UI的元件數量很少， 那麼這件事情還勉強可以被接受。但若是一個規模稍大的遊戲，UI 元件的數量很多時，那麼這件事情就變成了一個災難。Unity官方已經承諾會在UI工作上做出一定程度的改善，但是對全球的開發者來說，時間是非常寶貴的，在這邊為大家介紹一個UI製作工具的替代方案NGUI。
NGUI的全名為Next-Gen UI Kit，意思是下一個世代的UI。我們可以在Asset Store上面或是NGUI的官網上找到免費試用版，NGUI本身是要收費的，不過價格並不是太貴，加上可以有持續升級的支援，我個人認為是一項很值得的投資。如果有任何的疑慮，也可以先考慮試用他們所提供的免費試用版。

NGUI的特色
•完整跟Inspector整合。
•不需要按下Play才能看到你的UI結果。
•我們在SceneView中看到的樣子，就是我們在GameView中看到的結果。
•符合Unity的組件式設計哲學：組合你需要的功能，透過寫最少的程式碼，完成最多的功能。
•完整的跨平台支援。支援Web，Windows，Mac OSX， Android， iOS等。
•具有彈性的事件處理機制。
•只需要最少的Draw Call，就可以畫出相當複雜的UI。
•我們可以在編輯器中製作Atlas不需要透過額外的工具。
•製作出來的UI元件可以支援光照，法線貼圖等。
•支援元件的可視裁切。
•支援多國語系。
•內建易用的動畫腳。
•乾淨簡短且最佳化的C#程式碼。
•沒有DLL或是其他不必要的資源。

NGUI官網
http://www.tasharen.com/?page_id=140

NGUI Asset Store
https://www.assetstore.unity3d.com/#/content/2413

安裝NGUI
安裝NGUI的方式可以從Asset Store上或是前往NGUI的官網下載。NGUI本身也被包裝成一個unitypackage。下載完之後直接匯入到你的Unity專案中即可。

官方範例
NGUI包裝檔中包含了許許多多的使用範例，當我們將NGUI匯入到Unity之後，範例會一併被匯入，位置在 Assets/NGUI/Examples/Scenes/資料夾中。

Example 0 - Control Widgets
包含了NGUI中所有常見的UI控制項，像是按鈕，文字輸入欄，下拉式選單，卷軸等等。

Example 1 - Anchors
示範了Anchor的用法。Anchor在NGUI中指的定位點，在製作UI元件時，我們往往需要指定特定UI元件的位置，同時也要考慮在不同螢幕解析度或者是長寬比下的問題，Anchor能幫助我們輕易地解決這個問題。

Example 2 - Interaction
示範如何使用按鈕元件來傳遞訊息，進而控制其他元件。在這個範例中，我們還可以理解到NGUI也同時支援3D的介面呈現。

Example 3 - Menu
示範一個常見的選單製作方式，同時結合內建的Tween系統，來達成選單切換的動畫效果。

Example 4 - Controller Input
雖然看起來跟範例三長得一模一樣，但這個範例主要提供使用者可以藉由鍵盤輸入來控制UI的流程。

Example 5 - Lights and Refraction
示範UI控制項本身可以指定材質，同時接受場景光源打光的效果。我們可以額外指定法向量貼圖Normal Map來做一些更進階的效果。

Example 6 - Draggable Window
示範一個可以拖拉移動的視窗。

Example 7/8 - Scroll View
示範捲動元件的用法。

Example 8 - Quest Log
示範一個任務對話框的用法，任務的細節說明可以藉由展開UI元件的方式來查看。

Example 10 - Localization
示範NGUI如何製作多國語系的介面。

Example 11 - Drag n Drop
示範一個可以拖拉位移的UI元件製作方式。

   
Example 12 - Chat Window
示範一個簡易的聊天對話框。

Example 13 - Tab
製作分頁。

  
Example 14 - Endless Scroll View
示範一個可以循環顯示的卷軸視窗。

Example X - Character
示範如何從NGUI結合常見的腳色換裝系統。

      以上這些範例示範了如何藉由NGUI來實現常見的UI元件。對於想要徹底了解NGUI系統的我們來說是相當實用的資源，這邊會先從整個UI概念開始介紹。

概念
     NGUI的概念是所有的UI元件也是被放在場景中，也就是它們其實也算是3D物件。NGUI會透過一台獨立的正交投影攝影機專門去顯示這些UI元件，又由於場景中存在超過兩台攝影機，因此決定攝影機繪圖的先後順序變得非常重要。一般說來UI元件多半會蓋在我們的場景之上，因此用來Render使用者介面的攝影機的順序必須要在場景攝影機之後。我們可以藉由觀察場景攝影機與UI攝影機中的Depth欄位來確認這件事情。一般說來UICamera的Depth必須要大於Scene Camera，才能確保UI Camera的繪製順序。

建立我們的第一個UI，當成功匯入NGUI之後，在Unity的主選單上會多了NGUI的選單。

    要建立整個UI系統，我們可以從NGUI → Create → 2D UI來建立。我們的UI建立完之後，會在場景中產生下列物件：
UI Root Camera

其中UI Root會幫助我們去根據不同螢幕的尺寸大小來調整個別UI元件的尺寸，他有三種縮放元件的模式，分別為：
•Pixel Perfect
•Fixed Size
•Fixed Size On Mobile

Pixel Perfect代表的意思為，如果你有任何一個元件是200x300的尺寸，那麼實際呈現在畫面上就會剛好是200x300 pixel，無論實際的螢幕尺寸為何。這樣的作法跟Unity內建的GUI想法是一致的。好處是 我們請美術畫的GUI元件是多大就是多大。由於不會自動縮放，可以確保圖片的精緻度，但是缺點是缺少了自動調整大小的機制。
Fixed Size則是會根據螢幕的大小來動態調整，如果在場景中我們擺放了一個大小是整個螢幕大小25%的元件，那麼不管實際上我們的螢幕多大，這個UI元件就會是螢幕尺寸的25%。
Fixed Size On Mobile：如果今天遊戲是一般桌機的版本，那麼縮放的模式是Pixel Perfect，如果遊戲跑在行動裝置上，縮放的模式則會變成Fixed Size。
接下來我們說明UIRoot底下的第一個子物件Camera。這個Camera物件本身帶有Unity內建的Camera Component。重點在於它將投影模式設定成Orthorgraphic(正交投影)，另外正交投影的尺寸會被固定在1。才能夠讓UI元件是Pixel Perfect。

Camera則是我們之前所提到專門用來繪製UI元件用的攝影機 之後所有的NGUI元件都需要放在Camera這個物件的子物件，除了Camera組件之外另外還有UICamera組件。UICamera主要負責傳遞各種UI的事件，換句話說他會負責派發各項事件到不同的UI元件上。

後記
到目前為止我們已經準備好要開始製作我們的第一個UI。在下篇教學中，我們將會示範各種NGUI常見元件使用方式。

延伸閱讀

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

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