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等。