unity3d ngui

NGUI是嚴(yán)格遵循KISS原則并用C#編寫的Unity（適用于專業(yè)版和免費(fèi)版）插件，提供強(qiáng)大的UI系統(tǒng)和事件通知框架。程序員可以很容易地?cái)U(kuò)展NGUI的功能或調(diào)節(jié)已有功能。

ngui 怎么安裝：

首先導(dǎo)入NGUI package，在unity工程窗口中點(diǎn)擊右鍵選擇 Importpackageàcustom package，選擇你下載的NGUI插件，導(dǎo)入完成后效果如圖:

unity3d ngui 教程：

1、選擇菜單NGUIàOpen the UI Wizard,彈出創(chuàng)建UI對(duì)話框。點(diǎn)擊Layer窗口右邊對(duì)應(yīng)的按鈕，彈出層選擇對(duì)話框，在這里我們選擇AddLayer

新建Layer窗口中，我們新建一個(gè)叫NGUI的Layer，添加Layer之后

再次回到UITool窗口，更改界面Layer為NGUI

2、在下面的Camera選項(xiàng)中有None，Simple2D，Advanced3d選項(xiàng)，分別用于創(chuàng)建不帶camera的界面（這里如果已經(jīng)有一個(gè)UI界面，我們只是想添加一個(gè)新的界面，可以選擇這個(gè)），簡(jiǎn)單的2D界面（此選項(xiàng)沒(méi)有Z軸效果），高級(jí)3D界面（此選項(xiàng)下的界面有Z軸效果，并且可以3D旋轉(zhuǎn)，以此選項(xiàng)創(chuàng)建的UI有自適應(yīng)分辨率的功能）。

在這里我們先創(chuàng)建一個(gè)Simple2D界面，選擇好之后點(diǎn)擊下面的Create Your UI按鈕，創(chuàng)建一個(gè)UI。程序會(huì)自動(dòng)為我們創(chuàng)建一個(gè)有節(jié)點(diǎn)層級(jí)關(guān)系的一些物體，如圖，分別是UI根節(jié)點(diǎn)，，一個(gè)相機(jī)節(jié)點(diǎn)，一個(gè)錨點(diǎn)節(jié)點(diǎn)，和一個(gè)用于盛放按 鈕等UI的Panel節(jié)點(diǎn)我們現(xiàn)在可以不用管這些節(jié)點(diǎn)的功能和作用，只要記住Panel節(jié)點(diǎn)即可，以后我們創(chuàng)建的所有按鈕等UI都放在Panel層級(jí)下。

3、創(chuàng)建UI元素，選擇菜單NGUIàOpen the Widget Wizard,彈出創(chuàng)建UI元素對(duì)話框

4、首先是Atlas窗口，Atlas就是一個(gè)大的圖片，里面用于存放我們需要用到的各種圖標(biāo)。在后面我們將講解怎么創(chuàng)建自己的Atlas,Font是我們創(chuàng)建UI時(shí)用到的字體，Template可以允許我們選擇要?jiǎng)?chuàng)建的UI類型，包括Label，Spirit等等，如圖

5、我們可以使用NGUI自帶的一些Atlas，如圖是NGUI自帶的一些Atlas，其中帶有Font字樣的是字體Atlas。

6、這里Atlas我選擇Fantasy Atlas，F(xiàn)ont選擇Fantasy Atlas –Font Normal，在項(xiàng)目窗口中選擇Fantasy Atlas拖到Atlas中，選擇Fantasy Atlas –FontNormal，拖放到Font中，

7、在Template中，我們選擇 Spirit，Spirit選項(xiàng)讓我們選擇需要?jiǎng)?chuàng)建的圖標(biāo)，這里我們選擇smooth，Pivot默認(rèn)的center ,然后確保AddTo右邊的選項(xiàng)是我們要添加到的Panel中，如果不是，我們可以在Inspector中點(diǎn)擊選中panel，NGUI會(huì)自動(dòng)為我們切 換。最后點(diǎn)擊AddTo，NGUI會(huì)在Panel節(jié)點(diǎn)下創(chuàng)建一個(gè)名稱為Sprite (Smooth)的spirit。屬性窗口如圖：

2、 這里的atlas，Spirit，Pivot都是剛才創(chuàng)建的時(shí)候已經(jīng)選擇好的，如果不滿意可以在這里修改。

Depth可以控制我們的圖標(biāo)向前或者向后偏移，例如如果我們想要某個(gè)圖標(biāo)在另一個(gè)圖標(biāo)的上方，我們可以把它的Depth設(shè)置更大。

Correction主要用于修正因圖標(biāo)像素是奇數(shù)而出現(xiàn)的問(wèn)題。

Color Tint可以在圖標(biāo)顏色的基礎(chǔ)上為圖標(biāo)著色，

Clipboard是剪貼版的顏色，當(dāng)我們選擇一個(gè)Cilpboard顏色后，點(diǎn)擊Paste可以將顏色粘貼到ColorTint的顏色上。

Spirit Type表示要?jiǎng)?chuàng)建的Spirit平鋪方式，包括Simple，Sliced，Tiled，F(xiàn)illed。如果圖標(biāo)較小，我們需要平鋪很大，但是又不想看出重復(fù)，可以選擇sliced。

這里我們選擇sliced，F(xiàn)illcenter選擇默認(rèn)。然后修改Spirit的縮放值。我們可以選擇不同的SlicedType查看不同選項(xiàng)的效果。如圖所示:

其中前三種選項(xiàng)大致一樣，只有第四種Filled選項(xiàng)下又包括Fill Dir（填充方向），F(xiàn)illAmount（填充量），Invert Fill（反轉(zhuǎn)填充）三個(gè)選項(xiàng)，這三個(gè)主要用于修改填充為360旋轉(zhuǎn)填充，水平，垂直填充等，大家可以自己試驗(yàn)一下效果。

unity3d ngui 怎么用？

一:創(chuàng)建你的界面
1.創(chuàng)建一個(gè)新場(chǎng)景.
2.選擇并刪除場(chǎng)景里的MainCamera.
3.在NGUI菜單下選擇Create a New UI,會(huì)打開(kāi)UI創(chuàng)建向?qū)?
4.在創(chuàng)建向?qū)е心隳芨腢I的基本參數(shù),現(xiàn)在我們選Default layer.點(diǎn)擊Create Your UI 按鈕.
5.就這樣,你的UI創(chuàng)建好了.

如果在一個(gè)已存在NGUI的項(xiàng)目中你要跳過(guò)第二步,并且你要選擇一個(gè)不同的UI層,你還要確保非GUI相機(jī)不渲染UI層.
在做具體UI控件之前,我們看看UI向?qū)槲覀冏隽耸裁?

1.在2D的根對(duì)象上有個(gè)UIRoot腳本.這個(gè)腳本會(huì)重新調(diào)整游戲?qū)ο蠓夏愕钠聊桓叨?有自動(dòng)和手動(dòng)選擇高度.
2.Camera對(duì)象包含Camera和UICamera腳本.UICamera腳本包含NGUI的時(shí)間系統(tǒng).
3.Anchor包含UIAnchor腳本.雖然這個(gè)腳本可以附加給控件,但在這里可以避免Windows機(jī)器上半個(gè)像素偏移的問(wèn)題.
4.Panel對(duì)象有UIPanel腳本呢,UIPanel是一個(gè)容器,它將包含所有UI小部件,并負(fù)責(zé)將所包含的部件組合優(yōu)化,以減少DrawCall.

同樣你可能還注意到目前自動(dòng)幫你選中了Panel對(duì)象,也就是說(shuō)下面添加的所有部件都將在作為它的子對(duì)象.

二:精靈Sprite
現(xiàn)在讓我們添加一些控件,在NGUI菜單中選擇Create a Widget.
這個(gè)向?qū)?huì)指導(dǎo)你建立一些基本的控件.需要選擇所實(shí)用的Atlas和字體,因?yàn)槭切陆ǖ捻?xiàng)目,所有按下Atlas和Font按鈕沒(méi)有效果,相反會(huì)自動(dòng)復(fù)制為你最近使用的元素.我們這里先選擇Atlas為SciFi Atlas,字體為SciFi Font-Normal.
接下來(lái)在Template選擇創(chuàng)建什么類型的控件.這個(gè)的模板只是幫助你開(kāi)始創(chuàng)建,當(dāng)你真正使用NGUI的時(shí)候.你會(huì)經(jīng)常用這個(gè)向?qū)?chuàng)建控件的基本體.

現(xiàn)在,讓我們創(chuàng)建第一個(gè)控件.
1.假設(shè)我們Atlas選擇的是SciFi Atlas,我們給Sprite選擇Dark.
2.點(diǎn)擊Add To按鈕,(如果按鈕是灰色的,那是因?yàn)槟銢](méi)有選擇Atlas).
3.你的Sprite現(xiàn)在已經(jīng)創(chuàng)建并選中了.不過(guò)它非常小,讓我們用Transform來(lái)調(diào)整它符合我們的需要.

一個(gè)值得注意的事是同一個(gè)atlas中創(chuàng)建控件不會(huì)響應(yīng)Z軸變換,不過(guò)你可以調(diào)整Depth參數(shù)來(lái)調(diào)整他們的前后次序.如果后面你用了多個(gè)atlase或者多個(gè)UI面板,那么你就可以去調(diào)整Z軸變換.
你可以嘗試添加更多的控件,比如加入一個(gè)Sliced Sprite(一個(gè)含有9個(gè)切片的Sprite,創(chuàng)建固定邊框的控件最佳選擇),一個(gè)Tiled Sprite(一個(gè)Sprite縮放填充整個(gè)區(qū)域)和Filled Sprite(每個(gè)Sprite都會(huì)有一個(gè)單獨(dú)的參數(shù)來(lái)控制那些是可見(jiàn)的,常被用來(lái)做進(jìn)度條或者滾動(dòng)條).如果你找不到它們也沒(méi)關(guān)系,后面的教程將講解它們.

三:9-Slicing Sprite
1.選擇Panel對(duì)象,用控件向?qū)砑右粋€(gè)"Drak"的Sliced Sprite.什么叫9-slicing?查看這里:http://www.adobe.com/designcenter/video_workshop/html/vid0204.html
2.調(diào)整縮放為(500,500,1).
3.添加另外一個(gè)Sliced Sprite并設(shè)置縮放為(500,40,1).
4.更改第二個(gè)sprite的位置到(0,230,0).
5.更改Sprite的Dark為L(zhǎng)ight.
6.向下圖一樣調(diào)整兩個(gè)sprite的顏色.
7.調(diào)整Depth,讓彩色的sprite在大的sprite前面.
現(xiàn)在看起來(lái)像個(gè)小窗口了.

四:拼貼精靈
1.選擇Panel對(duì)象,添加Tiled Sprite,并選擇Honeycomb sprite.
2.設(shè)置它的位置為(0,-19,0)和縮放為(494,457,1).
3.同樣你要設(shè)置深度調(diào)整前后次序.
可以按照自己的意愿調(diào)整它的顏色使他看起來(lái)更好.
你可以在任何時(shí)候通過(guò)選擇Panel對(duì)象中的Debug Info的Geometry項(xiàng)來(lái)查看創(chuàng)建的控件的幾何網(wǎng)格.
添加了這么多東西,目前依舊僅有一個(gè)Draw call.

五:標(biāo)簽
1.像前面講的一樣方法選擇Panel對(duì)象并添加一個(gè)Label控件.
2.并點(diǎn)擊Add To 按鈕,如果Add To按鈕不可用,是因?yàn)槟銢](méi)有指定字體,可以給Font欄指定"SciFi Font-Normal".
3.在檢視面板給剛添加的UILabel的Text項(xiàng)添加一些文本.比如Hello World!
4.移動(dòng)標(biāo)簽位置到(0,234,0),讓它出現(xiàn)在標(biāo)題欄上.
可以添加多個(gè)Label并且使用16進(jìn)制的值描述不同顏色.以[FF0000]開(kāi)始,[-]結(jié)束,在這之間的文本都會(huì)變?yōu)榧t色.
因?yàn)槭褂昧讼嗤淖煮w相同的材質(zhì),所有整個(gè)場(chǎng)景依舊是一個(gè)DrawCall.

六:按鈕
現(xiàn)在,你應(yīng)該可以很容易的創(chuàng)建一個(gè)按鈕了,但還不知道如何讓它接受點(diǎn)擊時(shí)間.不過(guò)這很簡(jiǎn)單,任何碰撞盒都會(huì)收到它應(yīng)有的事件.所以,一個(gè)簡(jiǎn)單的按鈕你只需要在NGUI下選擇Attach a Collider給控件,另外NGUI的模板已經(jīng)有按鈕末班,讓我們看看.
我們選擇Panel,用向?qū)?chuàng)建一個(gè)Button.
你能看到按鈕有多個(gè)部分,一個(gè)是背景,一個(gè)是文本標(biāo)簽還有一些腳本,這就是NGUI的特性,多個(gè)小組件像樂(lè)高積木一樣組合成強(qiáng)大的控件.
1. UIButtonColor當(dāng)鼠標(biāo)懸停在按鈕或者按下的顏色.
2. UIButtonScale當(dāng)鼠標(biāo)懸停在按鈕上時(shí)按鈕放大.
3. UIButtonOffset當(dāng)按下按鈕時(shí)按鈕像右下的位移.
4. UIButtonSound當(dāng)按鈕按下時(shí)播放聲音.
當(dāng)然還有其他組件,比如UIButtonPlayAnimation 和 UIButtonMessage,你自己摸索嘍.
你也可以添加自定義事件讓它處理更多的事件.
現(xiàn)在,你應(yīng)該做成這樣的一個(gè)界面了.

七:滑塊
下面讓我們添加一個(gè)滑塊.
1.用Widget Tool,選擇Slider模板.
2.給Foreground用Button,給Background用Dark.Thumb可以也用Button.
3.選擇Panel后點(diǎn)擊Add To按鈕.
一個(gè)滑塊滾動(dòng)條就做好了.你可以選擇滑塊的游戲?qū)ο筮M(jìn)行顏色和尺寸的調(diào)整，但是經(jīng)驗(yàn)建議你不要去調(diào)整控件對(duì)象下面的子對(duì)象.
你可以嘗試再做一個(gè)垂直滑塊.

八:復(fù)選框
接下來(lái)我們來(lái)做復(fù)選框:
1.點(diǎn)擊蒙版用"X",背景用"Dark".
2.創(chuàng)建一個(gè)復(fù)選框后再選擇Panel對(duì)象創(chuàng)建一個(gè)新GameObject.
3.添加更多的復(fù)選框到這個(gè)GameObject.
4.在這些復(fù)選框上選擇Option項(xiàng).
5.運(yùn)行一下程序,點(diǎn)擊復(fù)選框.看看效果.
有關(guān)聯(lián)的復(fù)選框只需要放在同一個(gè)父游戲?qū)ο笾屑纯?

還可以附件一些其他事件處理功能,如UICheckboxControlledComponent 和 UICheckboxControlledObject.可以用來(lái)由復(fù)選框狀態(tài)來(lái)啟用禁用指定的組件或者游戲?qū)ο?
嘗試著做3個(gè)復(fù)選框來(lái)控制紅,綠,藍(lán)三個(gè)控件的顯隱.

九:輸入框
現(xiàn)在我們來(lái)創(chuàng)建一個(gè)輸入框.任何文本標(biāo)簽通過(guò)添加碰撞盒盒UIInput腳本都可以變成輸入框.不過(guò)這里我們也可以用Input模板來(lái)創(chuàng)建:

1.正如你掌握的,用Widget Tool創(chuàng)建輸入框.
2.可以用"Dark"或"Highlight"作為背景.
3.將它調(diào)試正確.
播放游戲,點(diǎn)擊輸入框就可以直接輸入文字,在iOS和Android設(shè)備上則會(huì)自動(dòng)顯示屏幕鍵盤.這個(gè)輸入框同樣也支持Unity3.4.1新增的輸入法類,讓你能輸入中文.目前唯一不支持Flash平臺(tái),因?yàn)閁nity Flash還沒(méi)增加IME輸入支持.

十:三維界面
上面的我們一直在做2D的界面,但我們也可以很容易的讓它變成3D界面.繼續(xù)跟著我做吧:
1.將Panel從Anchor的子物體中解除掉,由UI Root作為它的父對(duì)象.
2.刪除Anchor(本教程我們只做靜止的UI).
3.將攝影機(jī)改成透視投影.
4.將相機(jī)的Near改為0.1和Far改為4.0.
5.將相機(jī)往后移動(dòng)一點(diǎn),大概在(0,0,-550)的位置.
6.給Panel一點(diǎn)角度,我們這里設(shè)置旋轉(zhuǎn)為(0,345,0).
7.另外一個(gè)霸氣的東西就是添加PanWithMouse到Camera.
點(diǎn)擊Play,試著移動(dòng)鼠標(biāo).看發(fā)生了什么.如果你做的沒(méi)錯(cuò),你將會(huì)看到下面這樣的窗口.