1. 前言

2 NGUI下載和導(dǎo)入

資源商店搜索

學(xué)習(xí)版自行搜索


導(dǎo)入即可
創(chuàng)建UI

3. NGUI三大組件

創(chuàng)建NGUI后，掛載在UI Root 和其 子Camera的腳本

3.1 Root組件

分辨率自適應(yīng)模式的基礎(chǔ)

3.1.1 分辨率概念

3.1.2 Root的作用

3.1.3 root腳本各組件

Minimun Height 和 Maximum Height
用于拖動窗口時，如果窗口變得很小了，UI不縮放的話，會擋住游戲，使用Flexible模式用于解決該問題，會在小于或著大于這兩個值的時候，進(jìn)行等比縮放

Shrink Portrait UI 豎屏?xí)r按寬度來適配

Adjust by DPI 勾選就是

Content Width 和 Content Height 是自適應(yīng)屏幕時默認(rèn)的分辨率
不勾選Fit 時 會裁剪，不會有黑邊，始終會有UI填充屏幕
勾選Height 畫布總是跟著屏幕高度縮放 （橫屏游戲
勾選Width 畫布總是跟著屏幕寬度縮放 （豎屏游戲

3.1.4 總結(jié)

3.2 Panel 組件

3.2.1 Panel的作用

管理渲染相關(guān)內(nèi)容

3.2.2 Panel的控件

Depth 控制層級，層級越高的遮擋層級低的。要注意不同Panel最好不要在一個層級
Clipping 通過參數(shù)裁剪

排序?qū)又笤僦v

3.2.3 總結(jié)

3.3 EventSystem組件

3.3.1 作用

3.3.2 組件

UI模式是根據(jù)組件深度處理事件
World模式 根據(jù)距離著攝像機(jī)的遠(yuǎn)近來響應(yīng)排序（這兩個的主要區(qū)別在 眼睛看到在前面的，進(jìn)行交互時UI模式點(diǎn)擊看起來在被前面的窗口壓在后面的，但被壓在的那一層層級更高，會先相應(yīng)被壓在下面的UI）

EventMask 決定哪個層級接受事件

Debug就是測試時，你點(diǎn)擊這個UI，會打印出來交互的時什么對象

3.3.3 總結(jié)

4 圖集制作

4.1 圖集的作用

4.2 打開圖集制作工具

4.3 新建圖集

點(diǎn)擊New 新建

選擇 加入圖集的文件

創(chuàng)建圖集，一般存放在Resources文件夾內(nèi)，方便讀取

有三個文件
1.圖集文件
2.圖集材質(zhì)
3.圖集圖片

5 三大基礎(chǔ)控件

公共內(nèi)容

5.1 Sprite 精靈圖片

5.1.1 創(chuàng)建Sprite

方式1

方式2

5.1.2 Sprite 控件

Atlas 選擇圖集
Sprite選擇圖集中的圖片
Fiexed Aspect保持寬高比

sliced模式
點(diǎn)擊Edit

拉伸Border，會根據(jù)九宮格進(jìn)行拉伸。保證四個角不變化，只會拉伸中間的十字區(qū)域

Tiled 平鋪模式
圖片會重復(fù)繪制

Filled 填充模式
填充模式用于制作進(jìn)度條、血條

5.1.3 在代碼中的Sprite

5.2 Label文本控件

5.2.1 創(chuàng)建Label

NGUI - create - Lable

5.2.2 Label控件

shrink Content

Calmp Content

Resize freely

給Lable增加碰撞器，然后點(diǎn)擊超鏈接可以轉(zhuǎn)到超鏈接的網(wǎng)之

5.2.3 代碼控制

5.3 Texture 大圖控件

6 組合控件

6.1 Button組件

6.1.1 添加Sprite組件

6.1.2 添加Button腳本

6.1.3 添加碰撞器

6.1.4 組合

6.1.5 button組件參數(shù)

Transition 過渡時間 從某一個顏色編導(dǎo)另外一個顏色所需要的時間
Sprite 可以設(shè)置各個狀態(tài)時的效果

6.1.6 監(jiān)聽點(diǎn)擊事件

把Panel（掛載腳本的組件）拖入到button 的on click中

然后在Method選擇 需要使用的函數(shù)


點(diǎn)擊后

如果方法是私有，會找不到
同時可以添加多個監(jiān)聽函數(shù)

使用代碼獲得按鈕對象監(jiān)聽

拖入


使用拉姆達(dá)表達(dá)式

6.1.7 總結(jié)

6.2 Toggle單選多選框

6.2.1 創(chuàng)建toggle

增加腳本和碰撞器

6.2.2 toggle控件

關(guān)聯(lián)選中時的圖片

加入Sprite后
未選中

選中

Starting state 一開始的選中狀態(tài)
Invert State 反轉(zhuǎn)狀態(tài)

Group 多選框分組

如果只能選擇一個
可以設(shè)置為同一個Group

State of None是這個Group必須要選中一個

6.2.3 監(jiān)聽事件

創(chuàng)建一個Panel用于掛載腳本
然后再Toggle上拖入函數(shù)

如何知道哪一個Toggle選中，可以在Panel的腳本中設(shè)聲明三個Sprite變量關(guān)聯(lián)

然后給所有的Toggle關(guān)聯(lián)Panel

分別選中

代碼監(jiān)聽

6.3 Input文本輸入

6.3.1 Input文本創(chuàng)建

6.3.2 Input組件

拖入Label

Input type

6.3.3 監(jiān)聽事件的兩種方式

Panel裝載腳本，關(guān)聯(lián)Input的Sprite

input腳本里關(guān)聯(lián)Panel的函數(shù)

測試的時候把回車改成提交

6.4 PopupList 下拉列表組件

如此類似的

6.4.1 制作PopupList

6.4.2 組件相關(guān)

選項(xiàng) 空一行一個組件

如果設(shè)置了之后沒有反應(yīng)，首先設(shè)置一下字體

出現(xiàn)了三個，很奇怪后面的參數(shù)可以設(shè)置

6.4.3 選擇相關(guān)

選擇這個腳本

6.4.4 監(jiān)聽事件

和之前一樣的套路Panel掛載腳本，popupList關(guān)聯(lián)事件




新加選項(xiàng)

6.5 Slider滑動條控件

6.5.1 創(chuàng)建

NGUI的Slider是添加到背景的這個Sprite上
但是碰撞器 添加到 背景的Sprite上，用戶按和拖動滑塊都能進(jìn)行移動，如果碰撞器 添加到 滑塊的Sprite 上，用戶只能通過拖動滑塊進(jìn)行移動

6.5.2 參數(shù)

steps 會等分成十份

6.5.3 監(jiān)聽函數(shù)

和其他控件一樣，就一筆帶過了

6.6 ScrollBar 滾動條 和 ProgressBar進(jìn)度條

6.6.1 制作ScrollBar 滾動條

6.6.2 制作 ProgressBar進(jìn)度條

6.7 ScrollView 滾動視圖

6.7.1 制作ScrollView

子對象添加Drag Scorll View和碰撞器

6.7.2 ScrollView組件

Panel主要用于設(shè)置范圍

改變可視范圍

MoveMent 水平移動或者豎直移動
設(shè)置只能水平或者垂直 或者自由（左右都行
拖動

Drag Effect 類似于慣性 和 彈性 的效果

ScrollWheel Factor 滾動因子 滾動速度和方向

Momentum Amount動量 設(shè)置慣性大小
Sppring Strength 彈力大小
Dampen Strength 阻尼強(qiáng)度
Cancel Drag if fits 如果 內(nèi)容沒有超過 可視范圍，決定此時能不能拖動

滾動條相關(guān)

自行設(shè)置，只要關(guān)聯(lián)了，就會自動設(shè)置拖動條，運(yùn)行前會自己計算

6.7.3 自動對齊腳本Grid

為 ScrollView添加Grid腳本 自動對齊

手動排序

通過代碼移除物品 更新滾動條

6.8 Anchor 錨點(diǎn)組件

6.8.1 老版本中（了解）

create 一個Anchor

6.8.2 新版本基礎(chǔ)控件自帶錨點(diǎn)信息

各大小是屏幕的

如果希望始終處于屏幕左上角

右上角

右中

7 NGUI進(jìn)階

NGUI提供了一些自帶的函數(shù)，在掛載腳本時，NGUI會自動尋找這些方法。


創(chuàng)建一個只有碰撞器的Sprite

拖入這個腳本
按下時

其他函數(shù)同理

7.1 EventListener

首先掛載兩個Sprite對象

為Sprite添加EventListenner 以及為委托添加函數(shù)

也可以自己添加函數(shù)

7.2 EventTrigger

添加

7.3 DrawCall

7.3.1 如何降低DrawCall

同一個圖集 如果在這兩個同圖集的圖 中間的層級加入了其他圖集，也會產(chǎn)生DrawCall，打斷了合并渲染
要效率 還是要內(nèi)存 可以自己決定

7.4 NGUI字體

7.4.1 制作NGUI字體

降低DrawCall

把文字導(dǎo)成圖集

圖集中多了

可以在Lebel中選擇該圖集

然后選擇MyFont
優(yōu)點(diǎn)在于減少DrawCall缺點(diǎn)在于不能動態(tài)改變文字

7.4.2 通過bmfont64 制作

可以導(dǎo)入TXT，記得改成帶有BOM 的UTF-8

然后導(dǎo)入 + 生成
在NGUI中導(dǎo)入

在外部 可以 自定義美術(shù)字體
通過字體編號
這里48 是 0，然后替換這個字體

7.4.3 選擇Unity字體和NGUI字體

7.5 NGUI 緩動

### 7.5.1 使用緩動

7.5.2 緩動參數(shù)

有點(diǎn)像手游里一直膨脹縮小的圖標(biāo)

TweenGroup用于多個動畫分組

Ignore TimeScale 用于在游戲暫停時依然播放特效

7.5.3 輸入事件和緩動關(guān)聯(lián)PlayTween

添加Play Tween參數(shù)


勾選 start State時value默認(rèn)為0，意思是一開始的時候不會自動播放特效
PlayTween 和Tweener上的Group如果不相同，則不會管理這個Tweener

Trigger 觸發(fā)的方式

記得加觸發(fā)器

添加兩個PlayTween

一各按壓時管理縮放小，一個松開時管理放大
把兩個PlayTween改為taggle

7.6 NGUI中顯示3D模型和粒子特效

7.6.1 用UI攝像機(jī)渲染

更改為UI層

拖入3D模型
調(diào)整縮放和UI控件Z軸的距離

7.6.2 用Render Texture渲染

設(shè)置主攝像機(jī)不渲染我們要展示的模型

設(shè)置要渲染模型的攝像機(jī)渲染

設(shè)置UI 攝像機(jī)渲染UI層

在Panel中創(chuàng)建一張大圖，拖入攝像機(jī)

tank托上去

7.6.3 顯示粒子特效

在粒子特效中找到設(shè)置層級

7.7 NGUI 音效

選擇觸發(fā)什么音效時播放

7.8 按鍵綁定

添加KeyBinding腳本

7.9 PC端 tab鍵快速切換選中

如果要打到tab切換，要所有的Sprite都添加這個腳本
然后記得添加碰撞器

7.10 本地化

掛載LanguageSelection后

文章來源地址http://www.zghlxwxcb.cn/news/detail-840962.html

到了這里，關(guān)于Unity3D學(xué)習(xí)之UI系統(tǒng)——NGUI的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！