C#程序員整理的Unity 3D筆記（十五）：Unity 3D UI控件至尊–NGUI

目前，UGUI問世不過半年(其隨着Unity 4.6發佈問世)，而市面上商用的產品，UI控件的至尊爲NGUI：影響力和廣度（可搜索公司招聘Unity 3D，經常能看到對NGUI關鍵詞）。 NGUI雖然不是Unity 官方原生的，但以其強大的能力和友好的操做性，成爲了事實上的王者—-無他，OnGUI太挫了。

 

經過導入自定義包，會出現以下的截圖–這裏我使用的是NGUI V3.6.8版本。

 

在其官方demo中，這個demo給我留下了很是酷的印象（右上角NGUI的logo，好像電影中維京人的帽子？）：

 

NGUI代碼的樣例，極爲豐富，反覆臨摹，可學不少東西，這裏就不一一列舉了，僅對學習進行小結。

 

• UI Root

NGUI的UI Root相似UGUI Canvas.Screen.Camera模型；UI Root是全部NGUI控件的根元素。

 

建立一個NGUI元素後，在UI Root下自動帶一個Camera。

另外，NGUI是第三方的，故沒法像UGUI同樣在Hierarchy中經過快捷鍵添加UI元素：

可經過主菜單–NGUI添加組件

 

還能夠在Scene中，經過右鍵菜單添加UI組件（右鍵菜單提供了添加腳本、Help跳轉到官網tasharen的Tip功能，很棒。）

 

 

• 原生的UI組件有2個：

常使用的UI組件有2個：Lable & Sprite，其餘組件是組合這2個UI組件實現的。

 

更多的經常使用控件，是經過Prefab Tool提供的，如Button、Slider、CheckBox等。

 

在此基礎上，你也能夠自定義你的UI控件，保存爲Prefab便可，而後拖入到NGUI的Prefab Toolbar中保存起來。

 

• 交互

  NGUI中實現控件的交互有2個步驟，主要是用碰撞檢測(Trigger)和腳本實現，使用起來方便的很—成熟、好用。

1 添加Box Collider
2 添加事件腳本( *.cs)實現

 

  NGUI默認提供了豐富了UI腳本，幾乎囊括了能用到的全部腳本—可在此基礎上，繼續經過擴展代碼完成您的需求。

• 動畫

相似交互功能，動畫也是經過腳本組件實現的。 NGUI自帶的Tween 有10個腳本

• Dock：Anchors

製做複雜UI佈局的時候，Anchors就顯得尤其關鍵，故NGUI也提供了很是方便的Anchors功能—默認不開啓，經過選擇Type=Unifed可打開Anchors功能，設置Target對象，同時設置Left、Right、Right、Bottom、Top便可實現，相對比較方便。(默認的Target對象是該UI的父對象)

 

• 圖集(Atlas Maker)：圖片的批量壓縮，提升性能。

Atlas 這個單詞很詭異，之前沒有見過，搜索了一下bing，發現頗有趣：

 

使用Atlas Maker，主要目的是對批量圖片進行壓縮，成爲一張圖片，使用的時候經過offset可得到指定的圖片。這個技術在GIS加載圖片、Web加載圖片中曾經用過。

Atlas Maker通過處理多個選擇的圖片後，最後產生了3個文件：

• MyAtlas.png

• MyAtlas.prefab

• MyAtlas.mat

 

 

其餘tip：

獲取NGUI當前控件的設置值：volumn = UIProgressBar.current.value;

NGUI控件添加父子關鍵：NGUITools.AddChild(sprite.gameObject, item.gameObject);

NGUI一些不太好用的東西：

• 多個Panel沒法Move和對齊—panel沒有邊線，多個Panel很差控制。

 

NGUI擺放組件，移動很是不爽：一個是Camera取消不了–Gizmos嘗試不行；另外移動和縮放很容易搞錯。

 

• NGUI的Sprite的切圖SlicedSprite九宮切圖，是經過設置數字修改的

widget屬性，pivot，depth和size–NGUI的核心東東

• Pivot：中心點–對齊用

• Depth：多個控件渲染的順序【數字越高，顯示優先級越高； 使用起來有點坑–設置錯誤則顯示不了啦】

• Size、Aspect：大小和放大

 

總結： 

儘管我我的比較看好UGUI，要學就學新的，1年後UGUI就成熟了嘛！  可是爲了看懂一些「參考代碼」，NGUI也是有必要學習、學習的,  且NGUI有較豐富的第三方UI插件生態圈呢，如NGUI HUB, TKTR等。