前言：關于Unity中關于UI的插件，我們最開始學的是UGUI，是Unity自帶的UI系統，而在Unity版本還沒更新出UGUI之前，除了NGUI沒有一個更好些的插件，所以人們不得不去選擇NGUI去制作UI，但隨著Unity做出了自己的UGUI系統之后，人們更多是使用Unity自帶的UI系統，也就是UGUI，這里我也只是簡單的認識一下，畢竟前面學習了UGUI,它們很相似，好了，廢話不多說了
下載NGUI
在Unity官網的Asset Store中下載UGUI
看NGUI的例子
在學習一個插件之前，如果快速的了解這個插件呢？最簡單的方式就是查看插件自帶的一些例子，通過看這些例子，了解基本的一些實現的功能，以及腳本
Prefab Toolbar(預設體工具欄)
- 首先新建一個場景
- NGUI>>Open>>Prefab Toolbar
- 會出現一個工具欄，通過它我們可以把UGUI已經做好的預設體（各種UI控件：按鈕、復選框、滑條、下拉菜單、進度條、輸入框等，跟UGUI中的基本一樣）拖到場景中或是層級視圖中
- 我們選中一個Button拖到場景中，會發現UGUI會自動添加一個UI Root（相當于UGUI中的畫布）和一個Camera
- 我們看一下它們的檢視面板
- UI Root
- Transform組件中多了P、R、S小按鈕，它們是用來初始化Transform的
- UI Root腳本
- UI Panel腳本
- 剛體組件
- UI Root
- Camera
- 這里的照相機主要不是用來拍攝的照相機，而是用來控制事件的照相機
- Transform組件
- Camera組件
- UI Camera腳本（控制事件）
- Button
- Transform組件
- UI Sprite腳本
- UI Button腳本
- 碰撞盒組件（這里需要注意一下，在NGUI中的這些控件如果要想發生事件，必須要有碰撞盒）
- 在Prefab Toolbar中會有很多頁，我們可以點開其他的頁，可以往里面添加新的預設體，你可以往里面拖入游戲對象添加新的預設體，也可以點擊Add添加已有的預設體
- 當你添加完畢后，在Prefab Toolbar中會出現你添加的預設體，并且在你保存的路徑下會多出個預設體，我這里保存在了Asset目錄下，所以會在工程窗口看到剛剛添加的預設體
Widget Wizared（控件工具）
- NGUI>>Open>>Widget Wizared
- 會出現一個控件工具窗口，我們可以修改它里面的屬性，值得注意的是：不同模板（控件類型）的屬性是不同的。如圖中所示，我們用的模板是精靈，那么這里面對應的屬性就是精靈模板的屬性，包括模板（也就是控件的類型）、精靈貼圖、中心樞紐位置、添加該控件到哪個對象（也就是把該控件設為哪個對象的子物體），但是基本的屬性不會發生變化：圖集、字體樣式
- 添加一個精靈
- 模板選為Spriie
- 設置所有的屬性
- 點擊Add To，添加到UI Root中
- 添加完之后，場景中多了個精靈、層級視圖中多個精靈對象、精靈對象身上掛載著UI Sprite腳本
-
由此可見，每添加一個控件，控件身上都會有相應的腳本，來實現這個控件的相應功能，需要注意的是：這里的精靈身上沒有通過腳本自動添加碰撞盒，那么它是不能觸發事件的，而有些控件是自身就有碰撞盒的，比如說剛開始咱們創建的Button
創建新的圖集
- 首先把要做成圖集的圖片設為精靈
-
NGUI>>Open>>Atlas Maker
-
彈出Atlas Maker窗口，點擊New按鈕
-
點擊完之后，Altas顯示None
- 選中要添加到新圖集的精靈
- 在Sprites窗口會顯示選中的精靈
- 點擊Create
-
會提示你保存目錄，設置命名，點擊保存
-
完成效果
-
點擊View Sprites可以預覽圖集里面的精靈
-
保存的目錄會多出同名的材質、預設體、導入設置文件三個東西
這樣，包含選中精靈的圖集就誕生了
注意：在NGUI中，不能像在UGUI中直接拖入精靈，而是必須要先設置圖集，再從圖集中選擇精靈
Anchor （錨點、錨框）
- 創建一個場景
- 點開Widget Tool>>Open the New UI Wizard
- 創建一個UI
- 點擊Create Your UI
- 場景中會多出個UI Root、Camera，層級視圖中也會多出，Widget Tool窗口會多出屬性
- 添加一個精靈到UI Root中
- 添加錨點
- 選中UI Root
- NGUI>>Create>>Anchor
- 將剛剛創建的精靈作為Anchor的子物體
- 選中Anchor，設置Anchor的位置為右上角
- 剛剛是添加錨點，現在是添加錨框
添加一個精靈
-
選中精靈，將它的Anchors的Type：Unified
Target:精靈的參照物
Left：精靈的左邊距離參照物左邊的距離
Right：精靈的右邊距離參照物右邊的距離
Bottom：精靈的下邊距離參照物下邊的距離
Top：精靈的上邊距離參照物上邊的距離
、
- 如果將Type：Advanced，則精靈每個邊都有對應的參照物
UI Root腳本
- Scaling Style:Flexible
- Minimum Height:當像素小于此值時，不再進行縮放
- Maximum Height:當像素大于此值時，不再進行縮放
Scaling Style:Constrained
-
Content Width:UI根據當前的寬度自動進行縮放
- Fit：勾選則根據當前的寬度自動進行縮放
-
Content Height：UI根據當前的高度自動進行縮放
- Fit：勾選則根據當前的高度自動進行縮放
Scaling Style:Constrained On Mobiles(跟Constrained類似，只不過是針對移動端的，用第二種就可以)
UI Panel腳本
- Alpha：阿爾法（透明度）
- Depth：渲染深度，深度越大越后被渲染，顯示在照相機的最前面
先比較UI Panel的深度再去比較UI控件的深度
UI Panel相當于是一個容器，所有的UI控件都在 UI Panel中才能被顯示
- Clipping：裁剪方式
- None：無
- Texture Mask：紋理遮罩裁剪
- Soft Clip：片段裁剪
- Constrain But Dont Clip:像素裁剪但不片段裁剪、
Camera腳本
- Event Type：
- 3D World:根據三維世界坐標觸發事件
- 3D UI：根據三維UI Root上的像素坐標觸發事件
- 2D World：根據二維世界坐標觸發事件
- 2D UI：根據二維UI Root上的像素坐標觸發事件
- Event Mask：能夠觸發事件的層
-
Debug：在運行的時，會在Game視圖的左上角顯示一些信息，當鼠標觸發事件的時候，值會發生相應的改變
- Event Sources：觸發事件的來源
- Mouse：鼠標
- Touch：觸屏
- Keyboard：鍵盤
- Controller：遙控桿
- Thresholds:微調
- Mouse Drag：當鼠標距離拖動對象某個像素的時候可以拖動
- Mouse Click：當鼠標距離點擊對象某個像素的時候可以點擊
- Touch Drag：當觸屏距離拖動對象某個像素的時候可以拖動
- Touch Tap：當觸屏距離按擊對象某個像素的時候可以按擊
- Axes and Keys:軸和鍵
- Navigate X:X方向增量自定義名字
- Navigate Y:Y 方向增量自定義名字
-Scroll:鼠標滑輪自定義名字
Panel Tool（面板工具）
- NGUI>>Open>>Panel Tool
- 復選框：勾選則顯示該Panel
- DP:渲染深度
- Panel's Name:Panel名字
- Layer：所在的層
- WG：控件個數
- DC:DrawCall（渲染調用）
- Tris：三角形個數（一個正方形是由兩個三角形組成）
- Stc：勾選則為靜態
Draw Call Tool（渲染調用工具）
- NGUI>>Open>>Draw Call Tool
- Draw Call Filter:渲染調用文件
- All Panels：所有Panel
- 下面會顯示所有Panel（當前的兩個面板）的Draw Call，會根據面板個數和使用圖集的不同而分成不同的組，如下圖所示，1組和2組是根據不同面板而劃分的；而2組和3組是根據使用不同的圖集而劃分的
- Material：所用的材質圖集
- Widgets：控件個數
- Triangles：三角形個數
- All Panels：所有Panel
- Selected Panel：選擇Panel
-
顯示選中的Panel的Draw Call
-
觸發事件方法一：在編輯器中使用NGUI觸發事件
-功能：點擊小書按鈕，精靈移動到UI Root中間位置；點擊叉號按鈕，返回起始位置
- 搭建場景：兩個NGUI按鈕、一個NGUI精靈
- 添加位移動畫：
- 選中精靈，NGUI>>Tween>>Position
-
在精靈身上會多個Tween Position腳本
- From：動畫播放起始位置
- To：動畫播放終點位置
- Tweener：動畫播放器
- Play Style：
- Once：一次
- Loop：循環
- Ping Pong：乒乓（在起始位置和終點位置之間來回播放）
- Animation Curve:動畫曲線
- Duration：持續時間
- Start Delay：開始的延遲
- Tween Group：動畫組
- Ignore TimeScale：勾選則忽略時間縮放
- Play Style：
-
選中打開按鈕，在UI Button腳本的On Click面板中：
- Notify:將剛剛添加了動畫的對象拖到這
-
Method：TweenPosition/PlayForward（向前播放）
-
同理，選中關閉按鈕，其他跟打開按鈕一樣，最后的Method換成TweenPosition/PlayReverse（向后播放）
-
Tween Position腳本取消勾選（使用）
觸發事件方法二：通過代碼使用NGUI觸發事件
-
如果你剛剛用了第一種方式觸發事件，而現在用第二種方式觸發事件，你需要把剛剛在兩個按鈕控件上的On Click中方法取消掉，點擊Notify中的減號按鈕取消
- 創建BtnEvent腳本
- 掛載對象：隨意對象
- 實例對象：
- Btn Open：ButtonOpen
- Btn Close：ButtonClose
- BG：Sprite
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class BtnEvent : MonoBehaviour
{
public UIButton BtnOpen;
public UIButton BtnClose;
public UISprite BG;
private TweenPosition tp;
private void Awake()
{
tp = BG.GetComponent<TweenPosition>();
}
private void OnEnable()
{
BtnOpen.onClick.Add(new EventDelegate(ClickBtnOpen));
BtnClose.onClick.Add(new EventDelegate(ClickBtnClose));
}
private void OnDisable()
{
BtnOpen.onClick.Remove(new EventDelegate(ClickBtnOpen));
BtnClose.onClick.Remove(new EventDelegate(ClickBtnClose));
}
void ClickBtnOpen()
{
tp.PlayForward();
}
void ClickBtnClose()
{
tp.PlayReverse();
}
}
跟UGUI的觸發事件方法很相似
UI Sprtie腳本
- Type：選擇不同的類型：簡單、九宮格、填充等，跟UGUI類似
- Gradient：勾選則使用
- Top：上半部分的顏色
- Bottom:下半部分的顏色
- Color Tint：如果Gradient沒有勾選則按照Color Tint的顏色進行顯示
- Widget：控件
- Pivot：中心樞紐，用來調整控件位置（對齊方式）
- Depth：渲染優先級，越大的越后渲染，也就會顯示在前面
- Size：精靈尺寸，以像素為單位
- Snap：恢復原始尺寸
UI規范
- 將所有UI Root以及它的所有子物體的Layer都設為UI
- Main Camera的Culling Mask設為所有，并把UI層取消掉
- Camera中的Culling Mask設為UI
NGUI控件
跟UGUI中的類似，這里就不多說了
實現功能：一個按鈕按一下打開，再按一下關閉
-
兩種方式：
-
方式一：使用NGUI中的UI Play Tween腳本和Tween Position腳本控制
如果你看過NGUI中的示例，那么咱們要實現的功能就在那里用到過，實例七中的Click Me按鈕可以一個按鈕實現開關窗口的功能
- 在工程目錄中查找UIPlayTween腳本
- 將腳本掛載到需要實現功能的按鈕身上
- 更改UI Play Tween腳本
- Tween Target：將含有動畫腳本的Sprite托到這
-
Play direction:Toggle（實現來回播放動畫）
-
方式二：通過自己寫腳本（主要用了bool類型的標志位）和NGUI中的Tween Position腳本控制
- 創建Test03_1腳本
- 掛載對象：
- Btn：ButtonOpen
-
BG：Sprite
- 掛載對象：
- 創建Test03_1腳本
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Test03_1 : MonoBehaviour {
public UIButton Btn;
public UISprite BG;
private TweenPosition tp;
private bool IsOpen=false;
private void Awake()
{
tp = BG.GetComponent<TweenPosition>();
}
private void OnEnable()
{
Btn.onClick.Add(new EventDelegate(ClickBtn));
}
private void OnDisable()
{
Btn.onClick.Remove(new EventDelegate(ClickBtn));
}
private void Update()
{
}
void ClickBtn()
{
if (IsOpen)
{
tp.PlayReverse();
IsOpen = false;
print("關閉");
}
else
{
tp.PlayForward();
IsOpen = true;
print("打開");
}
}
}
