欧美国产视频日韩,欧美精品日韩,在线观看欧美黄色

(搬運工)NGUI官網(wǎng)示例2-interaction-講解（一）

Posted on 2013-10-15 11:42 點點滴滴閱讀(574) 評論(0) 編輯收藏引用所屬分類: 02 編程語言

NGUI例子制作過程，由筆者參照NGUI的例子重新自己做了一遍，以加深對NGUI用法的理解。（建議先看下官網(wǎng)的基礎(chǔ)教程，對NGUI有初步了解之后，再看這個帖子。）
二、Example2 – Interaction
其最終效果如圖所示,當點擊Show按鈕時，窗口會過度到平躺位置，并出現(xiàn)兩個立方體，這兩個立方體當鼠標位于上面時，會出現(xiàn)按鈕的onHover效果：

1. 新建一個場景，并把該場景中的MainCamera刪除掉，并通過菜單中的NGUI->Create a new UI新建一個UI結(jié)構(gòu)，如圖所示：

刪除Anchor和UIRoot（3D），只留下Panel，并把Panel命名為Message Root，如圖所示：
點擊查看原圖

在MessageRoot下，創(chuàng)建一個空游戲?qū)ο螅⒚麨?/font>3D UI，并reset它的所有變換，reset這一步很重要，不然以后的GUI元素可能位置就不對了。如圖所示：
點擊查看原圖

首先先使用Create a widget工具創(chuàng)建一個Sprite，并命名為UISprite-Background，并在編輯窗口中調(diào)整它的大小，設置其深度為-5，該Sprite用于作為背景，其參數(shù)如圖所示：
點擊查看原圖

在3D UI層級中，新建一個空游戲?qū)ο螅⒚麨?/font>Window，該對象用于整體調(diào)整下面GUI的移動和旋轉(zhuǎn)等。如圖所示：
點擊查看原圖

下面來制作Window中的各個元素。首先創(chuàng)建背景。使用Create a widget，使用UITiledSprite，該元素可以等你放大它的范圍時，它會以平鋪的方式顯示，這樣可以大大節(jié)省資源的體積。該其參數(shù)如下：
點擊查看原圖

使用Create a Widget中的Sliced Sprite，創(chuàng)建標題欄，該元素可以在放大范圍時，拉伸其背景。創(chuàng)建好之后在編輯窗口中改變它的位置和大小，使其在窗口的頂端，其參數(shù)和效果如下：
點擊查看原圖

再為背景添加一個半透明的SlicedSprite，其參數(shù)和效果如下：
點擊查看原圖

創(chuàng)建一個Label，作為該窗口的標題，其參數(shù)和效果如下:
點擊查看原圖

創(chuàng)建一個Label，作為窗口中的文字說明，其參數(shù)和效果如下：
點擊查看原圖

創(chuàng)建一個按鈕，命名為：button-show，設置該按鈕的Label文字描述為Show，設置Background的顏色為深藍色，調(diào)整它的位置和大小，最終效果如圖所示：
點擊查看原圖

為該Button創(chuàng)建一個空的子物體，并命名為Animation，最后對該空物體添加一個Animation組件（Component->Miscellaneous->Animation），并在project窗口中找到NGUI->Examples->Animations->Button，把該腳本添加到Animation組件中的Animation中。（這個Button的動畫可以用于實現(xiàn)按鈕在某種狀態(tài)下的動畫效果）接著把Button下面的Label和Background拖到Animation對象上，成為其子對象，如圖所示：
點擊查看原圖

為Show按鈕添加三個裝飾圖標，這三個圖標都是Sprite元素，可以制作一個之后，使用Ctrl+D復制出另外兩個，并設置它的位置和顏色，最后可以添加一個空的游戲?qū)ο螅⒚麨?/font>ICON，把這三個圖標拖到ICON中，這樣可以方便管理，其最終結(jié)果如圖所示：

復制該Button，并把該Button的Label文本設置成HIDE，命名為button-hide再把ICON刪除掉，調(diào)整它的位置，最終效果如圖所示：

現(xiàn)在，來完成當鼠標放置在按鈕上面時，即onHover狀態(tài)時，它的動畫效果。我們以Show按鈕為例子，Hide的設置類同。選擇Button-show，為該按鈕添加一個UIButtonPlayAnimation組件（菜單中Component->NGUI->Interaction->Button Play Animation）。添加之后，把該按鈕下的Animation賦值給該組件中的Target變量，設置Trigger為OnHover，點擊播放，當把鼠標放置在該按鈕上時，可以看到已經(jīng)有動畫效果了，此時可以對比未對Hide按鈕添加UIButtonPlayAnimation組件時的效果。參數(shù)如圖所示：
點擊查看原圖

對Button-hide按鈕進行相同的操作。
接下來，完成窗口的變換（移動和旋轉(zhuǎn)），使其當點擊show按鈕時，窗口平躺下來。新建兩個空游戲?qū)ο螅⒚麨?/font>WindowActive和WindowInactive，這兩個對象只包含了對象的變換信息（平移、旋轉(zhuǎn)和縮放）。我們將用這個兩個空游戲?qū)ο蟮淖儞Q信息來制作窗口在這兩個位置間的平滑過渡。首先把該兩個游戲?qū)ο蠓胖玫?/font>3D UI對象下，成為它的子物體，然后把這兩個對象reset一下，接著，調(diào)整WindowInactive的旋轉(zhuǎn)角度和位置。而WindowActive保持變換不變。注意，此時當中的scale參數(shù)最好跟Window中的縮放一樣，除非你要實現(xiàn)縮放效果，如圖所示：

選擇Window對象，為其添加一個TweenTransform組件（Compoent->NGUI->Tween-> Transform），該組件可以根據(jù)兩個Transform對象來在它們之間進行平滑過渡。添加組件之后，把WindowActive和WindowInactive對象賦值給該組件下的From和To下，同時把給組件的Enable關(guān)掉，我們將使用Show按鈕來控制它的打開，具體參數(shù)如下，如圖所示：
點擊查看原圖

為Show按鈕添加UIButtonTween組件（Component->NGUI->Interaction->Button Tween），該組件可以使得Target中的Tween類型的動畫進行開關(guān)。把Window對象賦值給該組件下的Target，并設置PlayDirection為Forward，Trigger為OnClick，If Disabled On Play 為EnableThenPlay，表示當播放該動畫時，啟動Target中的Tween類型動畫。這個組件是關(guān)鍵。點擊播放，可以看到最終的效果，你可以在播放時，在沒按下show按鈕之前選擇Window組件，可以看到此時的TweenTransform組件是關(guān)閉的，當你按下show按鈕之后，該組件被打開了，播放完之后，又被關(guān)閉。

現(xiàn)在來完成當點擊Hide按鈕時，窗口回到原來的位置，同樣給該按鈕添加一個UIButtonTween組件，把Window對象賦值給該組件下的Target，Trigger設置為OnClick，Play Direction設置為Reverse，If Disabled On Play設置為DoNothing。完成之后，點擊播放，查看效果，如圖所示：
點擊查看原圖

以上幾步就實現(xiàn)了官網(wǎng)上的Interaction中窗口位置的平滑變換效果。關(guān)鍵是UIButtonTween和其他的Tween類型之間的連接。最后，把攝像機調(diào)整到其他的角度

點點滴滴

(搬運工)NGUI官網(wǎng)示例2-interaction-講解（一）

日歷

公告

留言簿(9)

隨筆分類(268)

隨筆檔案(311)

相冊

搜索

積分與排名

最新評論