被NGUI折磨中的攻略心得

到新公司負責NGUI的工作，在目前幾乎沒有他人的幫助下，只得一邊摸索一邊完成工作。現將遇到的問題記錄下來，一是加深自己的印象，二是也許能幫到其他學習者，畢竟目前網上NGUI相關係統的教程太少了。
(所使用的NGUI版本是3.7.0以上)

分享下獲取過來的英文教程，此教程使用的NGUI版本雖然比較舊，但主要功能都有較好介紹，老外甚至用NGUI做了一個簡單的小遊戲~~
http://pan.baidu.com/s/1pKf88iB


Problem 1：U3D初始開啟了預設的天空，曾找了半天找不到哪裡可關閉和更換，其實開啟Window-Lighting中即可設定。

problem2：在擺UI時，開始沒有注意各個節點的座標，導致設計視窗和執行視窗中看到的結果不一樣，其實是節點Z軸沒有統一。所以要麼就用2d模式，節省調節座標，要麼就要把各節點座標調好。在Hierarchy中，資源可看做以節點的方式組織，結構關係十分像程式中的父類和子類。當在一個名叫Wnd的panel父節點下放置其它如Sprite的子節點，那麼子節點就繼承了父節點的座標系，子節點的座標就變成了相對座標。


problem3：用NGUI的atlas maker和Font maker製作bmpFont和圖片混合的圖集時，遇到過圖上問題，報錯且一直updating，是說圖集中部分內容被擠出去了，生成失敗。一個原因是時，沒有勾remove empty選項，導致空白佔用了過多空間(而且似乎一張文字圖集達到2048*2048的尺寸時就容易報錯)。還有一個原因尚不清楚，即使勾選了remove empty選項照樣報錯。這樣我的做法是，先把圖片生成一個圖集，再選取生成好的bmpFont，右鍵開啟圖集管理，點選update到這個圖集中，然後還要注意把Font的字元定位檔案xx.txt再次匯入到整個圖集的預製中，完後之前Font的材質球則可刪除。


problem4:點選選取的節點，ctrl+6開啟動畫編輯皮膚，做好一段動畫後順利地播放，然後在其子節點再ctrl+6編輯動畫，播放......結果發現把先前做的動畫覆蓋了。只要稍微注意就好，因為子節點預設是有父節點動畫的，子節點要自己掛上一個animation或animator元件，才可做自己的動畫。


problem5：在製作動畫的時候，需要做一個移動+透明度漸變的過程。之前在節點屬性上掛著NGUI Tween系列的Tween Alpha指令碼，然後在動畫皮膚上引用。播放結果是正確的，但是在實時遊戲中，Tween Alpha只能作用一次。原因是Tween系列指令碼不能通過動畫反覆播放，似乎是動畫不會重置Tween?它單獨掛在節點上是可以反覆的。因此把Tween Alpha指令碼替換為Animation Alpha就ok了。


problem6: 在使用table的時候，給table下的其它子節點增加了一個tween scale這種改變table元素位置的指令碼，結果子物件發生了偏移，破壞了原有的對齊。原因是table下的所有子節點需要初始保持座標一致，然後直接通過table的alignment或者spacing x/y等等設定來修改，不要手動一個個來調節，否則容易發生不可測的變動。(後來發現，table中子節點如果被隱藏，而又勾選了Hide Inactive選項，會導致對齊發生偏斜)。


problem7:NGUI的toggle元件。這個元件也和什麼label,button等等一樣，只需掛在一個gameobject上，調整引數就ok。最重要的修改，是toggle的Group、State of 'None'，以及Starting State三項，其餘的按預設設定是ok的。
*Group:表示當前UI中，會把group相等的toggle關聯起來，使其互斥。
*State of 'None'：表示點選toggle本身，也可在checkmark和background中進行切換。
*Starting State：表示該toggle是本介面中預設被選取的，通常僅有一個toggle會被勾上。


problem8:通過Tween Scale和Play Tween來配合，使點選某個gameobject就可下滑出隱藏物件的尺寸變化動畫。Trigger condition 原是On Click，Play direction設定為toggle，但需要使若干個目標進行互斥，這樣設定是不行的。而把觸發事件改成On Select便可使其互斥，但是會有bug，多點幾次就會發現這些物件變得亂七八糟。 後來把play direction改為forward 就ok了。但整體效果還是不夠好，所以點選按鈕拉出下滑條的效果，要麼用動畫做，要麼寫指令碼。

problem9:NGUI的根節點，UIRoot將把子節點的Scale強制設定為1，這樣無法將UI元件整體大小自由調節，後來發現只需改變子節點中的子節點即可。UIRoot是要控制螢幕自適應的，所以手動不能更改。

problem10:對新手來說，專案儲存會一時糾結不清。在場景中創預製，是需要將預製做完後要手動拖入project中。並且U3D中包括預製，有三種儲存方式，分別是save scene，save project，以及預製上的apply。save scene是儲存當前場景狀態；project則是整個工程，而預製的話必須點選inspector皮膚上的apply來儲存更改。有時將預製拖入其它預製中，做了更改，點選apply會發現該預製沒有被儲存，只得重新拖入project中覆蓋掉之前的。


problem11:FBX模型的使用，匯入FBX格式模型至project中，然後可以像prefab一樣使用，但是這種方法用在UI上會比較耗效能，因為模型通常開銷大，且質量越高越甚。Ctrl+6可以看到Animation下的模型動畫設定，非常複雜，不過不需要自己手動調，因為這些都是從相關3D軟體中讀取出來的。


problem12:Window-Aniamtor開啟animator的設定介面，可以在試圖中建立動畫塊，以及連線動畫塊來確定多個動畫之間的轉換邏輯關係。本動畫系統比老動畫系統更加高階，但實際上手亦不難，只需自己多動手足可。


problem13:父節點掛著boxcollide導致的子節點收不到事件響應。因為每個panel都有自己的層級，不同的panel間是無法點選穿透的。如果一個panel是用做二級介面彈出框，它自帶一個全屏的boxcollide，則可防止點選穿透到其下面panel的UI上。另外如果在一個scroll view元件中，如果在scroll view的panel上掛了drag scroll view元件來響應滑屏效果，那麼其下面掛著的子節點上無法再掛drag scroll view元件，會有衝突(目前最好的做法，是在下面子節點上掛drag scroll view，然後調整佈局，使其滑動順暢)。


problem14anel上Clipping的詭異問題，剛接觸Scroll View元件弄出的問題，一般來說應該遇不到。如圖左側Sprite超出裁剪區域一半了，卻沒被裁剪，只有全部超出才被裁剪。這個問題糾結很久，後來才發現其實是shader的問題。NGUI自帶了很多shader，其中有一系列shader(Transparent colored 1、2、3，Transparent colored(TextureClip)......)是負責透明畫素的處理，而panel的裁剪則是運用了這些shader，圖上問題正是個別shader丟失導致的。


problem15：逗逼的AtlasMaker對話方塊，如果要大量通過點取刪除單個精靈，那麼一不小心點在Scene檢視上則所有選取消失(其它的地方貌似ok，貌似是個bug)，因此不要嘗試一次性全點完後作刪除。


problem16：多個tween系列的動作，無論是掛在一個gameobject上，還是多個，如果需要讓這些動作連續，在Inspector編輯皮膚上貌似只能通過Start Delay方式來實現。


problem17：button和sprite同時掛載一個gameobject上，會有bug，導致功能異常。一般Sprite放到Button下。



problem18：一般來說，ScrollView的引數不需要手動更改，除了Movement和Cancel Drag If Fits。它們一個是控制垂直還是水平滑動，一個是控制但ScrollView的panel顯示區域中，子物件沒有超出該區域時，不讓其拖動，不勾選則反之。然而有時就放一個子物件進去，也能滑動，其原因要注意子物件身上的各種ui元素，是否超出了區域，可看到UI周圍的黃線，就是代表UI中的widget實際所佔的一個區域大小。


problem19：關於UI效能消耗問題，可以在做UI時，開啟states檢視相關的Batches(即為DrawCall，每幀UI需要被底層directX繪製多少次)，以及更詳細的開啟Window/Frame Debugger來追蹤。Drawcall消耗問題，之前聽說單個widget的depth不同，將引發額外的DC，實際上並不是這樣，而是引用了不同圖集，然後再設定depth這種影響渲染優先順序的操作，就將導致取相同圖集中的Sprite也會額外多出一個DC，如圖sundryAtalas用了兩次DC。


一個好習慣：在擺UI時，先儲存一份公共的模板，然後通通Copy and paste過去，這樣既輕鬆，又避免了手動調整帶來的誤差。


另外在使用各種NGUI元件時，可以通過它提供的模板工具來做，只需選擇預設好的模板，點選一下就建立出了物件。十分方便，而且也避免了手動去統一調整。本人之前不知道有prefab toolbar，一直用的legacy widget tool。而新的prefab toolbar更好，可儲存自己做的一個模板，然後用的時候copy出來，推薦使用這個。


UIButton的系列元件，目前我用的最多的是Button、Button scale。其餘的之前都被我無視了，其實有一些都很不錯的，如Button Activate，可以控制一個GameObject的顯/隱，Button drag 可以控制一個scroll view的點選滑動，Button Rotation可以使按鈕增加旋轉效果。


NGUI元件上系列回撥介面，如圖的On Click，可以自己編寫一個函式，然後直接掛上去，NGUI元件會自動根據條件來執行。這其實是非常不錯的一個功能，雖然多半是程式的事，但作為策劃，或者UI設計人員，可以讓程式寫完一些功能，然後自己掛上去。


作者：百鬼
來源：GAD
地址：https://gameinstitute.qq.com/community/detail/133037