Posted on 2013-10-15 11:41
點點滴滴 閱讀(344)
評論(0) 編輯 收藏 引用 所屬分類:
02 編程語言
Example 1 – UIAnchor
該例子是演示NGUI中使用Anchor組件實現(xiàn)GUI對齊的功能。其最終效果如下：
下面一步一步實現(xiàn)該例子。1. 刪除新建的場景的Main Camera攝像機，在圖層中新建一個GUI層，接著，選擇菜單上的NGUI->Create a new UI,彈出該對話框，設(shè)置如圖所示：
2. 最后點擊Create Your UI按鈕，可以在Hierachy窗口中自動生成下面的樹狀結(jié)構(gòu)：
3. 把Panel的父物體改成Anchor，如圖所示：
4. 把該Anchor命名為Anchor-Bottom，并為該對象添加一個空游戲?qū)ο螅⒚麨?/font>offset，并reset它的變換。該空游戲?qū)ο罂梢杂糜谒旅孀訉ο笈c該Anchor之間的偏移量。如圖所示：
5. 選中offset，選擇菜單中的NGUI-> Create new Widget，彈出一個Widget Tool對話框，該對話框基本是用于制作按鈕（Buttom）、標簽（Label）等部件的對話框。設(shè)置其參數(shù)之后，并點擊Add To按鈕，確保該按鈕后面的對象是offset。這就在offset下生成一個Label便簽，并把標簽的文本改成Bottom，如圖所示：
6. 以同樣的方法在offset中添加一個slicedsprite。記住該對象的深度應(yīng)該比Label要小，不然Label就會被覆蓋而看不到。這里設(shè)置label的深度（depth）為0，而slicedsprite為-1，并在編輯器中調(diào)節(jié)該元素的大小，如圖所示：
7. 最后一步，選擇Anchor-Bottom，設(shè)置該元素的對齊方式（side）為“Bottom”。選擇之后，它會自動把它自己對其到攝像機的最低端，我們可以通過offset來調(diào)節(jié)該元件和Anchor之間的偏移量。如圖所示：
8. 其他的7個Anchor可以使用Ctrl+D復(fù)制出來，并更改Anchor的不同的方式來對齊到不同的位置上，并在編輯窗口中調(diào)整offset的位置，其結(jié)果如圖所示：
9. 最后來制作其背景，新建一個空的游戲?qū)ο螅⒆詈?/font>Panel的子物體，并reset它的變換。命名為Anchor-background，并在NGUI菜單中，選擇Attach an Anchor，此時該空游戲?qū)ο缶统蔀榱艘粋€Anchor，并設(shè)置對齊方式為center。
10. 接著以Anchor-backgournd作為父物體，新建一個名為window的空游戲?qū)ο螅鐖D所示，window游戲?qū)ο笾皇菫榱朔奖愎芾矶O(shè)置的一個輔助對象而已。
11. 在window下面，使用Create Widget面板創(chuàng)建一個slicedSprite,其參數(shù)如下：
12. 在編輯窗口中縮放該對象，使其對齊到窗口，并把其深度（Depth）設(shè)置成-2。最終效果如下：
13. 接下來，給他添加一個多行Label，同樣使用createWidget對話框，其參數(shù)如下：14. 在其文本內(nèi)容框中寫入需要的文字，當然，因為現(xiàn)在使用的是英文字體，所以中文是顯示不出來的，如圖所示，并把深度（depth）改為-2，把Line Width設(shè)置成500，可以設(shè)置顯示每行文字的寬度。如圖所示：
在官方的該例子中，還有上面一個標題，其實也是有一個Label和一個slicedSprite組成的，所以，這里不再闡述。下面的幾個例子將視時間創(chuàng)作，論壇發(fā)文章還真有點難度，尤其是用word寫出來后，圖片還得一張一張拷出來再貼上去。由于時間倉促，未免有疏漏的地方，請各位灌水的同仁批評指正。