unity3d ngui

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

ngui 怎么安裝：

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

unity3d ngui 教程：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

unity3d ngui 怎么用？

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

如果在一個已存在NGUI的項目中你要跳過第二步,并且你要選擇一個不同的UI層,你還要確保非GUI相機(jī)不渲染UI層.
在做具體UI控件之前,我們看看UI向?qū)�為我們做了什�?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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