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