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寫出來后,圖片還得一張一張拷出來再貼上去。由于時間倉促,未免有疏漏的地方,請各位灌水的同仁批評指正。