一、NGUI 介紹
1.NGUI 插件安裝
首先創(chuàng)建一個(gè)新的 Unity 工程項(xiàng)目，導(dǎo)入 NGUI 插件資源包。
導(dǎo)入 NGUI 后，Unity 的菜單欄會(huì)出現(xiàn)一個(gè)“NGUI”菜單，這個(gè)菜單包含了
NGUI 所有的操作功能。
2.NGUI 插件目錄結(jié)構(gòu)
Editor：編輯器擴(kuò)展
Examples：示例工程
Resources：資源文件
Scripts：腳本組件
[Unity 是基于組件形式的引擎，任何功能都是一個(gè)獨(dú)立的組件；
組件其實(shí)就是一個(gè)類，一個(gè)對(duì)象，一個(gè)腳本文件；
NGUI 中所有的 UI 也都是通過(guò)組件的形式體現(xiàn)的。]
二、NGUI 基本使用方法
1.NGUI Bug 修復(fù)
Bug 出現(xiàn)的環(huán)境：Unity5.4.1 + NGUI3.10.0
Bug 信息：Ignoring menu item NGUI because it is in no submenu!
修復(fù)步驟：
①找到并打開(kāi) NGUI 插件中的“NGUIMenu.cs”腳本文件；
②將 715,716 兩行代碼注釋或者刪掉;
③保存修改后的腳本，并重啟 Unity 開(kāi)發(fā)環(huán)境。
2.使用 NGUI 顯示文字
1.簡(jiǎn)單思考
之前我們想顯示一個(gè)簡(jiǎn)單的 3D 模型，我們可以創(chuàng)建一個(gè) Cube 物體。
那么我們想顯示文字，那么需要?jiǎng)?chuàng)建什么哪？而且我們使用的是 NGUI？
和文字沾邊的單詞有 Text 和 Lable。
操作步驟：
NGUI-->Create-->Label 創(chuàng)建一個(gè)用于顯示文字的“游戲物體”。
切換到 Game 面板，我們就可以看到“New Label”。
2.NGUI 層次結(jié)構(gòu)
UI Root（所有的 NGUI 元素都是這個(gè)的子物體）
|---Camera（用于渲染 NGUI 的攝像機(jī)）
|---Lable（Lable 游戲物體）
|---More UI（更多的 UI 游戲物體）
3.NGUI 操作細(xì)節(jié)
①在 Scene 視圖“紫色”的矩形，就是我們 NGUI 的操作范圍，其實(shí)也就是
UI Root 的范圍（鼠標(biāo)選中 UI Root，這個(gè)矩形區(qū)域會(huì)高亮顯示）。
②我們可以點(diǎn)擊 Scene 視圖上方的“2D”按鈕，切換到 2D 編輯模式。
③在 2D 模式下，鼠標(biāo)選中 UI Root，紫色矩形也會(huì)高亮，現(xiàn)在將鼠標(biāo)放到矩
形上，點(diǎn)擊鼠標(biāo)右鍵，會(huì)出現(xiàn) NGUI 的操作菜單，這個(gè)菜單我們后期會(huì)大量且
頻繁的使用。
④攝像機(jī)的圖標(biāo)會(huì)影響到我們的操作，可以將這個(gè)圖標(biāo)調(diào)小。
點(diǎn)擊 Scene 面板右上角 Gizmos，3D Icons 選項(xiàng)，調(diào)小即可。
3.Prefab Toolbar
1.打開(kāi) Prefab Toolbar
NGUI-->Open-->Prefab Toolbar
2.Prefab Toolbar 簡(jiǎn)介
Prefab Toolbar ：(NGUI)預(yù)制體工具欄，其實(shí)就是 NGUI 提供的一些現(xiàn)成
的 UI 功能元素的預(yù)制體文件，我們可以直接鼠標(biāo)單擊選中，然后往 Scene 面板拖拽。
三、基本組件之 UILabel 面板控制
1.字體文件
1.字體圖集
將所用到的文字處理成一張圖片進(jìn)行使用，這種比較適合英語(yǔ)國(guó)家。
2.TTF 字體
直接使用 TTF 格式的字體進(jìn)行文字顯示。
2.UILabel 面板屬性
1.Font Size（字體大?。?/p>
控制文字顯示的大小，以及基本樣式[正常，粗體，傾斜，粗體+傾斜]
2.Text（文字）
UILable 要顯示的文字，可以輸入多行
3.Modifier（調(diào)節(jié)器）
控制英文顯示狀態(tài)，正常狀態(tài)，大寫(xiě)狀態(tài)，小寫(xiě)狀態(tài)
4.Overflow（溢出）
當(dāng)文字大小超出了 Widget 中 Size 屬性的大小時(shí)，如何處理顯示。
ShrinkContent：收縮內(nèi)容 [再大也無(wú)效]
ClampContent：夾持內(nèi)容 [能顯示幾個(gè)字就顯示幾個(gè)字]
Use Ellipsis：是否使用省略符
ResizeFreely：調(diào)整自由 [Widget 中的 Size 自動(dòng)同步 Font Size]
ResizeHeight：調(diào)整高度 [寬度固定，高度自動(dòng)調(diào)整]
5.Alignment（對(duì)齊方式）
設(shè)置文字的對(duì)齊方式
6.Gradient（漸變顏色）
設(shè)置文字從上到下的顏色漸變
7.Effect（特效）
設(shè)置文字特效，比如：顏色描邊，投影
8.Spacing（間距）
設(shè)置文字與文字之間的間距大小
9.Color Tint（色彩化）
設(shè)置文字顯示的顏色
四、基本組件之 UILabel 代碼控制
1.文字展示案例
1.元寶與錢(qián)幣數(shù)顯示
重點(diǎn)設(shè)置 UILabel 的中心點(diǎn)，以及 Overflow 樣式。
中心點(diǎn)水平軸向?yàn)樽髠?cè)或者右側(cè)；
Overflow 一般設(shè)置為 ResizeFreely。
2.物品描述信息
文字在一個(gè)固定區(qū)域內(nèi)顯示。
重點(diǎn)設(shè)置 UILabel 的中心點(diǎn)，以及對(duì)齊方式還有 Overflow 樣式。
中心點(diǎn)設(shè)置為垂直軸向的頂部；
對(duì)齊方式為左對(duì)齊；
Overflow 為 ResizeHeight。
2.代碼控制 UILabel
1.代碼控制金幣數(shù)
代碼查找到對(duì)應(yīng)的游戲?qū)ο?，修改游戲?qū)ο笊砩系?UILabel 組件的 Text 屬性。
2.代碼控制物品描述
方法步驟同上
NGUI 代碼中換行“\n”
五、NGUI 圖片管理工具 AtlasMaker
1.AtlasMaker 制作圖集
1.什么是 Atlas？
Atlas：圖集，圖片的一個(gè)集合，或者說(shuō)打包格式。NGUI 中的 UISprite 組件
顯示圖片，需要用到圖集，就和 UILabel 顯示需要用到字體是一樣的道理。
2.什么是 AtlasMaker？
AtlasMaker：圖集制作器，NGUI 提供的打包 Atlas 的工具。
3.AtlasMaker 制作圖集步驟
①打開(kāi) AtlasMaker 工具，點(diǎn)擊“new”按鈕；
②將需要打包成 Atlas 的圖片選中；
②點(diǎn)擊“Create”按鈕，給新圖集命名保存。
4.Atlas 結(jié)構(gòu)分析
每一個(gè) Atlas 都是由三個(gè)文件組成：
xxx.png：貼圖文件，小圖片拼接成的一張大圖片
xxx.mat：材質(zhì)球文件，使用 xxx.png 為素材制作的材質(zhì)球
xxx.prefab：圖集文件，使用 xxx.mat 為素材制作的圖集文件
依賴關(guān)系：png-->mat-->prefab
2.圖集常用修改操作
1.往圖集中增加新圖片
①打開(kāi) AtlasMarker，選中需要修改的圖集；
②選中需要增加的圖片，然后點(diǎn)擊“Add/Update”按鈕。
2.從圖集中刪除圖片
①打開(kāi) AtlasMarker，選中需要修改的圖集；
②點(diǎn)擊圖集中圖片后面的“X”按鈕，然后 Delete。
六、基本組件之 UISprite 面板控制
1.UISprite 顯示圖片
①創(chuàng)建 UISprite 組件，步驟：NGUI-->Create-->Sprite；
②選擇圖集，選擇要顯示的圖片；
③Widget 中點(diǎn)擊“Snap”按鈕，讓圖片原始大小顯示；
④Widget 中“Aspect”選中“Based On Width”，便于等比例調(diào)整圖片
的大小。
2.UISprite 面板屬性
1.Type（類型/模式）
Simple：簡(jiǎn)單模式 默認(rèn)展示效果
Sliced：九宮模式 適合于按鈕背景圖處理 [演示九宮處理]
Tiled：平鋪模式 使用該圖片平鋪 Widget 中 Size 的區(qū)域
Flip：進(jìn)度模式 最復(fù)雜的一種圖片模式
|---Fill Dir 填充方向
|---Fill Amount 填充量
|---Invert Fill 翻轉(zhuǎn)填充
七、基本組件之 UISprite 代碼控制
1.圖片案例展示
1.金幣元寶界面制作
導(dǎo)入相關(guān)的素材圖片，更新圖集，使用 UISprite 和 UILabel 制作界面。
2.代碼控制 UISprite
1.動(dòng)態(tài)創(chuàng)建 UISprite
分析手動(dòng)添加 UISprite 時(shí)的步驟，然后使用代碼還原整個(gè)步驟。
2.動(dòng)態(tài)控制 UISprite 的屬性
獲取到當(dāng)前的 UISprite 對(duì)象，以“.”的形式調(diào)出屬性進(jìn)行賦值，屬性的名稱
和 Inspecctor 面板上組件屬性名基本保持一致。
八、基本組件之 UIButton 面板控制
1.UIButton 制作按鈕
1.基礎(chǔ)說(shuō)明
在 UI 界面制作過(guò)程中，UILabel 用于顯示文字，UISprite 用于顯示圖片，無(wú)
論多復(fù)雜的 UI 界面，都是由最基礎(chǔ)的文字+圖片的形式展示（制作）的。
UI 界面的主要功能有兩個(gè)：1>展示數(shù)據(jù)；2>人機(jī)交互。
而最核心的交互就是點(diǎn)擊，使用鼠標(biāo)或者手指點(diǎn)擊 UI，而能接收點(diǎn)擊的 UI 組件
叫做 UIButton。我們可以在 UILable 和 UISprite 的基礎(chǔ)上附加 UIButton
組件制作出我們的 UI 按鈕。
2.按鈕制作步驟
①首先展現(xiàn)一張圖片或者一段文字；
②Attach-->BoxCollider，確定可以點(diǎn)擊的區(qū)域，其實(shí)點(diǎn)擊按鈕就是這個(gè)這
個(gè) Collider 區(qū)域進(jìn)行交互的；
③Attach-->ButtonScript，附加按鈕組件，按鈕制作到此完成。
2.UIButton 面板屬性
1.Colors 數(shù)組
使用顏色來(lái)描述按鈕的四種狀態(tài)。
如果不想讓顏色影響圖片的效果，可以將四種顏色全部選擇為白色。
2.Sprites 數(shù)組
組使用圖片來(lái)描述按鈕的四種狀態(tài)。
3.按鈕四種狀態(tài)
①Normal(*)：默認(rèn)原始狀態(tài); ②Hover：經(jīng)過(guò)停留狀態(tài);
③Pressed(*)：按下?tīng)顟B(tài); ④Disabled：不可用狀態(tài)；
九、基本組件之 UIButton 代碼控制
1.按鈕點(diǎn)擊事件綁定
1.面板屬性欄綁定
①創(chuàng)建一個(gè)代碼文件，定義一個(gè)公開(kāi)的方法，掛載到一個(gè)游戲物體上；
②將該腳本拖拽到 UIButton 的 OnClick 事件上（注意看我的操作演示）。
2.代碼綁定
①創(chuàng)建一個(gè)代碼文件，掛載到按鈕游戲物體上；
②定義一個(gè)叫做 OnClick（）的方法。
2.按鈕交互聲音
1.UIPlaySound 組件
當(dāng)我們和按鈕進(jìn)行交互（比如：點(diǎn)擊）的時(shí)候，可以播放一個(gè)點(diǎn)擊聲音，起到一
個(gè)輔助反饋的作用。
2.操作步驟
①Attach-->Play Sound Script 添加組件；
②Audio Clip 指定一個(gè)聲音文件；
③指定 Trigger 觸發(fā)該聲音播放的事件，常用的是 OnClick。
十、UI 動(dòng)態(tài)加載
1.原理介紹
在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，UI 界面制作好以后會(huì)拖拽成為一個(gè) Prefab 資源，和
Scene 場(chǎng)景分離，在實(shí)際加載到該場(chǎng)景的時(shí)候，動(dòng)態(tài)的加載顯示 UI 界面。
這樣可以使得 UI 和 Scene 進(jìn)行分離，好處是很大的，分離后我就可以讓不同
的人編輯制作不同的部分，否則的話，UI 和 Scene 在一起，多人編輯的時(shí)候，
項(xiàng)目是沒(méi)法合并（SVN，Git）的。
2.操作演示
①將制作好的 UI 面板拖拽成為一個(gè) Prefab 資源，放到 Resources 文件夾下；
②使用 Resources.Load()將該資源加載到內(nèi)存中；
③實(shí)例化該 UI 資源對(duì)象，放到 UIRoot 下完成顯示；
3.相關(guān) API
NGUITools.AddChild(父對(duì)象, 子對(duì)象); NGUI 提供的一個(gè)實(shí)例化物體，設(shè)置子物體的一個(gè)內(nèi)置函數(shù)，操作 UI 盡量使用
該 NGUI 封裝的函數(shù)。
關(guān)鍵代碼
CreateUISprite
using UnityEngine;
using System.Collections;
/// <summary>
/// 使用代碼控制UISprite 組件
/// </summary>
public class CreateUISprite : MonoBehaviour {
private Transform m_Transform;
void Start () {
//獲取游戲物體的transform物體組件
m_Transform=gameObject.GetComponent<Transform>();
//實(shí)例化對(duì)象
GameObject uiSprite = new GameObject("TonyWan");
//設(shè)置父物體；
uiSprite.GetComponent<Transform>().SetParent ( m_Transform);
//重置Scale；
uiSprite.GetComponent<Transform>().localScale = Vector3.one;
//動(dòng)態(tài)添加圖集
UISprite sprite=uiSprite.AddComponent<UISprite>();
//讀取圖集 資源加載
UIAtlas atlas=Resources.Load<UIAtlas>("GameAtlas");//參數(shù)1：表示自定義的圖集名稱；
//給組件指定圖集
sprite.atlas=atlas;
//給組件指定圖片
sprite.spriteName="11000782";
}
MyButton
public class MyButton : MonoBehaviour {
//第一種點(diǎn)擊事件方法
//定義一個(gè)公開(kāi)button點(diǎn)擊事件
public void ButtonClick() {
Debug.Log("我是Button按鈕被點(diǎn)擊了");
}
//第二種點(diǎn)擊事件方法
//代碼綁定點(diǎn)擊事件 OnCLick內(nèi)置點(diǎn)擊事件 寫(xiě)這個(gè)就會(huì)點(diǎn)擊
public void OnClick(){
Debug.Log("我是代碼綁定點(diǎn)擊事件");
}
}
UILabelTest
public class UILabelTest : MonoBehaviour {
//聲明一個(gè)持有引用
private UILabel goldNumber;
private UILabel item_Label;
void Start()
{
//查找值物體
goldNumber = GameObject.Find("goldNumber").GetComponent<UILabel>();
//對(duì)文本進(jìn)行賦值
goldNumber.text = "123456789";
//對(duì)字體顏色改變
goldNumber.color = Color.green;
}
void Update () {
//按下空格鍵 進(jìn)行描述切換
if (Input.GetKeyDown(KeyCode.Space))
{
item_Label=GameObject.Find("item_Label").GetComponent<UILabel>();
item_Label.text = "TonyWanTonyWanTonyWanTonyWanTonyWan\n我要換行了！TonyWanTonyWanTonyWanTonyWanTonyWanTonyWanTonyWan";
}
}
}
UIManager
public class UIManager : MonoBehaviour
{
//聲明一個(gè)持有引用，用來(lái)存貯加載后的預(yù)制體
private GameObject prefab_Info;
void Start () {
//存貯預(yù)制體
prefab_Info=Resources.Load<GameObject>("Info");//泛型 GameObject 參數(shù)1：預(yù)制體的名稱
//NGUI自帶API 把預(yù)制體加載到場(chǎng)景中去 有重載
NGUITools.AddChild(gameObject, prefab_Info);//參數(shù)1：父物體 參數(shù)2：子物體
}
}
