NGUI教程：步驟1-Scene
更多精彩請關注【狗刨學習網】
1.創建一個新的場景（New Scene）。
2.選擇並刪除場景裏的MainCamera。
3.在NGUI菜單下選擇Create a New
UI，會打開UI創建嚮導。
4.在創建嚮導中你能更改UI的基本參數。現在我們選Default
layer，點擊Create Your UI 按鈕。
5.就這樣,你的UI便創建好了。
注意： 如果在一個已存在NGUI的項目中你要跳過第二步，並且你要選擇一個不同的UI層，你還要確保非GUI相機不渲染UI層。
在做具體UI控件之前,我們看看UI嚮導爲我們做了什麼。
1.在UI Root (2D)對象上有個UIRoot腳本。這個腳本會重新調整遊戲對象符合你的屏幕高度，有自動和手動選擇高度。讓你制定小部件在像素中的座標，並且和遊戲世界中的剩餘對象相比依舊相對來說較小。
1.在UI Root (2D)對象上有個UIRoot腳本。這個腳本會重新調整遊戲對象符合你的屏幕高度，有自動和手動選擇高度。讓你制定小部件在像素中的座標，並且和遊戲世界中的剩餘對象相比依舊相對來說較小。
2.Camera對象包含Camera和UICamera腳本。UICamera腳本包含NGUI的事件系統（event
system）。
3.Anchor包含UIAnchor腳本。雖然這個腳本可以附加給控件，但在這裏可以避免Windows機器上半個像素偏移的問題。
4.Panel對象有UIPanel腳本，UIPanel是一個容器，它將包含所有UI小部件，並負責將所包含的部件組合優化，以減少繪製命令的調用。
同時，你可能還注意Panel(儀表板)GameObject現在已經被選中了。也就是說下面添加的所有部件都將在作爲它的子對象。
對應的場景在插件中的Tutorial 1 - Scene中有：
NGUI教程：步驟2-Spirit
現在讓我們添加一些控件,在NGUI菜單中選擇NGUI
menu -> Create a Widget。
這個嚮導會指導你建立一些基本的控件。需要選擇所使用的圖片集Atlas和字體集Font。
因爲是新建的項目，所有按下Atlas和Font按鈕沒有效果，相反會自動展示最近使用的元素。
你想要做的事情是拖拽你想用的Atlas和Font進入到按鈕旁邊的區域。我們這裏先選擇Atlas爲SciFi
Atlas，字體爲SciFi Font-Normal。
接下來就是模板的問題。你通過在一堆模板中選擇來挑選你想創建什麼樣的部件。
注意我說的是“模板”。這個的模板只是爲了方便而幫助你開始創建，當你真正使用NGUI的時候，你會經常花很多的時間來複制粘貼整個的小部件而不僅僅是用
這個嚮導。現在，讓我們創建第一個控件。
1.假設我們Atlas選擇的是SciFi Atlas，我們給Sprite選擇Dark。
2.點擊Add To按鈕，(如果按鈕是灰色的，那是因爲你沒有選擇Atlas）。.如果你不知道怎麼找到它：在項目窗口有一個搜索欄，輸入scifi即可。
3.你的Sprite現在已經創建並選中了。不過它非常小，當你使用NGUI的時候，你總需要通過Transform來移動部件，放縮它們，旋轉他們。
一個非常重要的事情是同一個atlas中的控件不會使用Z軸，不過，你可以調整Depth參數來做前後的調整，如果後面項目結束的時候你用了多個atlase（或者多個UI面板），那麼你就可以去調整Z軸變換。原因很簡單：這允許你創建完全平滑的窗口，你可以轉向一側，而且在繪製的時候部件的順序也不會被搞亂。
在前往下一章的學習之前，你可以嘗試添加更多的控件，比如加入一個Sliced
Sprite(一個含有9個切片的Sprite，創建固定邊框的控件最佳選擇)，一個Tiled Sprite(一個Sprite縮放填充整個自定義區域)和Filled Sprite(每個Sprite都會有一個單獨的參數來控制哪些是可見的，常被用來做進度條或者滾動條)。如果你找不到它們也沒關係，後面的教程將講解它們。
對應的場景在插件中的Tutorial2 - Spirit中有：
NGUI教程：步驟3-Sliced
Sprite
1.選擇中Panel對象，用控件嚮導從atlas中添加一個"Dark"的Sliced
Sprite。
2.調整縮放爲(500，500，1)。
3.添加另外一個Sliced Sprite並設置縮放爲(500，40，1)。
4.更改第二個sprite的位置到(0，230，0)。
5.更改Sprite的Dark爲Light。
6.向下圖一樣調整兩個sprite的顏色直到你喜歡它們位置。
7.調整Depth，讓彩色的sprite在 Sliced
Sprite前面。
現在看上去有點像是小窗口了。
對應的場景在插件中的Tutorial 3 - Sliced
Sprite中有：
NGUI教程：步驟4-Tiled
Sprite
1.選擇Panel對象，添加Tiled Sprite，並選擇Honeycomb
sprite。
2.設置它的位置爲(0，-19，0)和縮放爲(494，457，1)。
3.需要設置深度調整前後次序，將它往後調直到剛好在背景的前面。同時不要忘了調整窗口背景的深度（往後調點）。
玩一玩這個spirit。試試看當你重新縮放它的時候會發生什麼，也可以按照自己的意願調整它的顏色使他看起來更好。
玩一玩這個spirit。試試看當你重新縮放它的時候會發生什麼，也可以按照自己的意願調整它的顏色使他看起來更好。
你可以在任何時候通過選擇Panel對象中的Debug
Info的Geometry項然後在場景中點擊你的部件來檢驗生成的幾何網格。
添加了這麼多東西，目前依舊僅調用了一次繪畫指令。
對應的場景在插件中的Tutorial 4 - Tiled
Sprite中有：
NGUI教程：步驟5-Label
1.像前面講的一樣方法，選擇Panel對象並在部件導航模板中添加一個Label控件。
2.在點擊Add To 按鈕之後你的標籤應該已經添加到了場景中並且已經被選中了，如果Add
To按鈕爲灰色不可用，是因爲你沒有指定字體Font，可以從Project面板中給Font欄指定"SciFi Font-Normal"。
3.在Inpector面板給剛添加的UILabel的Text項添加一些文本。比如Hello
World!
4.移動標籤位置到(0，234，0)，讓它出現在標題欄上。
你也可以創建一個不同的Label並且使用不同的字體。花點時間研究植入顏色的功能，可以使用16進制的值描述不同顏色（直接從PS中粘貼）。
以[FF0000]代表紅色，插入[-]來還原到原來的顏色，在這之間的文本都會變爲紅色。。
因爲使用了相同的字體相同的材質，所有整個場景依舊是一個DrawCall。
對應的場景在插件中的Tutorial 5 - Label中有：
NGUI教程：步驟6-Button
現在，你應該可以很容易的創建一個看上去像是按鈕的東西了，但還不知道如何讓它接受點擊事件。
不過這很簡單，任何帶有碰撞的事件都會收到它應有的事件。
所以，一個最簡單的按鈕你只需要在NGUI下選擇Attach
a Collider給控件：NGUI menu -> Attach a Collider。
但是幸運的是，NGUI中已經嵌入了按鈕模板，讓我們看看。
和前面一樣，我們選擇Panel，用使用嚮導創建一個Button。
你能看到按鈕不再像是一個簡單的GameObject了，實際上有多個部分。
因爲按鈕事實上是有幾個部分組成的：一個是背景，一個是標籤，還有一些腳本來處理按鈕的事件。
這就是NGUI的特性，多個小組件像積木一樣組合成強大的控件。
1.UIButtonColor當鼠標懸停在按鈕或者按下的顏色。
1.UIButtonColor當鼠標懸停在按鈕或者按下的顏色。
2.UIButtonScale當鼠標懸停在按鈕上時按鈕放大。
3.UIButtonOffset當按下按鈕時按鈕像右下的位移。
4.UIButtonSound當按鈕按下時播放聲音。
當然還有其他組件，比如UIButtonPlayAnimation 和 UIButtonMessage，就需要你自己摸索了。
你也可以添加自定義事件（MonoBehaviour），讓它處理更多的事件。
當然還有其他組件，比如UIButtonPlayAnimation 和 UIButtonMessage，就需要你自己摸索了。
你也可以添加自定義事件（MonoBehaviour），讓它處理更多的事件。
- void OnHover (bool isOver) – Sent out when the mouse hovers over the collider or moves away from it. Not sent on touch-based devices.
- void OnPress (bool isDown) – Sent when a mouse button (or touch event) gets pressed over the collider (with ‘true’) and when it gets released (with ‘false’, sent to the same collider even if it’s released elsewhere).
- void OnClick() — Sent to a mouse button or touch event gets released on the same collider as OnPress.UICamera.currentTouchID tells you which button was clicked.
- void OnDoubleClick () — Sent when the click happens twice within a fourth of a second.UICamera.currentTouchID tells you which button was clicked.
- void OnSelect (bool selected) – Same as OnClick, but once a collider is selected it will not receive any further OnSelect events until you select some other collider.
- void OnDrag (Vector2 delta) – Sent when the mouse or touch is moving in between of OnPress(true) and OnPress(false).
- void OnDrop (GameObject drag) – Sent out to the collider under the mouse or touch when OnPress(false) is called over a different collider than triggered the OnPress(true) event. The passed parameter is the game object of the collider that received the OnPress(true) event.
- void OnInput (string text) – Sent to the same collider that received OnSelect(true) message after typing something. You likely won’t need this, but it’s used by UIInput
- void OnTooltip (bool show) – Sent after the mouse hovers over a collider without moving for longer thantooltipDelay, and when the tooltip should be hidden. Not sent on touch-based devices.
- void OnScroll (float delta) is sent out when the mouse scroll wheel is moved.
-
void OnKey (KeyCode key) is sent when keyboard or controller input is used.
對應的場景在插件中的Tutorial 6 - Button中有：
NGUI教程：步驟7-Slider
下面讓我們添加一個滑塊。
1.用Widget Tool，選擇Slider模板。
1.用Widget Tool，選擇Slider模板。
2.給Foreground用Button sprite，給Background用Dark
sprite。Thumb可以也用Button。
3.選擇Panel後點擊Add To按鈕。
這樣，一個滑塊滾動條就做好了。
你可以選擇滑塊的遊戲對象進行顏色和尺寸的調整，但是經驗建議你不要去調整控件對象下面的子對象。
這樣當你旋轉它們的時候可以保持它們的尺寸，並且內部的部件可以在座標下繼續工作。當然你也可以嘗試再做一個垂直滑塊。
對應的場景在插件中的Tutorial 7 - Slider中有：
NGUI教程：步驟8-Checkbox
接下來我們來做複選框：
1.點擊蒙版用"X"，背景用"Dark"。
2.創建一個複選框後再選擇Panel對象創建一個新GameObject。
3.添加更多的複選框到這個GameObject。
4.在這些複選框上選擇Option項。
5.運行一下程序，點擊複選框。看看效果。
如果你每一步都操作正確了，你不可能同時選中兩項：因爲選中了“Radio
Button Root”參數之後你的複選框就會變成了單選按鈕，並且他們通過同一個根目錄放在了一組：就是那個你指定的Transform對象。
還可以附件一些其他事件處理功能，如UICheckboxControlledComponent
和 UICheckboxControlledObject。
可以用來由複選框狀態來啓用禁用指定的組件或者遊戲對象。
你可以嘗試着做3個複選框來控制紅，綠，藍三個控件的顯示和隱藏。
對應的場景在插件中的Tutorial 8 - Checkbox中有：
NGUI教程：步驟9-Input
現在我們來創建一個輸入框。任何文本標籤通過添加碰撞盒UIInput腳本都可以變成輸入框，當然如果有背景的話會更好看一些。
不過幸運的是，Input模板已經爲我們做好了這一切：
1.用Widget Tool創建輸入框。
2.你可以用“Dark”sprite或“Highlight”
sprite作爲背景。
3.不斷調整直到將它調試正確。
如果你點擊Play運行遊戲，點擊輸入框就可以直接輸入文字，在iOS和Android設備上則會自動顯示屏幕鍵盤。這個輸入框同樣也支持Unity3.4.1新增的輸入方法（IME=Input Method），讓你能輸入中文（譯者注：測試的時候直接輸入不顯示中文，並拖拽到Label的Font欄）。
如果你點擊Play運行遊戲，點擊輸入框就可以直接輸入文字，在iOS和Android設備上則會自動顯示屏幕鍵盤。這個輸入框同樣也支持Unity3.4.1新增的輸入方法（IME=Input Method），讓你能輸入中文（譯者注：測試的時候直接輸入不顯示中文，並拖拽到Label的Font欄）。
目前唯一不支持Flash平臺，因爲Unity Flash還沒增加IME輸入支持。
對應的場景在插件中的Tutorial 9 - Input中有：
譯者注：NGUI的中文輸入需要下載單獨的中文字體（或者自己做一個），下載後拖拽到對應的Inpextor面板即可：
這樣就可以輸入中文了：
NGUI教程：步驟10-3D
上面的我們一直在做2D的界面，但我們也可以很容易的讓它變成3D界面。讓我們繼續吧！
1.將Panel從Anchor的中解除掉，也就是說不再是Anchor的子物體，由UI Root作爲它的父對象。
1.將Panel從Anchor的中解除掉，也就是說不再是Anchor的子物體，由UI Root作爲它的父對象。
2.刪除Anchor（本教程我們只做靜止的UI）。
3.將攝影機改成透視投影Perspective Projection。
4.將相機的Near改爲0.1和Far改爲4.0。
5.將相機往後移動一點，大概在（0，0，-550）的位置。
6.給Panel一點角度，我們這裏設置旋轉爲（0，345，0）。
7.爲了看上去的效果更炫目一點，添加PanWithMouse到Camera。
點擊運行遊戲，並且四處移動鼠標，如果一切正確，你會看到一個效果很好的窗口。
注意這七步僅僅在一開始創建了2D UI的基礎上才需要。
如果在第一步創建了3D UI，那麼這些都不再需要了。
最後，你需要什麼樣的UI取決於你的想象力。：）
對應的場景在插件中的Tutorial 10 - 3D中有：
