一、NGUI 介紹

1.NGUI 插件安裝

首先創(chuàng)建一個新的 Unity 工程項目，導(dǎo)入 NGUI 插件資源包。

導(dǎo)入 NGUI 后，Unity 的菜單欄會出現(xiàn)一個“NGUI”菜單，這個菜單包含了

NGUI 所有的操作功能。

2.NGUI 插件目錄結(jié)構(gòu)

Editor：編輯器擴展

Examples：示例工程

Resources：資源文件

Scripts：腳本組件

[Unity 是基于組件形式的引擎，任何功能都是一個獨立的組件；

組件其實就是一個類，一個對象，一個腳本文件；

NGUI 中所有的 UI 也都是通過組件的形式體現(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ù)步驟：

①找到并打開 NGUI 插件中的“NGUIMenu.cs”腳本文件；

②將 715,716 兩行代碼注釋或者刪掉;

③保存修改后的腳本，并重啟 Unity 開發(fā)環(huán)境。

2.使用 NGUI 顯示文字

1.簡單思考

之前我們想顯示一個簡單的 3D 模型，我們可以創(chuàng)建一個 Cube 物體。

那么我們想顯示文字，那么需要創(chuàng)建什么哪？而且我們使用的是 NGUI？

和文字沾邊的單詞有 Text 和 Lable。

操作步驟：

NGUI-->Create-->Label 創(chuàng)建一個用于顯示文字的“游戲物體”。

切換到 Game 面板，我們就可以看到“New Label”。

2.NGUI 層次結(jié)構(gòu)

UI Root（所有的 NGUI 元素都是這個的子物體）

|---Camera（用于渲染 NGUI 的攝像機）

|---Lable（Lable 游戲物體）

|---More UI（更多的 UI 游戲物體）

3.NGUI 操作細節(jié)

①在 Scene 視圖“紫色”的矩形，就是我們 NGUI 的操作范圍，其實也就是

UI Root 的范圍（鼠標(biāo)選中 UI Root，這個矩形區(qū)域會高亮顯示）。

②我們可以點擊 Scene 視圖上方的“2D”按鈕，切換到 2D 編輯模式。

③在 2D 模式下，鼠標(biāo)選中 UI Root，紫色矩形也會高亮，現(xiàn)在將鼠標(biāo)放到矩

形上，點擊鼠標(biāo)右鍵，會出現(xiàn) NGUI 的操作菜單，這個菜單我們后期會大量且

頻繁的使用。

④攝像機的圖標(biāo)會影響到我們的操作，可以將這個圖標(biāo)調(diào)小。

點擊 Scene 面板右上角 Gizmos，3D Icons 選項，調(diào)小即可。

3.Prefab Toolbar

1.打開 Prefab Toolbar

NGUI-->Open-->Prefab Toolbar

2.Prefab Toolbar 簡介

Prefab Toolbar ：(NGUI)預(yù)制體工具欄，其實就是 NGUI 提供的一些現(xiàn)成

的 UI 功能元素的預(yù)制體文件，我們可以直接鼠標(biāo)單擊選中，然后往 Scene 面板拖拽。

三、基本組件之 UILabel 面板控制

1.字體文件

1.字體圖集

將所用到的文字處理成一張圖片進行使用，這種比較適合英語國家。

2.TTF 字體

直接使用 TTF 格式的字體進行文字顯示。

2.UILabel 面板屬性

1.Font Size（字體大?。?/p>

控制文字顯示的大小，以及基本樣式[正常，粗體，傾斜，粗體+傾斜]

2.Text（文字）

UILable 要顯示的文字，可以輸入多行

3.Modifier（調(diào)節(jié)器）

控制英文顯示狀態(tài)，正常狀態(tài)，大寫狀態(tài)，小寫狀態(tài)

4.Overflow（溢出）

當(dāng)文字大小超出了 Widget 中 Size 屬性的大小時，如何處理顯示。

ShrinkContent：收縮內(nèi)容 [再大也無效]

ClampContent：夾持內(nèi)容 [能顯示幾個字就顯示幾個字]

Use Ellipsis：是否使用省略符

ResizeFreely：調(diào)整自由 [Widget 中的 Size 自動同步 Font Size]

ResizeHeight：調(diào)整高度 [寬度固定，高度自動調(diào)整]

5.Alignment（對齊方式）

設(shè)置文字的對齊方式

6.Gradient（漸變顏色）

設(shè)置文字從上到下的顏色漸變

7.Effect（特效）

設(shè)置文字特效，比如：顏色描邊，投影

8.Spacing（間距）

設(shè)置文字與文字之間的間距大小

9.Color Tint（色彩化）

設(shè)置文字顯示的顏色

四、基本組件之 UILabel 代碼控制

1.文字展示案例

1.元寶與錢幣數(shù)顯示

重點設(shè)置 UILabel 的中心點，以及 Overflow 樣式。

中心點水平軸向為左側(cè)或者右側(cè)；

Overflow 一般設(shè)置為 ResizeFreely。

2.物品描述信息

文字在一個固定區(qū)域內(nèi)顯示。

重點設(shè)置 UILabel 的中心點，以及對齊方式還有 Overflow 樣式。

中心點設(shè)置為垂直軸向的頂部；

對齊方式為左對齊；

Overflow 為 ResizeHeight。

2.代碼控制 UILabel

1.代碼控制金幣數(shù)

代碼查找到對應(yīng)的游戲?qū)ο?，修改游戲?qū)ο笊砩系?UILabel 組件的 Text 屬性。

2.代碼控制物品描述

方法步驟同上

NGUI 代碼中換行“\n”

五、NGUI 圖片管理工具 AtlasMaker

1.AtlasMaker 制作圖集

1.什么是 Atlas？

Atlas：圖集，圖片的一個集合，或者說打包格式。NGUI 中的 UISprite 組件

顯示圖片，需要用到圖集，就和 UILabel 顯示需要用到字體是一樣的道理。

2.什么是 AtlasMaker？

AtlasMaker：圖集制作器，NGUI 提供的打包 Atlas 的工具。

3.AtlasMaker 制作圖集步驟

①打開 AtlasMaker 工具，點擊“new”按鈕；

②將需要打包成 Atlas 的圖片選中；

②點擊“Create”按鈕，給新圖集命名保存。

4.Atlas 結(jié)構(gòu)分析

每一個 Atlas 都是由三個文件組成：

xxx.png：貼圖文件，小圖片拼接成的一張大圖片

xxx.mat：材質(zhì)球文件，使用 xxx.png 為素材制作的材質(zhì)球

xxx.prefab：圖集文件，使用 xxx.mat 為素材制作的圖集文件

依賴關(guān)系：png-->mat-->prefab

2.圖集常用修改操作

1.往圖集中增加新圖片

①打開 AtlasMarker，選中需要修改的圖集；

②選中需要增加的圖片，然后點擊“Add/Update”按鈕。

2.從圖集中刪除圖片

①打開 AtlasMarker，選中需要修改的圖集；

②點擊圖集中圖片后面的“X”按鈕，然后 Delete。

六、基本組件之 UISprite 面板控制

1.UISprite 顯示圖片

①創(chuàng)建 UISprite 組件，步驟：NGUI-->Create-->Sprite；

②選擇圖集，選擇要顯示的圖片；

③Widget 中點擊“Snap”按鈕，讓圖片原始大小顯示；

④Widget 中“Aspect”選中“Based On Width”，便于等比例調(diào)整圖片

的大小。

2.UISprite 面板屬性

1.Type（類型/模式）

Simple：簡單模式 默認展示效果

Sliced：九宮模式 適合于按鈕背景圖處理 [演示九宮處理]

Tiled：平鋪模式 使用該圖片平鋪 Widget 中 Size 的區(qū)域

Flip：進度模式 最復(fù)雜的一種圖片模式

|---Fill Dir 填充方向

|---Fill Amount 填充量

|---Invert Fill 翻轉(zhuǎn)填充

七、基本組件之 UISprite 代碼控制

1.圖片案例展示

1.金幣元寶界面制作

導(dǎo)入相關(guān)的素材圖片，更新圖集，使用 UISprite 和 UILabel 制作界面。
2.代碼控制 UISprite

1.動態(tài)創(chuàng)建 UISprite

分析手動添加 UISprite 時的步驟，然后使用代碼還原整個步驟。

2.動態(tài)控制 UISprite 的屬性

獲取到當(dāng)前的 UISprite 對象，以“.”的形式調(diào)出屬性進行賦值，屬性的名稱

和 Inspecctor 面板上組件屬性名基本保持一致。

八、基本組件之 UIButton 面板控制

1.UIButton 制作按鈕

1.基礎(chǔ)說明

在 UI 界面制作過程中，UILabel 用于顯示文字，UISprite 用于顯示圖片，無

論多復(fù)雜的 UI 界面，都是由最基礎(chǔ)的文字+圖片的形式展示（制作）的。

UI 界面的主要功能有兩個：1>展示數(shù)據(jù)；2>人機交互。

而最核心的交互就是點擊，使用鼠標(biāo)或者手指點擊 UI，而能接收點擊的 UI 組件

叫做 UIButton。我們可以在 UILable 和 UISprite 的基礎(chǔ)上附加 UIButton

組件制作出我們的 UI 按鈕。

2.按鈕制作步驟

①首先展現(xiàn)一張圖片或者一段文字；

②Attach-->BoxCollider，確定可以點擊的區(qū)域，其實點擊按鈕就是這個這

個 Collider 區(qū)域進行交互的；

③Attach-->ButtonScript，附加按鈕組件，按鈕制作到此完成。

2.UIButton 面板屬性

1.Colors 數(shù)組

使用顏色來描述按鈕的四種狀態(tài)。

如果不想讓顏色影響圖片的效果，可以將四種顏色全部選擇為白色。

2.Sprites 數(shù)組

組使用圖片來描述按鈕的四種狀態(tài)。

3.按鈕四種狀態(tài)

①Normal(*)：默認原始狀態(tài); ②Hover：經(jīng)過停留狀態(tài);

③Pressed(*)：按下狀態(tài); ④Disabled：不可用狀態(tài)；

九、基本組件之 UIButton 代碼控制

1.按鈕點擊事件綁定

1.面板屬性欄綁定

①創(chuàng)建一個代碼文件，定義一個公開的方法，掛載到一個游戲物體上；

②將該腳本拖拽到 UIButton 的 OnClick 事件上（注意看我的操作演示）。

2.代碼綁定

①創(chuàng)建一個代碼文件，掛載到按鈕游戲物體上；

②定義一個叫做 OnClick（）的方法。

2.按鈕交互聲音

1.UIPlaySound 組件

當(dāng)我們和按鈕進行交互（比如：點擊）的時候，可以播放一個點擊聲音，起到一

個輔助反饋的作用。

2.操作步驟

①Attach-->Play Sound Script 添加組件；

②Audio Clip 指定一個聲音文件；

③指定 Trigger 觸發(fā)該聲音播放的事件，常用的是 OnClick。

十、UI 動態(tài)加載

1.原理介紹

在實際項目開發(fā)過程中，UI 界面制作好以后會拖拽成為一個 Prefab 資源，和

Scene 場景分離，在實際加載到該場景的時候，動態(tài)的加載顯示 UI 界面。

這樣可以使得 UI 和 Scene 進行分離，好處是很大的，分離后我就可以讓不同

的人編輯制作不同的部分，否則的話，UI 和 Scene 在一起，多人編輯的時候，

項目是沒法合并（SVN，Git）的。

2.操作演示

①將制作好的 UI 面板拖拽成為一個 Prefab 資源，放到 Resources 文件夾下；

②使用 Resources.Load()將該資源加載到內(nèi)存中；

③實例化該 UI 資源對象，放到 UIRoot 下完成顯示；

3.相關(guān) API

NGUITools.AddChild(父對象, 子對象); NGUI 提供的一個實例化物體，設(shè)置子物體的一個內(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>();
        //實例化對象
        GameObject uiSprite = new GameObject("TonyWan");

       //設(shè)置父物體；
        uiSprite.GetComponent<Transform>().SetParent ( m_Transform);
        //重置Scale；
        uiSprite.GetComponent<Transform>().localScale = Vector3.one;

        //動態(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 {

    //第一種點擊事件方法

    //定義一個公開button點擊事件
    public void ButtonClick() {

        Debug.Log("我是Button按鈕被點擊了");
    
    }

    //第二種點擊事件方法

    //代碼綁定點擊事件 OnCLick內(nèi)置點擊事件 寫這個就會點擊
    public void OnClick(){

        Debug.Log("我是代碼綁定點擊事件");
    }


}

UILabelTest

public class UILabelTest : MonoBehaviour {

    //聲明一個持有引用
    private UILabel goldNumber;

    private UILabel item_Label;

    void Start()
    {
        //查找值物體
        goldNumber = GameObject.Find("goldNumber").GetComponent<UILabel>();
        //對文本進行賦值
        goldNumber.text = "123456789";
        //對字體顏色改變
        goldNumber.color = Color.green;
    }
    
    void Update () {
    
        //按下空格鍵 進行描述切換
        if (Input.GetKeyDown(KeyCode.Space))
        {
            item_Label=GameObject.Find("item_Label").GetComponent<UILabel>();
            item_Label.text = "TonyWanTonyWanTonyWanTonyWanTonyWan\n我要換行了！TonyWanTonyWanTonyWanTonyWanTonyWanTonyWanTonyWan";
        }

    }
}

UIManager

public class UIManager : MonoBehaviour
{
    //聲明一個持有引用，用來存貯加載后的預(yù)制體
    private GameObject prefab_Info;
    void Start () {

        //存貯預(yù)制體
        prefab_Info=Resources.Load<GameObject>("Info");//泛型 GameObject 參數(shù)1：預(yù)制體的名稱

        //NGUI自帶API 把預(yù)制體加載到場景中去 有重載
        NGUITools.AddChild(gameObject, prefab_Info);//參數(shù)1：父物體 參數(shù)2：子物體   
    }
    
    
}