5.1 初識NGUI

本節(jié)主要向讀者介紹NGUI的相關(guān)知識，主要包括NGUI的背景簡介、NGUI的導(dǎo)入和NGUI的菜單等。通過本節(jié)的學(xué)習(xí)，讀者將對NGUI有一個基本的認識。

5.1.1 NGUI背景概述

在Unity 3D中，可以使用代碼控制其自身所攜帶的GUI來實現(xiàn)圖形界面的搭建。但是，這些組件的搭建效率較低，而且已經(jīng)無法滿足現(xiàn)在市場對圖形用戶界面美感的要求，所以，引入了NGUI來增加所要開發(fā)的圖形用戶界面的美感。

NGUI是一個功能強大的UI系統(tǒng)，其事件處理通常由開發(fā)人員編寫C#腳本完成，并且是一個嚴格遵循KISS原則的Unity框架。該框架具有干凈、簡約的代碼，對于程序員來說，這意味著有更多的時間和精力用在開發(fā)的其他方面，更好地提高開發(fā)效率。

說明

KISS原則是英語“KeepItSimple，Stupid”的首字母縮略字，也有人稱“懶人原則”。KISS原則是指在設(shè)計當(dāng)中應(yīng)當(dāng)注重簡約的原則。

使用NGUI可以搭建出更多豐富的圖形界面，包括文本標(biāo)簽、按鈕、列表、復(fù)選框等一系列界面控件，如圖5-1和圖5-2所示。下面將對NGUI進行詳細介紹。

▲圖5-1 NGUI搭建的界面

▲圖5-2 NGUI搭建的界面

5.1.2 NGUI的導(dǎo)入

通過前面小節(jié)的學(xué)習(xí)，相信讀者對NGUI有了一個簡單的認識。本小節(jié)主要講述在Unity 3D中如何導(dǎo)入NGUI，具體步驟如下。

（1）打開Unity3D軟件，登錄到NGUI的官方網(wǎng)站http://www.tasharen.com/?page_id=140下載免費的NGUI插件。如圖 5-3所示，單擊“Free Edition of NGUI here”連接下載。

▲圖5-3 免費 NGUI下載

（2）若想下載專業(yè)版的NGUI，即可單擊“Asset Store”連接，跳轉(zhuǎn)到Unity 3D中的Asset Store界面，單擊購買按鈕進行下載，如圖5-4所示。

▲圖5-4 專業(yè) NGUI下載

提示

免費版的NGUI帶有“NGUI”的水印，適合用于個人的學(xué)習(xí)和研究所用，而且免費版的NGUI并不是經(jīng)常更新的。

（3）雙擊所下載的NGUI插件ngui_free.unitypackage，在彈出的對話框中單擊Import將NGUI導(dǎo)入到Unity中，如圖5-5所示。

提示

NGUI組件的使用需要Unity 3.5或更高的版本，本書介紹的是Unity 4.0版本，讀者可以放心使用。同時，如果導(dǎo)入失敗，讀者可以嘗試將下載的插件包放在非中文路徑下（最好不要放在桌面），然后再次導(dǎo)入。

▲圖5-5 NGUI的導(dǎo)入

（4）導(dǎo)入后，在Unity菜單欄中會出現(xiàn)NGUI菜單（如未出現(xiàn)，請刷新界面或重啟Unity），并在Project面板的Assets下出現(xiàn)NGUI文件夾，如圖5-6所示。

▲圖5-6 導(dǎo)入 NGUI后的界面

通過上面的操作，NGUI 就成功地導(dǎo)入到了Unity中，開發(fā)人員可以根據(jù)需要使用NGUI 搭建界面。需要注意的是，每一個新的Project都必須導(dǎo)入一次NGUI。

5.1.3 NGUI菜單

本小節(jié)將對NGUI菜單下的選項進行詳細講解，使讀者對NGUI菜單有一個系統(tǒng)、全面的認識，能夠在今后的開發(fā)中熟練地運用各個功能，以滿足開發(fā)的需求。

NGUI的菜單中包括Attach a Collider、Make Pixel Perfect、Create a Panel、Create a Widget、Create a New UI、Panel Tool、Camera Tool、Font Maker和Atlas Maker選項，如圖5-7所示，可以根據(jù)需要選擇不同的選項，實現(xiàn)所需要的功能。

▲圖5-7 NGUI菜單

● Attach a Collider——添加碰撞，即為物體對象添加碰撞體。

● Make Pixel Perfect——使像素完美，即增強界面像素效果。

● Create a Panel——創(chuàng)建面板，即新建一個面板。

● Create a New UI——創(chuàng)建新界面，即創(chuàng)建一個新的UI。當(dāng)單擊選項Create a new UI，就會立刻彈出一個對話框，單擊Create Your UI添加一個場景，如圖 5-8所示，然后在Hierarchy面板會出現(xiàn)UI組件，如圖5-9所示。

▲圖5-8 新建UI

● Create a Widget——創(chuàng)建控件，即創(chuàng)建一種控件。當(dāng)單擊選項Create a Widget，就會立刻彈出一個對話框，讀者可以自行添加需要的組件，如圖 5-10所示。

▲圖5-9 UI組件

▲圖5-10 新建控件

● Panel Tool——面板工具，即控制面板的設(shè)置。當(dāng)單擊Panel Tool選項，就會立刻彈出一個對話框，讀者可以在這里了解Panel的設(shè)置情況，如圖5-11所示。

● Camera Tool——攝像機工具，即控制攝像機的設(shè)置。當(dāng)單擊Camera Tool選項，就會立刻彈出一個對話框，讀者可以在這里了解Camera的設(shè)置情況，如圖5-12所示。

▲圖5-11 Panel設(shè)置

▲圖5-12 攝像機設(shè)置

● Font Maker——“字體制作”，即創(chuàng)建字體。當(dāng)單擊Font Maker選項，就會立刻彈出一個對話框，讀者可以根據(jù)開發(fā)的需要制造合適的字體，如圖5-13所示。

● Atlas Maker——“圖集制作”，即創(chuàng)建圖集。當(dāng)單擊Atlas Maker選項，就會立刻彈出一個對話框，讀者可以根據(jù)開發(fā)的需求，制造自己的圖集，如圖5-14所示。

▲圖5-13 字體制造

▲圖5-14 圖集制造

說明

NGUI菜單中選項的基本知識已經(jīng)介紹完畢，在稍后的章節(jié)中將會詳細講解以上選項的具體內(nèi)容，以及如何使用這些選項來搭建需要的圖形界面。

5.1.4 UI層簡介

前面的章節(jié)講解了NGUI菜單中各個選項的功能，本小節(jié)將對創(chuàng)建UI層，以及UI向?qū)е械膬?nèi)容進行詳細介紹。

創(chuàng)建一個新的UI向?qū)В磫螕鬘GUI→Create a new UI→Create Your UI選項，即可在Hierarchy面板中創(chuàng)建一個新的UI，如圖 5-9所示。新建的UI中包括UI Root（2D）、Camera、Anchor和Panel，接下來將為讀者介紹UI組件所包括的內(nèi)容。

● 2D的根對象（UI Root（2D））包括基本的Transform屬性及UIRoot（Script），如圖5-15所示。這個腳本會重新調(diào)整界面對象使其符合測試設(shè)備的屏幕的高度（Automatic表示自動調(diào)整， Manual Height表示手動調(diào)整）；

● Camera對象包括Transform、Camera和UICamera（Script）組件，如圖5-16所示。UICamera腳本是所有功能性 UI 的關(guān)鍵組件。其功能是向其所在攝像機渲染出來的所有碰撞體對象發(fā)送NGUI事件。

▲圖5-15 UIRoot

▲圖5-16 Camera參數(shù)

Camera參數(shù)介紹如下：

● Use Mouse——選擇攝像機是否響應(yīng)鼠標(biāo)事件；

● Use Touch——選擇攝像機是否響應(yīng)觸摸事件；

● Use Keyboard——選擇是否允許發(fā)送鍵盤事件；

● Use Controller——選擇是否允許發(fā)送游戲手柄事件；

● Event Receiver Mas Default——選擇哪一層接收NGUI事件；

● Tooltip Delay——控制鼠標(biāo)光標(biāo)在對象上停留多久發(fā)送鼠標(biāo)事件；

● Mouse Click Thresh——控制鼠標(biāo)光標(biāo)在對象上停留多少秒發(fā)生觸摸事件；

● Range Distance——選擇攝像機與對象接收消息的距離；

● Scroll Axis Name——選擇控制滾動事件中的軸。

Anchor（錨點）對象包括Transform和UIAnchor（Script）組件，如圖5-17所示。其主要影響UI的顯示位置。其參數(shù)介紹如下：

● Ui Camera——渲染對象的攝像機，一般自動選擇場景中的攝像機；

● Side——設(shè)置錨點，包括4個角，4個邊以及中心點；

● Half Pixel Offset——選擇是否讓對象在Windows系統(tǒng)上顯示時，存在半個像素的偏移；

● Depth Offset——用于透視攝像機，調(diào)整UIAnchor計算的位置深度；

● Relative Offset——相對偏移量，即物體以屏幕半分比為單位的偏移量。

Panel對象包括Transform和UIPanel（Script）組件，如圖5-18所示。UIPanel是一個容器，包含了所有UI小控件，負責(zé)創(chuàng)建實際的界面集合圖形，并且可以將UI渲染拆分到不同的Draw Call中。其參數(shù)介紹如下：

● Panel Tool——選擇當(dāng)前Panel是否會顯示在Panel Tool（見圖 5-11）中。動態(tài)創(chuàng)建的臨時Panel可以不勾選此選項；

● Normals——選擇UI中圖形是否會受到法線和切線的影響；

● Depth Pass——選擇添加一個額外的Draw Call。勾選此選項后，不透明空間后的物體都不會渲染，因此節(jié)省了部分填充率；

● Static——檢測UI中控件是否移動；

● Widgets——顯示當(dāng)前Panel一共渲染了多少個控件，若為0，則表示此Panel無用，可以刪除；

● Draw Calls——顯示當(dāng)前Panel消耗的Draw Call個數(shù)，數(shù)值越低，效率越高；

● Debug Info——選擇調(diào)試信息的顯示方式；

● Clipping——選擇裁剪功能，使用Shader來實現(xiàn)，NGUI會嘗試自動獲取一個裁剪版本的Shader并更新材質(zhì)，默認選擇None。

▲圖5-17 UIAnchor

▲圖5-18 UIPanel

NGUI的UI層的基本知識到這里介紹完畢，接下來將詳細介紹NGUI中各個重要控件的具體使用，這是基于NGUI進行界面開發(fā)必知必會的部分。