NGUI是嚴(yán)格遵循KISS原則并用C#編寫的Unity（適用于專業(yè)版和免費版）插件，提供強大的UI系統(tǒng)和事件通知框架。其代碼簡潔，多數(shù)類少于200行代碼。這意味著程序員可以很容易地擴展NGUI的功能或調(diào)節(jié)已有功能。對所有其他用戶而言，這意味著更高的性能、更低的學(xué)習(xí)難度和更加有趣。

軟件特色

　　完全集成到Inspector面板中。

　　不需要點擊Play按鈕就能查看結(jié)果。

　　在場景視圖中看到的就是在游戲視圖中得到的（所見即所得）。

　　基于組件的、模塊化的特性：要讓你的界面控件做什么，只需為其附加相應(yīng)的行為，而不需要編碼。

　　全面支持iOS/Android和Flash。

　　靈活的事件系統(tǒng)。

　　可以讓復(fù)雜的UIs只占用一個draw call。

　　可以直接在編輯器中創(chuàng)建、更新/修改紋理地圖集，或從Texture Packer程序?qū)爰y理地圖集。

　　支持光照貼圖、法線貼圖、折射等特性，讓你盡情發(fā)揮創(chuàng)造力！

　　支持硬邊或柔性的面板裁剪。

　　支持靈活尺寸的表格，能夠自動對控件進行排列。

　　通過IME輸入法支持東方語言（有Web版本的演示程序）

　　內(nèi)建本地化系統(tǒng)。

　　內(nèi)建的鍵盤和搖桿支持。

　　提供大量有用的輔助腳本，從改變按鈕顏色到拖拽對象。

　　簡單的內(nèi)建補間動畫系統(tǒng)。

　　簡潔和高度優(yōu)化的C#代碼。

　　沒有DLL，也不依賴于其他外部資源NGUI的使用方式與Unity的使用方式一樣。使用Widget Tool可快速創(chuàng)建模板化的控件，或者從基本組件創(chuàng)建你自己的控件?？梢园凑漳愕囊庠缚截?粘貼，把你的窗口保存為prefabs。所有一切只需簡單地點

　　擊操作即可完成。當(dāng)需要編寫代碼讓控件移動時，可以選擇簡單的例子代碼，可以把你的控件轉(zhuǎn)變?yōu)榘粹o、輸入框、基于事件改變顏色、播放聲音、觸發(fā)動畫等等。

使用說明

　　一:創(chuàng)建你的界面

　　1.創(chuàng)建一個新場景.

　　2.選擇并刪除場景里的MainCamera.

　　3.在NGUI菜單下選擇Create a New UI,會打開UI創(chuàng)建向?qū)?

　　4.在創(chuàng)建向?qū)е心隳芨腢I的基本參數(shù),現(xiàn)在我們選Default layer.點擊Create Your UI 按鈕.

　　5.就這樣,你的UI創(chuàng)建好了.

　　如果在一個已存在NGUI的項目中你要跳過第二步,并且你要選擇一個不同的UI層,你還要確保非GUI相機不渲染UI層.

　　在做具體UI控件之前,我們看看UI向?qū)槲覀冏隽耸裁?

　　1.在2D的根對象上有個UIRoot腳本.這個腳本會重新調(diào)整游戲?qū)ο蠓夏愕钠聊桓叨?有自動和手動選擇高度.

　　2.Camera對象包含Camera和UICamera腳本.UICamera腳本包含NGUI的時間系統(tǒng).

　　3.Anchor包含UIAnchor腳本.雖然這個腳本可以附加給控件,但在這里可以避免Windows機器上半個像素偏移的問題.

　　4.Panel對象有UIPanel腳本呢,UIPanel是一個容器,它將包含所有UI小部件,并負責(zé)將所包含的部件組合優(yōu)化,以減少DrawCall.

　　同樣你可能還注意到目前自動幫你選中了Panel對象,也就是說下面添加的所有部件都將在作為它的子對象.

　　二:精靈Sprite

　　現(xiàn)在讓我們添加一些控件,在NGUI菜單中選擇Create a Widget.

　　這個向?qū)笇?dǎo)你建立一些基本的控件.需要選擇所實用的Atlas和字體,因為是新建的項目,所有按下Atlas和Font按鈕沒有效果,相反會自動復(fù)制為你最近使用的元素.我們這里先選擇Atlas為SciFi Atlas,字體為SciFi Font-Normal.

　　接下來在Template選擇創(chuàng)建什么類型的控件.這個的模板只是幫助你開始創(chuàng)建,當(dāng)你真正使用NGUI的時候.你會經(jīng)常用這個向?qū)?chuàng)建控件的基本體.

　　現(xiàn)在,讓我們創(chuàng)建第一個控件.

　　1.假設(shè)我們Atlas選擇的是SciFi Atlas,我們給Sprite選擇Dark.

　　2.點擊Add To按鈕,(如果按鈕是灰色的,那是因為你沒有選擇Atlas).

　　3.你的Sprite現(xiàn)在已經(jīng)創(chuàng)建并選中了.不過它非常小,讓我們用Transform來調(diào)整它符合我們的需要.

　　一個值得注意的事是同一個atlas中創(chuàng)建控件不會響應(yīng)Z軸變換,不過你可以調(diào)整Depth參數(shù)來調(diào)整他們的前后次序.如果后面你用了多個atlase或者多個UI面板,那么你就可以去調(diào)整Z軸變換.

　　你可以嘗試添加更多的控件,比如加入一個Sliced Sprite(一個含有9個切片的Sprite,創(chuàng)建固定邊框的控件最佳選擇),一個Tiled Sprite(一個Sprite縮放填充整個區(qū)域)和Filled Sprite(每個Sprite都會有一個單獨的參數(shù)來控制那些是可見的,常被用來做進度條或者滾動條).如果你找不到它們也沒關(guān)系,后面的教程將講解它們.

　　三:9-Slicing Sprite

　　1.選擇Panel對象,用控件向?qū)砑右粋€"Drak"的Sliced Sprite.什么叫9-slicing?查看這里:http://www.Adobe.com/designcenter/video_workshop/html/vid0204.html

　　2.調(diào)整縮放為(500,500,1).

　　3.添加另外一個Sliced Sprite并設(shè)置縮放為(500,40,1).

　　4.更改第二個sprite的位置到(0,230,0).

　　5.更改Sprite的Dark為Light.

　　6.向下圖一樣調(diào)整兩個sprite的顏色.

　　7.調(diào)整Depth,讓彩色的sprite在大的sprite前面.

　　現(xiàn)在看起來像個小窗口了.

　　四:拼貼精靈

　　1.選擇Panel對象,添加Tiled Sprite,并選擇Honeycomb sprite.

　　2.設(shè)置它的位置為(0,-19,0)和縮放為(494,457,1).

　　3.同樣你要設(shè)置深度調(diào)整前后次序.

　　可以按照自己的意愿調(diào)整它的顏色使他看起來更好.

　　你可以在任何時候通過選擇Panel對象中的Debug Info的Geometry項來查看創(chuàng)建的控件的幾何網(wǎng)格.

　　添加了這么多東西,目前依舊僅有一個Draw call.

　　五:標(biāo)簽

　　1.像前面講的一樣方法選擇Panel對象并添加一個Label控件.

　　2.并點擊Add To 按鈕,如果Add To按鈕不可用,是因為你沒有指定字體,可以給Font欄指定"SciFi Font-Normal".

　　3.在檢視面板給剛添加的UILabel的Text項添加一些文本.比如Hello World!

　　4.移動標(biāo)簽位置到(0,234,0),讓它出現(xiàn)在標(biāo)題欄上.

　　可以添加多個Label并且使用16進制的值描述不同顏色.以[FF0000]開始,[-]結(jié)束,在這之間的文本都會變?yōu)榧t色.

　　因為使用了相同的字體相同的材質(zhì),所有整個場景依舊是一個DrawCall.

　　六:按鈕

　　現(xiàn)在,你應(yīng)該可以很容易的創(chuàng)建一個按鈕了,但還不知道如何讓它接受點擊時間.不過這很簡單,任何碰撞盒都會收到它應(yīng)有的事件.所以,一個簡單的按鈕你只需要在NGUI下選擇Attach a Collider給控件,另外NGUI的模板已經(jīng)有按鈕末班,讓我們看看.

　　我們選擇Panel,用向?qū)?chuàng)建一個Button.

　　你能看到按鈕有多個部分,一個是背景,一個是文本標(biāo)簽還有一些腳本,這就是NGUI的特性,多個小組件像樂高積木一樣組合成強大的控件.

　　1. UIButtonColor當(dāng)鼠標(biāo)懸停在按鈕或者按下的顏色.

　　2. UIButtonScale當(dāng)鼠標(biāo)懸停在按鈕上時按鈕放大.

　　3. UIButtonOffset當(dāng)按下按鈕時按鈕像右下的位移.

　　4. UIButtonSound當(dāng)按鈕按下時播放聲音.

　　當(dāng)然還有其他組件,比如UIButtonPlayAnimation 和 UIButtonMessage,你自己摸索嘍.

　　你也可以添加自定義事件讓它處理更多的事件.

　　現(xiàn)在,你應(yīng)該做成這樣的一個界面了.

　　七:滑塊

　　下面讓我們添加一個滑塊.

　　1.用Widget Tool,選擇Slider模板.

　　2.給Foreground用Button,給Background用Dark.Thumb可以也用Button.

　　3.選擇Panel后點擊Add To按鈕.

　　一個滑塊滾動條就做好了.你可以選擇滑塊的游戲?qū)ο筮M行顏色和尺寸的調(diào)整，但是經(jīng)驗建議你不要去調(diào)整控件對象下面的子對象.

　　你可以嘗試再做一個垂直滑塊.

　　八:復(fù)選框

　　接下來我們來做復(fù)選框:

　　1.點擊蒙版用"X",背景用"Dark".

　　2.創(chuàng)建一個復(fù)選框后再選擇Panel對象創(chuàng)建一個新GameObject.

　　3.添加更多的復(fù)選框到這個GameObject.

　　4.在這些復(fù)選框上選擇Option項.

　　5.運行一下程序,點擊復(fù)選框.看看效果.

　　有關(guān)聯(lián)的復(fù)選框只需要放在同一個父游戲?qū)ο笾屑纯?

　　還可以附件一些其他事件處理功能,如UICheckboxControlledComponent 和 UICheckboxControlledObject.可以用來由復(fù)選框狀態(tài)來啟用禁用指定的組件或者游戲?qū)ο?

　　嘗試著做3個復(fù)選框來控制紅,綠,藍三個控件的顯隱.

　　九:輸入框

　　現(xiàn)在我們來創(chuàng)建一個輸入框.任何文本標(biāo)簽通過添加碰撞盒盒UIInput腳本都可以變成輸入框.不過這里我們也可以用Input模板來創(chuàng)建:

　　1.正如你掌握的,用Widget Tool創(chuàng)建輸入框.

　　2.可以用"Dark"或"Highlight"作為背景.

　　3.將它調(diào)試正確.

　　播放游戲,點擊輸入框就可以直接輸入文字,在iOS和Android設(shè)備上則會自動顯示屏幕鍵盤.這個輸入框同樣也支持Unity3.4.1新增的輸入法類,讓你能輸入中文.目前唯一不支持Flash平臺,因為Unity Flash還沒增加IME輸入支持.

　　十:三維界面

　　上面的我們一直在做2D的界面,但我們也可以很容易的讓它變成3D界面.繼續(xù)跟著我做吧:

　　1.將Panel從Anchor的子物體中解除掉,由UI Root作為它的父對象.

　　2.刪除Anchor(本教程我們只做靜止的UI).

　　3.將攝影機改成透視投影.

　　4.將相機的Near改為0.1和Far改為4.0.

　　5.將相機往后移動一點,大概在(0,0,-550)的位置.

　　6.給Panel一點角度,我們這里設(shè)置旋轉(zhuǎn)為(0,345,0).

　　7.另外一個霸氣的東西就是添加PanWithMouse到Camera.

　　點擊Play,試著移動鼠標(biāo).看發(fā)生了什么.如果你做的沒錯,你將會看到下面這樣的窗口.