NGUI官網樣本–講解

NGUI例子製作過程，由筆者參照NGUI的例子重新自己做了一遍，以加深對NGUI用法的理解。
一、Example 1 – UIAnchor
該例子是示範NGUI中使用Anchor組件實現GUI對齊的功能。其最終效果如下：

圖片:1.png

下面一步一步實現該例子。
1.        
刪除建立的情境的Main Camera攝像機，在圖層中建立一個GUI層，接著，選擇菜單上的NGUI->Create
a new UI,彈出該對話方塊，設定：

圖片:2.png

2.        
最後點擊Create Your UI按鈕，可以在Hierachy視窗中自動產生下面的樹狀結構：

圖片:3.png

3.        
把Panel的父物體改成Anchor，：

圖片:4.png

4.        
把該Anchor命名為Anchor-Bottom，並為該對象添加一個空遊戲對象，並命名為offset，並reset它的變換。該空遊戲對象可以用於它下面子物件與該Anchor之間的位移量。：

圖片:5.png

5.        
選中offset，選擇菜單中的NGUI-> Create new Widget，彈出一個Widget Tool對話方塊，該對話方塊基本是用於製作按鈕（Buttom）、標籤（Label）等組件的對話方塊。設定其參數之後，並點擊Add
To按鈕，確保該按鈕後面的對象是offset。這就在offset下產生一個Label便簽，並把標籤的文本改成Bottom，：

圖片:6.png

圖片:7.png

6.        
以同樣的方法在offset中添加一個slicedsprite。記住該對象的深度應該比Label要小，不然Label就會被覆蓋而看不到。這裡設定label的深度（depth）為0，而slicedsprite為-1，並在編輯器中調節該元素的大小，：

圖片:8.png

圖片:9.png

7.        
最後一步，選擇Anchor-Bottom，設定該元素的對齊（side）為“Bottom”。選擇之後，它會自動把它自己對其到攝像機的最低端，我們可以通過offset來調節該元件和Anchor之間的位移量。：

圖片:10.png

8.        
其他的7個Anchor可以使用Ctrl+D複製出來，並更改Anchor的不同的方式來對齊到不同的位置上，並在編輯視窗中調整offset的位置，其結果：

圖片:11.png

9.        
最後來製作其背景，建立一個空的遊戲對象，並最後Panel的子物體，並reset它的變換。命名為Anchor-background，並在NGUI菜單中，選擇Attach
an Anchor，此時該空遊戲對象就成為了一個Anchor，並設定對齊為center。

圖片:13.png

10.    
接著以Anchor-backgournd作為父物體，建立一個名為window的空遊戲對象，，window遊戲對象只是為了方便管理而設定的一個輔助對象而已。

圖片:12.png

圖片:15.png

11.    
在window下面，使用Create Widget面板建立一個slicedSprite,其參數如下：

圖片:13.png

12.    
在編輯視窗中縮放該對象，使其對齊到視窗，並把其深度（Depth）設定成-2。最終效果如下：

圖片:14.png

13.     接下來，給他添加一個多行Label，同樣使用createWidget對話方塊，其參數如下：

圖片:16.png

14.    
在其常值內容框中寫入需要的文字，當然，因為現在使用的是英文字型，所以中文是顯示不出來的，，並把深度（depth）改為-2，把Line
Width設定成500，可以設定顯示每行文字的寬度。：

圖片:17.png

在官方的該例子中，還有上面一個標題，其實也是有一個Label和一個slicedSprite組成的，所以，這裡不再闡述。下面的幾個例子將視時間創作，論壇發文章還真有點難度，尤其是用word寫出來後，圖片還得一張一張拷出來再貼上去。由於時間倉促，未免有疏漏的地方，請各位灌水的同仁批評指正。