????????NGUI作為Unity的一個UI工具，從Unity開始時(shí)就跟著迭代發(fā)展。到現(xiàn)在，最新版本已經(jīng)是NGUI Next Gen UI v3.12.1。再Unity自身的UI工具也就是UGUI還沒有的時(shí)候，NGUI可以說是Unity程序必會的一個插件。就算是UGUI出現(xiàn)，也不能掩蓋NGUI的光芒，而且眾所周知，NGUI的作者還是UGUI的開發(fā)者之一。

? ? ? ? 這篇文章只是對NGUI做一個整體的介紹，至于詳細(xì)的深入將在之后的文章中進(jìn)行。

? ? ? ? NGUI主要分為四個部分。一個UI，一個動畫(Tween)，一個交互方面的代碼比如UIGrid、UITable、UIScrollView之類，還有一個就是核心代碼模塊也就是底層支持。這四個部分就是我們主要要研究的方向。其他如shader、editor代碼則是沒有太大關(guān)聯(lián)。

gnui目錄結(jié)構(gòu)

?當(dāng)你在Unity中創(chuàng)建第一個UISprite或者其他物體時(shí)，你就會發(fā)現(xiàn)，你創(chuàng)建的不僅僅是一張UISprite。它還包括uiRoot跟一個camera，這只在第一次的時(shí)候創(chuàng)建，而我們創(chuàng)建的Sprite就在uiroot下面。NGUI的所有面板都是以Panel作為分割。這是因?yàn)镹GUI自身的機(jī)制所需。 因此UIRoot本身便附加了一個UIPanel組件。

根目錄

? ? ????UI方面來說，NGUI主要提供了UIRoot, UIRect, UISprite，UILabel，UIAtlas, UIFont, UILocalize, UITextList, UITexture等等

?UI方面來說，最主要的應(yīng)該就是圖片的顯示了。NGUI提供了UIAtlas作為游戲內(nèi)精靈圖片(UISprite)的主要提供者。一個圖集的描述文本(即圖中的TP Import)，UIAtlas提供一個材質(zhì)，材質(zhì)需要一個貼圖，這張貼圖包含我們所需要的一些同一類型的，或者同一頁面的圖素。貼圖盡量使用2的n次方的分辨率大小，這樣運(yùn)行效率更高。其一是壓縮過后包體會比不是2的n次方的小，其二是加載也更快。不是2的n次方的圖片，unity會將其轉(zhuǎn)化為一個非壓縮RGBA32位的格式。

圖集Inspector面板

圖集-貼圖

? ? ? ? NGUI作為Unity最常用的UI編輯工具。提供了很多基本的功能。其中最基礎(chǔ)的就是Sprite精靈圖片。那么NGUI的精靈圖片在哪里呢。就在這Atlas的這張貼圖里面，這張集合了所有我們分類并打包好的圖片，我們稱之為“圖集”。而它的切割信息則保存在對應(yīng)的.txt文檔中。大概是下面這張圖里面的效果。里面保存這整張圖集里面每個單獨(dú)的圖片的id、高寬以及偏移量。UIAtlas正是根據(jù)這些信息提取對應(yīng)的精靈圖片。

圖集-文本信息

? ? ? ?NGUI的文本顯示主要靠UILabel這個組件，而文字的話，依靠的時(shí)UIFont這個組件。顯示文字只需要簡單的在UIlabel的輸入框輸入文本即可。UIlabel本身支持改變顏色等行為，順帶提一嘴，修改文字的方式有兩種，其一為直接改顏色，其二為使用bbcode。直接修改顏色的話，只需要在UILabel的Inspector面板中點(diǎn)擊顏色然后選擇需要的顏色值即可。bbcode則需要查詢對應(yīng)顏色的顏色代碼進(jìn)行賦值。

? ? ? ? 如果只是做國內(nèi)游戲的話，當(dāng)然使用中文就夠了。但是現(xiàn)在的游戲一般都有海外版。因此多語言的控制就非常的重要。NGUI提供了一個名為UILocalize的腳本控制，不過不是很常用，一般都是公司自己寫的多語言工具。從初始化多語言到保存到賦值都有自己的一整套完整的流程。

UITween

UITween的使用非常的簡單，都是大同小異。NGUI包含的動畫分別為：

TweenHeight 做UISprite等這些有明確邊框的物體的height屬性做動畫。提供目標(biāo)物體，最終高度跟動畫時(shí)間即可

TweenPosition，這個則是位移動畫。提供目標(biāo)物體和最終的目的坐標(biāo)跟動畫時(shí)間

TweenRotation，旋轉(zhuǎn)動畫，提供目標(biāo)的軸向、目標(biāo)值以及動畫時(shí)間。這個需要注意的是萬向鎖問題，不然很難達(dá)到自己要的效果。

TweenAlpha，這個是做Alpha動畫的，同樣是提供目標(biāo)物體，最終alpha跟時(shí)間

TweenScale， 這個是做縮放動畫，同樣是提供目標(biāo)物體，最終的scale值跟動畫時(shí)間。

其他動畫都是差不多，只需要提供目標(biāo)物體，提供正確的值跟時(shí)間即可。需要主要的是，這些動畫在物體未激活的情況下是不會運(yùn)行的。所以如果需要的話，需要正確的停止跟開啟，否則會容易出現(xiàn)再次打開頁面動畫卻從中間開始播放之類的問題。

Internal

Internal中包含了許多的擴(kuò)展的不屬于UI的東西。比如事件的響應(yīng)腳本EventTrigger，如果需要響應(yīng)按鈕點(diǎn)擊時(shí)間什么的，都可以掛載這個組件，這個組件上面明確了單擊、雙擊、拖拽等事件的響應(yīng)事件，我們只需要綁定我們的ui，就可以正常的使用。

eventtrigger事件

? ? ? ? UIDragCall 是NGUI非常終于的一個組件，整個UI的渲染都是靠它，作用不言而喻。uidrawcall的數(shù)量跟性能是成反比的。也就是drawcall越多，性能越差。而uidrawcall的生成在uipanel中，里面粗暴的根據(jù)sprite的depth進(jìn)行生成。因此我們在創(chuàng)作UI界面的時(shí)候需要格外注意，盡量控制同一個圖集的sprite的depth是相連的，這樣就會將其分配到同一個drawcall中。當(dāng)然，有時(shí)候故意分開，然后夾雜一些特效什么的也是有這種操作的。

? ? ? ? UIRect是NGUI所有顯示的組件的基類，可見其重要性。UIWidget是UIRect的一個子類。它只是一個簡單的透明矩形，有時(shí)候需要透明的但是可以點(diǎn)擊的地方就可以用到它。而且作為一個父節(jié)點(diǎn)，可以很方便的控制自己及以下的物體的整體透明度，配合TweenAlpha簡直不要太好用。

? ? ? ? SpringPanel是作為一個緩沖移動的腳本。它類似與TweenPosition，但是不同之處在于，它是配合其他組件，比如UIScrollView、UIWrapContent使用的，它可以將一個物體緩慢的移動到目標(biāo)位置。

Interaction

? ? ? ? 這個文件夾中包含的腳本都是需要跟其他組件共同配合使用的。比如使用UIScrollView的時(shí)候，就需要Panel來控制是否切割，移動事件的響應(yīng)，UITable或者UIGrid的排序，或者UIWrapContent的回收等等。這個文件夾中的組件各種搭配方式能組合出許多不同的卻又很好用的功能。例如我們需要做一個背包，那么背包的滑動就需要UIScrollView跟UIDragObject， 那么排序就需要用到UITable或者UIGrid。

第一次寫，內(nèi)容比較亂，見諒個~。接下來會開始仔細(xì)介紹各個常用組件的使用，夾雜一些例子