NGUI官網樣本3–Menu講解

NGUI官網樣本3--Menu講解 NGUI例子製作過程，由筆者參照NGUI的例子重新自己做了一遍，以加深對NGUI用法的理解。（建議先看下官網的基礎教程，對NGUI有初步瞭解之後，再看這個文章。）該貼需要前面我寫的內容，請有興趣的童鞋先熟悉前面的做法，再看本帖。哈哈 Example3-Menu 其最終效果是視窗中的Label文字出現打字效果，當按下Options按鈕時，兩個視窗會來回切換，： 圖片:1.png 1.         按照前面三個文章的前幾步，製作出基本的Advanced3D類型的UI，並把Panel重新命名為Panel-Main，並為其添加一個空的遊戲對象，命名為Window，最後reset下那個WindowNull 物件，： 圖片:2.png 接下來，以前面的NGUI官網樣本2-interaction-講解的過程製作出該Window的介面（此處有點偷懶，不過步驟與上面的論壇一樣，所以也省略了一些，而且再加上一個文章的圖片個數有限，所以盡量節約圖片，這裡給出地址http://game.ceeger.com/forum/read.php?tid=4179 ），： 圖片:3.png 同時，為Panel-Main中的文字Label添加一個TypewriterEffect組件，這樣一步就能實現打字效果，可以點擊運行試試看。是不是很帥！ 圖片:12.png 接著複製一個Panel-Main，並改名為Panel-Option，並把其中的元素進行調整，並使用Create a new Widget添加拖動條，checkbox，下拉式功能表等。這裡講下下拉式功能表的製作，該步驟與添加其他的Widget一樣，只是在參數中，可以使用該組件中的Option參數設定下拉式功能表的內容，其中左邊的圖，Difficulty只是一個空的遊戲對象，裡麵包括了一個自己建立的Label和一個PopupList，在左邊的Options參數中設定了四個選項，前面中括弧括起來的是該選項的顏色，： 圖片:4.png Panel-Option最後的效果，： 圖片:5.png 設定完成之後，把該Panel-option的z軸的值設定成1400，並把它的enable關掉，： 圖片:6.png 接下來，為其添加一個Sprite背景和左邊的Label，與以前面的NGUI官網樣本2-interaction-講解的過程製作出該Window的介面（此處有點偷懶，不過步驟與上面的論壇一樣，所以也省略了一些，而且再加上一個文章的圖片個數有限，所以盡量節約圖片，這裡給出http://game.ceeger.com/forum/read.php?tid=4179 ）最終的效果： 圖片:7.png   在Panel-Option中，為其添加一個Animation組件（Component->Miscellaneous-> Animation），並把Animation的變數設定成Window-back動畫和Window-forward動畫（點擊該變數最右邊的小圓圈，可以出現左邊的視窗），把Play Automatically關掉，： 圖片:8.png 使用同樣的方法，在Panel-Main中，也添加一個Animation組件（Component->Miscell aneous->Animation），並在Animation變數中設定為Window-back和Window-forward動畫，： 圖片:9.png 選擇Button-Option按鈕，為其添加兩個（菜單中Component->NGUI->Interaction->Button Play Animation），在第一個組件中，設定Target為Panel-Options（Animation）直接把Panel-Options拖到裡面就好了，Clip Name輸入Window-Back，這個是關鍵（記得剛才設定兩個window都設定了兩個動畫吧，這個用來播放其中的一個動畫，只要動畫的名稱不出錯）。Trigger為OnClick，PlayDirection為Reverse（動畫播放翻轉，也就是倒著播放動畫）, If Disabled On Play 設定為EnableThenPlay（被控制的對象的Enable開啟並開始播放加在在此對象上的對象），Disable when Finished為DisableAfterForward（當前向播放完成後，關閉對象的Enable）；在另外一個組件中，設定Target為Panel-Main(需要控制的動畫對象)，Trigger為On Click(點擊時觸發動畫)，Clip Name輸入Window-Forward，這個是關鍵。If Disabled On Player為EnableThenPlay，Disable When Finished為DisableAfterForward。： 圖片:13.png 選擇Panel-Option中的Button-Done，也同樣添加兩個為其添加兩個（菜單中Component->NGUI->Interaction->Button Play Animation），並設定如下的參數：： 圖片:14.png 這樣便大功告成了！點擊運行試試看。總結上面的三個文章，可以想象得出，使用NGUI製作動態GUI非常方便，而且添加各種Widget的過程都很類似，可以舉一反三。同時只要為某個按鈕添加一個UIButton PlayAnimation組件，然後設定該組件，便可以控制已經加入Animation組件的動畫，這些Animation可以使用Unity的曲線或者程式編寫或者第三方軟體來製作。並可以實現向前播放和反向播放等功能，並能夠控制該Target的Enable。國慶中秋到了，估計這兩天不會更新。預祝大家中秋國慶過得開心愉快！ （浙江傳媒學院-新媒體學院-數字遊戲設計專業-張sir）

圖片:10.png