久久久久久一区二区,9国产精品视频,国产精品分类

(搬運工)NGUI官網示例9 – QuestLog(可展開元件)

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

這個示例展示的是可伸縮的界面，點擊沒一個Quest，可以把里面的內容展開。如圖所示：
請輸入描述

首先先制作出基本的界面，這里就不再贅述（可以參考我上面的系列教程），在這里提一下，在制作背景時，可以使用Create a Widget創建出一個SimpleTexture，貼上合適的材質之后，不要縮放和移動它，為它添加一個Stretch組件（Component->NGUI->UI -> Stretch），該組件可以根據窗口的大小自動調整尺寸。注意該層級結構，最終效果如圖所示

接下來就是這個示例的重頭戲了。選擇Quest Log，并為其創建一個新的Panel（NGUI->Create a panel），并命名為SubPanel，如圖所示
請輸入描述

選擇SubPanel，創建一個空的游戲對象，作為它的子物體，并命名為Table。該對象將來用于排列它的所有子對象的位置，現在暫時不管。如圖所示
請輸入描述

選擇Table對象，創建一個空的游戲對象，作為它的子物體，并命名為Quest1，reset一下。如圖所示
請輸入描述

選擇Quest1，為其添加一個Lable和一個SlicedSprite，最終效果如圖所示

選擇Quest1，創建一個空的游戲對象，并命名為Tween，成為它的子對象，reset一下，并在Tween下創建一個Label，并輸入文字描述，最終效果如圖所示

首先先把Tween對象的Enable關掉，再使用同樣的方式再制作出三個這樣的Quest出來，我這里偷懶，直接使用Ctrl+D復制出2個來，并命名為Quest2和Quest3。不用去管它的位置，如圖所示

選擇Table對象，為其添加一個Table組件（Component->NGUI->Interaction->Table），并設置Colomn參數為1，Direction為Down，Padding的Y為4，Sorted、Hide Inactive和Keep Within Panel勾選上，點擊播放之后，其子物體就會自動地排列了，神奇！（大家從英文上應該能看出這些參數的意思吧，這里不贅述了）。如圖所示

接下來實現點擊這些Quest時，會自動展開其下面的說明。選擇Quest1下面的Tween對象，為其添加一個TweenScale組件（Component->NGUI->Tween->Scale），并設置其參數如圖所示
請輸入描述

選擇Quest1下面的SlicedSprite，為其添加一個Trigger組件（NGUI->Attach a collider）用來接收輸入事件，接著為其添加一個Button Tween組件（Component-> NGUI->Interaction->Button Tween）這個組件很熟悉吧，對其他的幾個Quest進行類似的操作，點擊播放，鼠標放在Quest上點擊，ok，實現了！其參數如下
請輸入描述

如果你三個Quest同時展開，會發現，此時內容都漏出來了，呵呵，霸氣外漏！我們來解決這個問題。選擇SubPanel，設置其Panel組件中的Clipping為SoftClip，并設置它的size中x為420，Y為290，softness為X為1，Y為8，然后點擊再播放，哈，內容在這個設置的范圍內了。如圖所示
請輸入描述

問題又來了，我想看下面的內容呢。那么我們可以給他添加一個ScrollBar滾動條。在Quest Log下創建一個垂直ScrollBar元件，我們現在想當內容超出panel時scollBar才顯示出來，我們設置其Alpha為0，最后參數如圖所示
請輸入描述

現在來連接SubPanel和ScrollBar。選擇SubPanel，為其添加一個DraggablePanel組件（Component-> NGUI->Interaction->DraggablePanel）。然后把ScrollBar對象賦值給VerticalScrollBar，如圖所示
請輸入描述

點點滴滴

(搬運工)NGUI官網示例9 – QuestLog(可展開元件)

日歷

公告

留言簿(9)

隨筆分類(268)

隨筆檔案(311)

相冊

搜索

積分與排名

最新評論