文.圖:林昭自

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

2014-4-9 下午 06-21-05  



      在使用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本身是要收費的,不過價格並不是太貴,加上可以有持續升級的支援,我個人認為是一項很值得的投資。如果有任何的疑慮,也可以先考慮試用他們所提供的免費試用版。

2014-4-3 下午 pic01  

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

2014-4-3 下午 pic02

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

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

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

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

2014-4-3 下午 pic04

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

2014-4-3 下午 pic05

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

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

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

2014-4-3 下午 pic07

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

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

2014-4-3 下午 pic08

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

2014-4-3 下午 pic09
Example 10 - Localization
示範NGUI如何製作多國語系的介面。

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

2014-4-3 下午 pic011   
Example 12 - Chat Window
示範一個簡易的聊天對話框。

2014-4-3 下午 pic012

Example 13 - Tab
製作分頁。

2014-4-3 下午 pic013  
Example 14 - Endless Scroll View
示範一個可以循環顯示的卷軸視窗。

2014-4-3 下午 pic014
Example X - Character
示範如何從NGUI結合常見的腳色換裝系統。

2014-4-3 下午 pic015

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

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

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

2014-4-3 下午 pic016
    要建立整個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開發的遊戲

, , , , , , ,

lccnetvip 發表在 痞客邦 PIXNET 留言(0) 人氣()