NGUI例子制作過(guò)程，由筆者參照NGUI的例子重新自己做了一遍，以加深對(duì)NGUI用法的理解。（建議先看下官網(wǎng)的基礎(chǔ)教程，對(duì)NGUI有初步了解之后，再看這個(gè)帖子。）該貼需要前面我寫的內(nèi)容，請(qǐng)有興趣的童鞋先熟悉前面的做法，再看本帖。哈哈
Example3-Menu
其最終效果是窗口中的Label文字出現(xiàn)打字效果，當(dāng)按下Options按鈕時(shí)，兩個(gè)窗口會(huì)來(lái)回切換，如圖所示：
1. 按照前面三個(gè)帖子的前幾步，制作出基本的Advanced3D類型的UI，并把Panel重命名為Panel-Main，并為其添加一個(gè)空的游戲?qū)ο螅麨閃indow，最后reset下那個(gè)Window空對(duì)象，如圖所示：
接下來(lái)，以前面的NGUI官網(wǎng)示例2-interaction-講解的過(guò)程制作出該Window的界面（此處有點(diǎn)偷懶，不過(guò)步驟與上面的論壇一樣，所以也省略了一些，而且再加上一個(gè)帖子的圖片個(gè)數(shù)有限，所以盡量節(jié)約圖片，這里給出地址
http://game.ceeger.com/forum/read.php?tid=4179 ），如圖所示：
同時(shí)，為Panel-Main中的文字Label添加一個(gè)TypewriterEffect組件，這樣一步就能實(shí)現(xiàn)打字效果，可以點(diǎn)擊運(yùn)行試試看。是不是很帥！
接著復(fù)制一個(gè)Panel-Main，并改名為Panel-Option，并把其中的元素進(jìn)行調(diào)整，并使用Create a new Widget添加拖動(dòng)條，checkbox，下拉菜單等。這里講下下拉菜單的制作，該步驟與添加其他的Widget一樣，只是在參數(shù)中，可以使用該組件中的Option參數(shù)設(shè)置下拉菜單的內(nèi)容，其中左邊的圖，Difficulty只是一個(gè)空的游戲?qū)ο螅锩姘艘粋€(gè)自己創(chuàng)建的Label和一個(gè)PopupList，在左邊的Options參數(shù)中設(shè)置了四個(gè)選項(xiàng)，前面中括弧括起來(lái)的是該選項(xiàng)的顏色，如圖所示：
Panel-Option最后的效果，如圖所示：
設(shè)置完成之后，把該P(yáng)anel-option的z軸的值設(shè)置成1400，并把它的enable關(guān)掉，如圖所示：
接下來(lái)，為其添加一個(gè)Sprite背景和左邊的Label，與以前面的NGUI官網(wǎng)示例2-interaction-講解的過(guò)程制作出該Window的界面（此處有點(diǎn)偷懶，不過(guò)步驟與上面的論壇一樣，所以也省略了一些，而且再加上一個(gè)帖子的圖片個(gè)數(shù)有限，所以盡量節(jié)約圖片，這里給出
http://game.ceeger.com/forum/read.php?tid=4179 ）最終的效果如圖所示：
在Panel-Option中，為其添加一個(gè)Animation組件（Component->Miscellaneous-> Animation），并把Animation的變量設(shè)置成Window-back動(dòng)畫和Window-forward動(dòng)畫（點(diǎn)擊該變量最右邊的小圓圈，可以出現(xiàn)左邊的窗口），把Play Automatically關(guān)掉，如圖所示：
使用同樣的方法，在Panel-Main中，也添加一個(gè)Animation組件（Component->Miscell aneous->Animation），
并在Animation變量中設(shè)置為Window-back和Window-forward動(dòng)畫，如圖所示：
選擇Button-Option按鈕，為其添加兩個(gè)（菜單中Component->NGUI->Interaction->Button Play Animation），在第一個(gè)組件中，設(shè)置Target為Panel-Options（Animation）直接把Panel-Options拖到里面就好了，Clip Name輸入Window-Back，這個(gè)是關(guān)鍵（記得剛才設(shè)置兩個(gè)window都設(shè)置了兩個(gè)動(dòng)畫吧，這個(gè)用來(lái)播放其中的一個(gè)動(dòng)畫，只要?jiǎng)赢嫷拿Q不出錯(cuò)）。Trigger為OnClick，PlayDirection為Reverse（動(dòng)畫播放翻轉(zhuǎn)，也就是倒著播放動(dòng)畫）, If Disabled On Play 設(shè)置為EnableThenPlay（被控制的對(duì)象的Enable打開并開始播放加在在此對(duì)象上的對(duì)象），Disable when Finished為DisableAfterForward（當(dāng)前向播放完成后，關(guān)閉對(duì)象的Enable）；在另外一個(gè)組件中，設(shè)置Target為Panel-Main(需要控制的動(dòng)畫對(duì)象)，Trigger為On Click(點(diǎn)擊時(shí)觸發(fā)動(dòng)畫)，Clip Name輸入Window-Forward，這個(gè)是關(guān)鍵。If Disabled On Player為EnableThenPlay，Disable When Finished為DisableAfterForward。如圖所示：
選擇Panel-Option中的Button-Done，也同樣添加兩個(gè)為其添加兩個(gè)（菜單中Component->NGUI->Interaction->Button Play Animation），并設(shè)置如下的參數(shù)：如圖所示：
這樣便大功告成了！點(diǎn)擊運(yùn)行試試看。總結(jié)上面的三個(gè)帖子，可以想象得出，使用NGUI制作動(dòng)態(tài)的GUI非常方便，而且添加各種Widget的過(guò)程都很類似，可以舉一反三。同時(shí)只要為某個(gè)按鈕添加一個(gè)UIButton PlayAnimation組件，然后設(shè)置該組件，便可以控制已經(jīng)加入Animation組件的動(dòng)畫，這些Animation可以使用Unity的曲線或者程序編寫或者第三方軟件來(lái)制作。并可以實(shí)現(xiàn)向前播放和反向播放等功能，并能夠控制該Target的Enable。國(guó)慶中秋到了，估計(jì)這兩天不會(huì)更新。預(yù)祝大家中秋國(guó)慶過(guò)得開心愉快！
（浙江傳媒學(xué)院-新媒體學(xué)院-數(shù)字游戲設(shè)計(jì)專業(yè)-張sir）