NGUI學習筆記4.0

畅知發表於2024-03-06

EventListener和EventTrigger

控制元件自帶元件的侷限性

其實我們常見的複合控制元件只提供一些簡單的事件監聽,如按鈕有點選抬起的監聽,對長按等其他互動方式的事件監聽不大支援。

NGUI的監聽函式

給NGUI物件新增Collider,在其掛載的指令碼中編寫對應的NGUI的函式,在執行時候會透過反射來進行匹配呼叫函式。

image-20240306104859587

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

namespace NGUILearn
{
    public class NGUIPractice : MonoBehaviour
    {
        void Start()
        {

        }

        void Update()
        {

        }
        //掛載在掛載著Collider的UI元件上 
        //Unity會透過反射找到對應的響應函式
        void OnPress(bool isPressed)
        {
            if (isPressed)
            {
                print("按下元件了");
            }
            else
            {
                print("元件抬起了");
            }
        }
        //經過元件
        void OnHover(bool isHover)
        {
            if (isHover)
            {
                print("經過元件");
            }
            else
            {
                print("離開元件");
            }
        }
        //點選事件
        void OnClick()
        {
            print("點選了");
        }
        //雙擊
        void OnDoubleClick()
        {
            print("雙擊了");
        }
        //拖曳
        void OnDrag(Vector2 delta)
        {
            print("拖曳===="+delta);
        }
        //拖曳結束
        void OnDragEnd()
        {
            print("拖曳結束!");
        }
        //拖曳經過的物件
        //注意:這裡的物件都是拖曳的目標物體
        //並非再次經過的一些物件【在這裡如果你拖拽的是A,那麼拖拽開始和離開的時候都是A物件】
        //可以理解為已經拖著的物件一直跟著滑鼠走,知道撒手
        void OnDragOver(GameObject obj)
        {
            print("拖拽經過-----"+obj.name);
        }
        //拖曳要離開的物件
        void OnDragOut(GameObject obj)
        {
            print("拖曳離開經過的物件"+obj.name);
        }
    }
}

使用EventListerner對UI元件進行事件處理

上述指令碼掛載的物件是單個的UI元件,不方便進行系統的管理,而使用EventListerner可以在UI管控指令碼中來對各個子UI物件來設定監聽,相應對應的函式。

using System;
using System.Diagnostics.Tracing;
using UnityEngine;

namespace NGUILearn
{
    public class EventListenerPractic:MonoBehaviour
    {
        private UISprite A;
        private UISprite B;
        private UIEventListener _UIlistener;
        private void Awake()
        {
            A = transform.GetChild(0).GetComponent<UISprite>();
            B = transform.GetChild(1).GetComponent<UISprite>();
            //給A物件新增監聽機
            _UIlistener=UIEventListener.Get(A.gameObject);
            //監聽機要檢測的活動
            _UIlistener.onPress += (obj,isPress) =>
            {
                if(isPress)
                    print(obj.name+"被按壓了");
            };
            _UIlistener.onClick += (obj) =>
            {
                print(obj.name+"被點選了");
            };
            _UIlistener.onDragStart += BeginDrag;
        }

        private void BeginDrag(GameObject obj,Vector2 delta)
        {
            print(obj.name+"被拖拖曳了");
        }
        
        //供B物件使用EventTrigger來新增的事件監聽
        private void PressB()
        {
            print("B被按壓了");
        }

    }
}

image-20240306112237410

透過EventTrigger拖拽的方式來給B新增監聽:

image-20240306112627643

EventListerner和EventTrigger區別:

  1. EventListener適合指令碼程式碼控制元件的事件監聽處理,EventTrigger適合拖拽元件
  2. EventListerner傳入的引數更為具體,方便進行控制;而EventTriggr不會傳入引數,基本上為無參無返回值的回撥函式

DrallCall

簡單來說,DrallCall就是CPU給GPU傳送的渲染指令,其過程在CPU這邊。CPU把需要渲染的資源(資料、貼圖、渲染指令等)準備好之後,會給GPU傳送一個指令,告訴GPU可以來讀取渲染資源,進行渲染了。而CPU的準備其實是非常費事的事情,過載的drallcall會加重CPU的負載,造成遊戲的卡頓,為此要儘可能地減少DrallCall的呼叫次數。

我們知道,複製1K個1Kb的檔案速度遠遠慢於複製一個1Mb大小的檔案,因為一個檔案複製懸疑進行中斷、定址,開闢記憶體等步驟,消耗CPU資源。

如何降低DrallCall?

將一些小圖合併處理成一張圖,打成圖集。

打圖集的注意:

  1. 透過NGUI Panel上的DrallCall檢視工具檢視drallcal

    image-20240306140816397

  2. 注意不同圖集之間的層級關係,不要在不同UI層級中交叉使用不同圖集的資源,以免阻礙同圖集的合併渲染,增加drallcall【就是說,同圖集之間不要插入使用其他圖集的資源】

    理解:在渲染UI時候,會根據UI元件的層級來判斷是否可以合併渲染,例如層級1,2所用的資源在一個圖集中則可以合併渲染,如果1,2,3三層層級中國,1,3是一個圖集資源,2使用的是另外一個層級的資源,則drallcall數是3.因為中間的其他層級資源阻礙1,3層級的合併渲染。

  3. 注意label之間的層級關係

    label儘管不能被打入圖集中進行最佳化,但是要保證它處在合適的圖層中,防止其打斷相鄰圖層相同圖集資源的合併渲染的最佳化。

也可以使用記憶體換取低drallcall!

對於公用的圖片資源,可以給每個圖集中都打入一份,防止每次使用時單獨載入一個圖集。

總之,對於UI製作中的drawcall控制,優先使用圖集,label正確處理,Texture儘量不用。

NGUI字型

  1. 降低DrallCall

使用NGUI字型制作器可以將字型生成圖片並打入圖集中,從而達到最佳化DarCall的作用。

  1. 自定義美術字型

在自定義圖集製作工具中我們可以選用一些圖片(美術自定義的字型)來作為某個常規字型的替換,達到自定義字型的效果。

如何製作NGUI字型?

  1. 使用NGUI的字型制作工具來生成
  2. 使用第三方工具BitmapFont生成字型資訊和圖集,然後在NGUI字型生成器中生成字型。

本質上都是把字型進行圖片化,然後合併入圖集中。

文字變化較多的文字我們使用unity字型,而變化較少的,顯示內容比較少的可以選取一定的數字和字型進行新的NGUI字型制作,降低drallcall。

NGUI緩動

NGUI緩動就是讓控制元件互動式及逆行縮放變化、透明變化、位置變化、角度變化等等行為,可以透過NGUI自帶的Tween功能來實現這些緩動效果。

可以使用Tween來製作UI動畫,使用PlayTween來控制動畫的播放。

image-20240306153322921

image-20240306153420688

image-20240306153436483

模型和粒子顯示在UI之前

NGUI中顯示3D模型

顯示3D模型的方式:

  1. 將UI內容設定在UI層中
  2. 3D攝像機不渲染UI層
  3. 將3D模型拖拽到UI元件下,並設定渲染層級為UI層

或者:

使用Rander Texture來顯示3d渲染效果

NGUI中顯示粒子系統

設定粒子系統的Order in Layer數值,越大越在前面渲染

image-20240306163457990

其他內容:

繫結KeyBoard

使用NGUI中的KeyBinding 指令碼

image-20240306180458994

播放音效

使用NGUI中的指令碼 PlaySound

image-20240306180443872

語言本地化

  1. 在Resource下建立一個txt檔案 命名為Localization

  2. 配置檔案

    image-20240306180211470

  3. 要切換文字顯示的label物件下掛載Localize 關聯Key

    image-20240306180128482

  4. 給用於切換語言的下拉選單下新增LanguageSelection

    image-20240306180021599

PC端快速切換選中

使用NGUI指令碼–KeyNavigation指令碼

image-20240306180538898

完結撒花,但是還有兩個坑沒有填上;
在此立下----使用NGUI--

  1. 製作揹包系統皮膚
  2. 製作遙感控制物體移動