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