NGUI官網樣本6 – Draggable Window講解（一）

看了以上幾個教程，估計大家對NGUI的前幾個執行個體有所瞭解，建議自己做一遍，這樣可以加深對它的理解。接下來，我將詳細描述創作可拖拽視窗的製作過程。在這裡我分四步來完成：一、製作和布局介面；二、製作gui的動態效果和拖拽功能；三、製作燈光效果；

一、        製作和布局介面。

1.        
在NGUI菜單中，開啟Create a new UI對話方塊,在對話方塊中設定Camera為Advanced3D,並點擊Create
your UI，此時在Hierarchy視窗中產生了對應的層次結果，：

圖片:1.png

調整該層次結果，使得Camera與Panel脫離，並且Camera和Panel也脫離UI
Root（3D）刪除Anchor和UIRoot（3D），建立一個Scene空的遊戲對象，reset一下，再建立一個3DUI空遊戲對象，reset一下，再建立一個Window
遊戲對象，reset一下，同時Panel也reset一下，最後調整它們之間的層級結構，（不斷地reset是為了更好地定位各個元件），Window和3DUI等這些空物體只是為了方便管理情境中的元素而已，同時把Camera的postion中z值設定為-1.7，這樣可以使得GUI和攝像機之間有一定的距離，並設定攝像機的near為0.01，其結果為：

圖片:2.png

選擇Panel，為其添加一個帶有法線貼圖的背景，選擇Create a new widget視窗，選擇Template為TiledSprite模板，Sprite為HoneyComb作為背景，其參數如下，設定完成之後點擊Add
to，為該gui添加一個Tiled Sprite，作為
景，保證該按鈕後面的值為panel：

圖片:3.png

添加Tiled Sprite之後，把它縮放到x=490，y=510，顏色設定成黑色，：

圖片:4.png

     為了看到法線貼圖的效果，選擇Panel，勾選Normals，並為情境添加一盞平行光，調整光線的角度，最終效果：

圖片:5.png

為該視窗添加一個視窗的邊框，選擇Create a new Widget對話方塊，選擇Template為SlicedSprite模板，Sprite為Button作為背景，設定參數之後，點擊Add
To建立一個Sliced Sprite，建立完之後，選擇該Sliced Sprite，設定其Dept為-1，Color
Tint為綠色，大小為x=498，y=515，比背景稍微大一些，可以看到在視窗的邊緣出現了綠色的邊框，：

圖片:6.png

為視窗添加一個頂欄，選擇Create a new Widget對話方塊，設定參數之後，點擊Add To，建立一個Sliced
Sprite。建立完之後，選擇該Sliced Sprite，調整它的位置和大小，參數和效果：

圖片:7.png

建立視窗標題。選擇Create a new Widget對話方塊，選擇Template為Label，點擊Add
to，為視窗建立一個Label，在Label的文本輸入框中輸入Example
Draggable Window，並在情境編輯視窗中調整它的位置，其參數和最終結如所示：

圖片:8.png

用同樣的方法，為其添加另外一個Label，或者直接使用Ctrl+D複製出一個出來，修改它的文字內容，設定它的line
width為460，調整它的位置，結果：

圖片:9.png

建立Logo表徵圖。選擇Create a new Widget對話方塊，選擇template中的sprite，Sprite為NGUI，選擇Add
to，為視窗添加一個Logo表徵圖，調整它的位置，最終效果：

圖片:10.png

建立兩個Checkbox。同樣選擇Create a new Widget對話方塊，選擇template中的checkbox，background設定為Dark，Checkmark為X，最後點擊Add
to，為視窗添加一個Checkbox。選擇Checkbox中的Label，把文本修改為EnableAutoYaw。再選擇Checkbox中的Background，把Color
Tint選擇為藍色。調整該Checkbox的位置。接著，使用ctrl+D複製出另外一個Checkbox，把這個checkbox裡面的文本修改為Enable
DragTilt，放置在右邊，最後效果
示：

圖片:11.png

建立兩個按鈕。選擇Create a new Widget對話方塊，選擇template中的Button，background選擇Button，最後點擊Add
to，為視窗添加一個按鈕。選擇該按鈕下的label，修改文本為Hello，選擇其下的background，設定Color
Tin為藍色，放置在合適的位置。接著使用Ctrl+D，複製出另外一個button，並把其下的label的文本設定為World，放置在合適的位置。最終效果：

圖片:12.png