NGUI例子制作過程,由筆者參照NGUI的例子重新自己做了一遍,以加深對NGUI用法的理解。(建議先看下官網(wǎng)的基礎(chǔ)教程,對NGUI有初步了解之后,再看這個帖子。)該貼需要前面我寫的內(nèi)容,請有興趣的童鞋先熟悉前面的做法,再看本帖。哈哈
Example3-Menu
其最終效果是窗口中的Label文字出現(xiàn)打字效果,當(dāng)按下Options按鈕時,兩個窗口會來回切換,如圖所示:

1. 按照前面三個帖子的前幾步,制作出基本的Advanced3D類型的UI,并把Panel重命名為Panel-Main,并為其添加一個空的游戲?qū)ο螅麨閃indow,最后reset下那個Window空對象,如圖所示:

接下來,以前面的NGUI官網(wǎng)示例2-interaction-講解的過程制作出該Window的界面(此處有點(diǎn)偷懶,不過步驟與上面的論壇一樣,所以也省略了一些,而且再加上一個帖子的圖片個數(shù)有限,所以盡量節(jié)約圖片,這里給出地址
http://game.ceeger.com/forum/read.php?tid=4179 ),如圖所示:
同時,為Panel-Main中的文字Label添加一個TypewriterEffect組件,這樣一步就能實(shí)現(xiàn)打字效果,可以點(diǎn)擊運(yùn)行試試看。是不是很帥!

接著復(fù)制一個Panel-Main,并改名為Panel-Option,并把其中的元素進(jìn)行調(diào)整,并使用Create a new Widget添加拖動條,checkbox,下拉菜單等。這里講下下拉菜單的制作,該步驟與添加其他的Widget一樣,只是在參數(shù)中,可以使用該組件中的Option參數(shù)設(shè)置下拉菜單的內(nèi)容,其中左邊的圖,Difficulty只是一個空的游戲?qū)ο螅锩姘艘粋€自己創(chuàng)建的Label和一個PopupList,在左邊的Options參數(shù)中設(shè)置了四個選項(xiàng),前面中括弧括起來的是該選項(xiàng)的顏色,如圖所示:

Panel-Option最后的效果,如圖所示:

設(shè)置完成之后,把該P(yáng)anel-option的z軸的值設(shè)置成1400,并把它的enable關(guān)掉,如圖所示:

接下來,為其添加一個Sprite背景和左邊的Label,與以前面的NGUI官網(wǎng)示例2-interaction-講解的過程制作出該Window的界面(此處有點(diǎn)偷懶,不過步驟與上面的論壇一樣,所以也省略了一些,而且再加上一個帖子的圖片個數(shù)有限,所以盡量節(jié)約圖片,這里給出
http://game.ceeger.com/forum/read.php?tid=4179 )最終的效果如圖所示:
在Panel-Option中,為其添加一個Animation組件(Component->Miscellaneous-> Animation),并把Animation的變量設(shè)置成Window-back動畫和Window-forward動畫(點(diǎn)擊該變量最右邊的小圓圈,可以出現(xiàn)左邊的窗口),把Play Automatically關(guān)掉,如圖所示:
使用同樣的方法,在Panel-Main中,也添加一個Animation組件(Component->Miscell aneous->Animation),
并在Animation變量中設(shè)置為Window-back和Window-forward動畫,如圖所示:
選擇Button-Option按鈕,為其添加兩個(菜單中Component->NGUI->Interaction->Button Play Animation),在第一個組件中,設(shè)置Target為Panel-Options(Animation)直接把Panel-Options拖到里面就好了,Clip Name輸入Window-Back,這個是關(guān)鍵(記得剛才設(shè)置兩個window都設(shè)置了兩個動畫吧,這個用來播放其中的一個動畫,只要動畫的名稱不出錯)。Trigger為OnClick,PlayDirection為Reverse(動畫播放翻轉(zhuǎn),也就是倒著播放動畫), If Disabled On Play 設(shè)置為EnableThenPlay(被控制的對象的Enable打開并開始播放加在在此對象上的對象),Disable when Finished為DisableAfterForward(當(dāng)前向播放完成后,關(guān)閉對象的Enable);在另外一個組件中,設(shè)置Target為Panel-Main(需要控制的動畫對象),Trigger為On Click(點(diǎn)擊時觸發(fā)動畫),Clip Name輸入Window-Forward,這個是關(guān)鍵。If Disabled On Player為EnableThenPlay,Disable When Finished為DisableAfterForward。如圖所示:
選擇Panel-Option中的Button-Done,也同樣添加兩個為其添加兩個(菜單中Component->NGUI->Interaction->Button Play Animation),并設(shè)置如下的參數(shù):如圖所示:

這樣便大功告成了!點(diǎn)擊運(yùn)行試試看。總結(jié)上面的三個帖子,可以想象得出,使用NGUI制作動態(tài)的GUI非常方便,而且添加各種Widget的過程都很類似,可以舉一反三。同時只要為某個按鈕添加一個UIButton PlayAnimation組件,然后設(shè)置該組件,便可以控制已經(jīng)加入Animation組件的動畫,這些Animation可以使用Unity的曲線或者程序編寫或者第三方軟件來制作。并可以實(shí)現(xiàn)向前播放和反向播放等功能,并能夠控制該Target的Enable。國慶中秋到了,估計這兩天不會更新。預(yù)祝大家中秋國慶過得開心愉快!
(浙江傳媒學(xué)院-新媒體學(xué)院-數(shù)字游戲設(shè)計專業(yè)-張sir)