亚洲综合精品香蕉久久网,99久久精品国产综合一区,天天影视色香欲综合久久

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

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

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

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

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

在MessageRoot下，創建一個空游戲對象，并命名為3D UI，并reset它的所有變換，reset這一步很重要，不然以后的GUI元素可能位置就不對了。如圖所示：
點擊查看原圖

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

在3D UI層級中，新建一個空游戲對象，并命名為Window，該對象用于整體調整下面GUI的移動和旋轉等。如圖所示：
點擊查看原圖

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

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

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

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

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

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

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

為Show按鈕添加三個裝飾圖標，這三個圖標都是Sprite元素，可以制作一個之后，使用Ctrl+D復制出另外兩個，并設置它的位置和顏色，最后可以添加一個空的游戲對象，并命名為ICON，把這三個圖標拖到ICON中，這樣可以方便管理，其最終結果如圖所示：

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

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

對Button-hide按鈕進行相同的操作。
接下來，完成窗口的變換（移動和旋轉），使其當點擊show按鈕時，窗口平躺下來。新建兩個空游戲對象，并命名為WindowActive和WindowInactive，這兩個對象只包含了對象的變換信息（平移、旋轉和縮放）。我們將用這個兩個空游戲對象的變換信息來制作窗口在這兩個位置間的平滑過渡。首先把該兩個游戲對象放置到3D UI對象下，成為它的子物體，然后把這兩個對象reset一下，接著，調整WindowInactive的旋轉角度和位置。而WindowActive保持變換不變。注意，此時當中的scale參數最好跟Window中的縮放一樣，除非你要實現縮放效果，如圖所示：

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

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

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

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

點點滴滴

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

日歷

公告

留言簿(9)

隨筆分類(268)

隨筆檔案(311)

相冊

搜索

積分與排名

最新評論