轉自：http://blog.1vr.cn/article.asp?id=604
一:創建你的界面
1.創建一個新場景.
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.在2D的根對象上有個UIRoot腳本.這個腳本會重新調整遊戲對象符合你的屏幕高度,有自動和手動選擇高度.
2.Camera對象包含Camera和UICamera腳本.UICamera腳本包含NGUI的時間系統.
3.Anchor包含UIAnchor腳本.雖然這個腳本可以附加給控件,但在這裏可以避免Windows機器上半個像素偏移的問題.
4.Panel對象有UIPanel腳本呢,UIPanel是一個容器,它將包含所有UI小部件,並負責將所包含的部件組合優化,以減少DrawCall.
同樣你可能還注意到目前自動幫你選中了Panel對象,也就是說下面添加的所有部件都將在作爲它的子對象.
二:精靈Sprite
現在讓我們添加一些控件,在NGUI菜單中選擇Create a Widget.
這個嚮導會指導你建立一些基本的控件.需要選擇所實用的Atlas和字體,因爲是新建的項目,所有按下Atlas和Font按鈕沒有效果,相反會自動複製爲你最近使用的元素.我們這裏先選擇Atlas爲SciFi Atlas,字體爲SciFi Font-Normal.
接下來在Template選擇創建什麼類型的控件.這個的模板只是幫助你開始創建,當你真正使用NGUI的時候.你會經常用這個嚮導創建控件的基本體.
現在,讓我們創建第一個控件.
1.假設我們Atlas選擇的是SciFi Atlas,我們給Sprite選擇Dark.
2.點擊Add To按鈕,(如果按鈕是灰色的,那是因爲你沒有選擇Atlas).
3.你的Sprite現在已經創建並選中了.不過它非常小,讓我們用Transform來調整它符合我們的需要.
一個值得注意的事是同一個atlas中創建控件不會響應Z軸變換,不過你可以調整Depth參數來調整他們的前後次序.如果後面你用了多個atlase或者多個UI面板,那麼你就可以去調整Z軸變換.
你可以嘗試添加更多的控件,比如加入一個Sliced Sprite(一個含有9個切片的Sprite,創建固定邊框的控件最佳選擇),一個Tiled Sprite(一個Sprite縮放填充整個區域)和Filled Sprite(每個Sprite都會有一個單獨的參數來控制那些是可見的,常被用來做進度條或者滾動條).如果你找不到它們也沒關係,後面的教程將講解它們.
三:9-Slicing Sprite
1.選擇Panel對象,用控件嚮導添加一個"Drak"的Sliced Sprite.什麼叫9-slicing?查看這裏:http://www.adobe.com/designcenter/video_workshop/html/vid0204.html
2.調整縮放爲(500,500,1).
3.添加另外一個Sliced Sprite並設置縮放爲(500,40,1).
4.更改第二個sprite的位置到(0,230,0).
5.更改Sprite的Dark爲Light.
6.向下圖一樣調整兩個sprite的顏色.
7.調整Depth,讓彩色的sprite在大的sprite前面.
現在看起來像個小窗口了.
四:拼貼精靈
1.選擇Panel對象,添加Tiled Sprite,並選擇Honeycomb sprite.
2.設置它的位置爲(0,-19,0)和縮放爲(494,457,1).
3.同樣你要設置深度調整前後次序.
可以按照自己的意願調整它的顏色使他看起來更好.
你可以在任何時候通過選擇Panel對象中的Debug Info的Geometry項來查看創建的控件的幾何網格.
添加了這麼多東西,目前依舊僅有一個Draw call.
五:標籤
1.像前面講的一樣方法選擇Panel對象並添加一個Label控件.
2.並點擊Add To 按鈕,如果Add To按鈕不可用,是因爲你沒有指定字體,可以給Font欄指定"SciFi Font-Normal".
3.在檢視面板給剛添加的UILabel的Text項添加一些文本.比如Hello World!
4.移動標籤位置到(0,234,0),讓它出現在標題欄上.
可以添加多個Label並且使用16進制的值描述不同顏色.以[FF0000]開始,[-]結束,在這之間的文本都會變爲紅色.
因爲使用了相同的字體相同的材質,所有整個場景依舊是一個DrawCall.
六:按鈕
現在,你應該可以很容易的創建一個按鈕了,但還不知道如何讓它接受點擊時間.不過這很簡單,任何碰撞盒都會收到它應有的事件.所以,一個簡單的按鈕你只需要在NGUI下選擇Attach a Collider給控件,另外NGUI的模板已經有按鈕末班,讓我們看看.
我們選擇Panel,用嚮導創建一個Button.
你能看到按鈕有多個部分,一個是背景,一個是文本標籤還有一些腳本,這就是NGUI的特性,多個小組件像樂高積木一樣組合成強大的控件.
1. UIButtonColor當鼠標懸停在按鈕或者按下的顏色.
2. UIButtonScale當鼠標懸停在按鈕上時按鈕放大.
3. UIButtonOffset當按下按鈕時按鈕像右下的位移.
4. UIButtonSound當按鈕按下時播放聲音.
當然還有其他組件,比如UIButtonPlayAnimation 和 UIButtonMessage,你自己摸索嘍.
你也可以添加自定義事件讓它處理更多的事件.
現在,你應該做成這樣的一個界面了.
七:滑塊
下面讓我們添加一個滑塊.
1.用Widget Tool,選擇Slider模板.
2.給Foreground用Button,給Background用Dark.Thumb可以也用Button.
3.選擇Panel後點擊Add To按鈕.
一個滑塊滾動條就做好了.你可以選擇滑塊的遊戲對象進行顏色和尺寸的調整，但是經驗建議你不要去調整控件對象下面的子對象.
你可以嘗試再做一個垂直滑塊.
八:複選框
接下來我們來做複選框:
1.點擊蒙版用"X",背景用"Dark".
2.創建一個複選框後再選擇Panel對象創建一個新GameObject.
3.添加更多的複選框到這個GameObject.
4.在這些複選框上選擇Option項.
5.運行一下程序,點擊複選框.看看效果.
有關聯的複選框只需要放在同一個父遊戲對象中即可.
還可以附件一些其他事件處理功能,如UICheckboxControlledComponent 和 UICheckboxControlledObject.可以用來由複選框狀態來啓用禁用指定的組件或者遊戲對象.
嘗試着做3個複選框來控制紅,綠,藍三個控件的顯隱.
九:輸入框
現在我們來創建一個輸入框.任何文本標籤通過添加碰撞盒盒UIInput腳本都可以變成輸入框.不過這裏我們也可以用Input模板來創建:
1.正如你掌握的,用Widget Tool創建輸入框.
2.可以用"Dark"或"Highlight"作爲背景.
3.將它調試正確.
播放遊戲,點擊輸入框就可以直接輸入文字,在iOS和Android設備上則會自動顯示屏幕鍵盤.這個輸入框同樣也支持Unity3.4.1新增的輸入法類,讓你能輸入中文.目前唯一不支持Flash平臺,因爲Unity Flash還沒增加IME輸入支持.
十:三維界面
上面的我們一直在做2D的界面,但我們也可以很容易的讓它變成3D界面.繼續跟着我做吧:
1.將Panel從Anchor的子物體中解除掉,由UI Root作爲它的父對象.
2.刪除Anchor(本教程我們只做靜止的UI).
3.將攝影機改成透視投影.
4.將相機的Near改爲0.1和Far改爲4.0.
5.將相機往後移動一點,大概在(0,0,-550)的位置.
6.給Panel一點角度,我們這裏設置旋轉爲(0,345,0).
7.另外一個霸氣的東西就是添加PanWithMouse到Camera.
點擊Play,試着移動鼠標.看發生了什麼.如果你做的沒錯,你將會看到下面這樣的窗口.