[Unity3D]事半功倍：介面外掛程式NGUI的使用教程與執行個體

原文地址：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中有：