原文地址：http://blog.csdn.net/pleasecallmewhy/article/details/8554413
原文地址：http://www.tasharen.com/?page_id=185
NGUI下載地址：點我傳送
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腳本。這個腳本會重新調整遊戲對象符合你的屏幕高度，有自動和手動選擇高度。讓你制定小部件在像素中的座標，並且和遊戲世界中的剩餘對象相比依舊相對來說較小。
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。不知道什麼叫9-slicing？查看這裏
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。試試看當你重新縮放它的時候會發生什麼，也可以按照自己的意願調整它的顏色使他看起來更好。
你可以在任何時候通過選擇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當鼠標懸停在按鈕或者按下的顏色。
2.UIButtonScale當鼠標懸停在按鈕上時按鈕放大。
3.UIButtonOffset當按下按鈕時按鈕像右下的位移。
4.UIButtonSound當按鈕按下時播放聲音。
當然還有其他組件，比如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模板。
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欄）。
目前唯一不支持Flash平臺，因爲Unity Flash還沒增加IME輸入支持。
對應的場景在插件中的Tutorial 9 - Input中有：
譯者注：NGUI的中文輸入需要下載單獨的中文字體（或者自己做一個），下載地址，下載後拖拽到對應的Inpextor面板即可：
這樣就可以輸入中文了：
NGUI教程：步驟10-3D
上面的我們一直在做2D的界面，但我們也可以很容易的讓它變成3D界面。讓我們繼續吧！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中有：
