Unity面向新手超簡單的UI框架-有解無憂

前言

提醒：為了能夠將知識點學得更加透徹、記得更加牢固我會通過教學講解的方式把知識寫下來因為在程序中會讓人從學生變成老師這個程序會挖掘出新的知識和觀點是一個自我思維切換而達成的知識深度挖掘和提升的程序如果能幫助到大家那就最好如果有講錯的地方還請多多指教！我只是一只菜雞感謝理解！

為什么要使用UI框架

游戲中存在非常多的面板例如：背包面板、商店面板、設定面板、

這些面板之間會需要頻繁的呼叫和切換，例如：背包面板中存在各種物品，我們滑鼠放到物品上會出現物品資訊的提示框，還有設定面板需要按回傳鍵才可以切換回主選單面板，那我們如何實作界面間的溝通呢？我之前的做法就是在每個我要用到的面板上都寫一個腳本實作對應的功能，相信不少新手開發者都是這樣過來的吧，（納尼菜逼竟是我自己？）

雖然這樣做功能是實作了，但是維護性降低了、重復的代碼也變多了，為了更加方便的管理和呼叫場景中的面板我們需要寫一套完整的框架來對它們進行約束不然很容易出現面板共存，或者切換失敗等問題，

恰好SIKI老師有一套面向新手的小型UI框架課程講得蠻好的，最重要的是簡單啊！！！對我這種新手來說真的非常友好！我們一起來學習下吧！

框架的思路

先來簡單介紹下這個框架的思路吧，框架主要實作了面板的讀取存盤和管理，幫助我們更好的進行面板之間的切換管理

首先

1、我們通過Json檔案存盤我們所有要用到的面板資訊例如：面板的名字面板的型別面板的加載路徑等等，按實際專案需求為準

2、創建一個面板抽象類(就是所有面板的基類)來實作面板共有的一些方法，比如面板進入的時候要做的一些事情，面板退出時候要做的一些事情

3、通過代碼讀取Json檔案得到所有面板的資訊，然后我們就能通過這些資訊來操作面板

4、框架最核心的地方就是如何高效的管理這些面板先來走一遍我們面板的生成和關閉的流程

Engelbart

此時玩家只能操作背包面板，無法操作人物面板（想想是不是很多游戲都是這樣）當我們想要操作人物面板的時候我們需要先關閉背包面板然后才能操作人物面板

這里再畫一幅圖來解釋

現在我們位于最上面的設定選單中子選單界面，此時我們只能操作子選單界面，如果我們想操作設定選單界面的話我們需要先關閉子選單，才能操作設定選單

Engelbart

現在子選單關閉了，我們就可以操作設定選單了!

Engelbart

同理如果我們想操作主選單那我們就必須要關閉設定選單才能去操作主選單

所以Siki老師是如何管理面板之間切換關系的呢？了解過資料結構的同學看了上面的圖可能馬上就懂了！對的就是用堆疊（Stack）來實作，堆疊是一個后進先出的物件集合 后進先出先進后出？這不恰好可以用來存盤管理我們的面板嗎

先進后出最先進入的是主選單，所以我們把他放到了容器底部，然后玩家又點擊了設定選單，于是我們把他放到主選單的上面，然后玩家又點擊了設定選單里的子選單，我們把子選單放到了設定選單的上面

Engelbart

我們讓玩家只能操作堆疊中的頂部面板，通過Push把面板入堆疊（面板進入）通過Pop把頂部面板出堆疊（面板退出）這樣就輕松實作了面板之間的切換功能了

好吧說實話我覺得我講的是一坨屎（可能只有我自己能聽懂推薦直接去看Siki老師講的）

實操

思路理了一下！現在我們一步一步來做吧！

1、創建Json檔案，把面板資訊寫入到Json中

首先我們來實作第一步

我們通過Json檔案存盤我們所有要用到的面板資訊例如：面板的名字面板的型別面板的加載路徑等等，按實際專案需求為準

在創建Json檔案之前，我們需要先把要用到的面板做成預制體存放到Resources路徑下稍后通過Resources來加載這些我們要用到的面板，這里我自己新建了一張圖作為面板來演示，命名為“SettingPanel”存放到Resources的UIPanel檔案夾下

Engelbart

好現在我們就來創建一個Json檔案（新建一個文本檔案后綴改成.Json就是一個Json檔案了，注意我們Json檔案也要放到Resources檔案夾下因為我們稍后會通過Resources來獲取它）并往里面寫上我們面板的資訊，這里為了方便小伙伴們的理解我就寫簡單一點

json檔案

{
	"data":
	[
	   {"uiPanelType":"settingPanel","uiPanelPath":"UIPanel/SettingPanel"}
	]
}

這里簡單講下Json檔案的格式吧

花括號{} 保存物件：物件可以包含各種資料，包括陣列，
方括號[] 保存陣列：陣列可以包含物件，
資料由逗號分隔

不懂的我們可以直接找個在線決議Json的網站這里推薦 https://www.bejson.com/convert/json2csharp/

我們直接選擇Json轉C#物體類看看我們把寫好的Json資料復制過去然后點擊生成物體類看看

Engelbart

為了方便觀察我把生成的物體來復制過來給大伙看看

  
 public class DataItem
 {  
 	  public string uiPanelType { get; set; }
 
  	  public string uiPanelPath { get; set; }
 }

 public class Root
 {
     public List <DataItem> data { get; set; }
 }

不知道細心的小伙伴發現了沒有這兩個類是不是剛好映射了Json檔案里的資料

仔細對比一下就能了解其中的意思

要注意的是這些資料必須要和我們寫的Json檔案里的資訊對應(反過來也是一樣的總之Json和映射類的資訊名一定要保持一致) 只要寫錯一個單詞 Json就會決議失敗

//決議成功

public string uiPanelType { get; set; }
public string uiPanelPath { get; set; }
public List <DataItem> data { get; set; }

"uiPanelType":"settingPanel","uiPanelPath":"UIPanel/SettingPanel"}



//決議失敗 映射類和Json的資料名稱不一樣 決議會報錯

public string PanelType { get; set; }
public string PanelPath { get; set; }
public List <DataItem> paneldata { get; set; }

"uiPanelType":"settingPanel","uiPanelPath":"UIPanel/SettingPanel"}

我講的可能跟一坨屎一樣甚至更差（我幫你們講了）最好就是自己去度娘或者谷爹查下資料，現在我也就會最基本的操作回頭我再深入學一下然后再寫一篇關于Json的文章出來（禍害社會~）

剛剛是我們一鍵生成的映射類現在我們自己動手來寫下吧

PanelData類

public class PanelData
{
    /// <summary>
    /// UI面板型別
    /// </summary>
    public string uiPanelType;
    /// <summary>
    /// UI面板路徑
    /// </summary>
    public string uiPanelPath;
}

UIPanelDataList類

public class UIPanelDataList
{
    public PanelData[] data;
}

兩個映射類寫完了我們還要寫一個UIPanelType列舉類用來定義我們的面板型別，到時候我們拿到Json檔案里的uiPanelType資料，然后將String轉換成列舉型別就能得到面板的型別了

UIPanelType類：

public enum UIPanelType
{
     settingPanel           //設定面板
}

2、創建面板的基類

創建一個面板抽象類(就是所有面板的基類)來實作面板共有的一些方法，比如面板進入的時候要做的一些事情，面板退出時候要做的一些事情

UIPanelBase類比較簡單沒什么好講了根據自己的需求定義面板共有的一些方法

UIPanelBase類：

using UnityEngine;

public class UIPanelBase : MonoBehaviour
{
    /// <summary>
    /// 入堆疊狀態
    /// </summary>
    public virtual void PushState()
    {
        Debug.Log("入堆疊狀態");
    }

    /// <summary>
    /// 出堆疊
    /// </summary>
    public virtual void PopState()
    {
        Debug.Log("出堆疊狀態");
    }

    /// <summary>
    /// 面板恢復
    /// </summary>
    public virtual void RemotState()
    {
        Debug.Log("恢復狀態");
    }
}

3、讀取Json檔案

通過代碼讀取Json檔案得到所有面板的資訊，然后我們就能通過這些資訊來操作面板

這里我推薦使用LitJson，當然大家也可以用Unity自帶的JsonUtility，哪個順手就用那個，

要使用LitJson就需要去參考它 下載litJson.dll(這里我就不放下載鏈接了 Github上或者百度一下就有了) 放到Plugins檔案夾下如果沒有就自己創建一個

Engelbart

現在我們可以創建核心的UIManager類

MainUIManager類

首先第一步參考litJson 非常簡單就一句話 “using LitJson;”

然后把MainUIManager類做成一個單例（不懂單例的可以百度看看）

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

public class MainUIManager : MonoBehaviour
{
	/// <summary>
    /// MainUIManager單例
    /// </summary>
    public static MainUIManager Instance;
	
	public void Awake()
	{
		  Instance = this;
	}
}

單例做完后我們需要兩個字典一個用來存盤從Json決議出來的資料另一個用來存盤面板的UIPanelBase(我們需要在每個要操作的面板上添加一個腳本并繼承UIPanelBase類我們拿到面板身上的UIPanelBase類就相當于拿到了面板的實體)

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

public class MainUIManager : MonoBehaviour
{
	/// <summary>
    /// MainUIManager單例
    /// </summary>
    public static MainUIManager Instance;
	
	 /// <summary>
    /// 保存從Json檔案決議出來的面板資料
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
	
    /// <summary>
    /// 保存面板實體
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
	
	public void Awake()
	{
		  Instance = this;
	}
}

我英文不是太好取名會有點差

現在我們就可以來讀取Json檔案里的資料了

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

public class MainUIManager : MonoBehaviour
{
	/// <summary>
    /// MainUIManager單例
    /// </summary>
    public static MainUIManager Instance;
	
	 /// <summary>
    /// 保存從Json檔案決議出來的面板資料
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
	
    /// <summary>
    /// 保存面板實體
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
	
	/// <summary>
    /// 文本資源 用于讀取Json檔案里的資料
    /// </summary>
    private TextAsset uiPanelJson;
	
	public void Awake()
	{
		  Instance = this;
	}
	
	 /// <summary>
    /// 初始化Json資料
    /// </summary>
    private void InitJson()
    {
        //獲取Json檔案資料
        uiPanelJson = Resources.Load<TextAsset>("UIPanelData");

		//決議Json
        UIPanelDataList panelData = https://www.cnblogs.com/NewIDream/archive/2021/01/31/JsonMapper.ToObject(uiPanelJson.text);

        //存盤資料到字典中
        foreach (PanelData item in panelData.data)
        {
            //將String型別轉換成列舉型別 并存盤到字典中
			oriPanelDataDic.Add((UIPanelType)System.Enum.Parse(typeof(UIPanelType), item.uiPanelType.ToString()), item.uiPanelPath);
        }
    }
	
}

接下來我們拿到Canvas的Transform組件等等我們寫生成面板的邏輯需要把面板的父物體設定到Canvas下 Canvas我設定了個Tag 叫“UICanvas”所以我直接通過Tag去查找它

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

public class MainUIManager : MonoBehaviour
{
	/// <summary>
    /// MainUIManager單例
    /// </summary>
    public static MainUIManager Instance;
	
	 /// <summary>
    /// 保存從Json檔案決議出來的面板資料
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
	
    /// <summary>
    /// 保存面板實體
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
	
	/// <summary>
    /// 文本資源 用于讀取Json檔案里的資料
    /// </summary>
    private TextAsset uiPanelJson;
	
    private Transform uiCanvasTran;
	
	public void Awake()
	{
		  Instance = this;
		  InitJson();
          Init();
	}
	
	 /// <summary>
    /// 初始化Json資料
    /// </summary>
    private void InitJson()
    {
        //獲取Json檔案資料
        uiPanelJson = Resources.Load<TextAsset>("UIPanelData");

		//決議Json
        UIPanelDataList panelData = https://www.cnblogs.com/NewIDream/archive/2021/01/31/JsonMapper.ToObject(uiPanelJson.text);

        //存盤資料到字典中
        foreach (PanelData item in panelData.data)
        {
            //將String型別轉換成列舉型別 并存盤到字典中
			oriPanelDataDic.Add((UIPanelType)System.Enum.Parse(typeof(UIPanelType), item.uiPanelType.ToString()), item.uiPanelPath);
        }
    }
	
	
	/// 
    /// 初始化操作
    /// 
    private void Init()
    {
        if (uiCanvasTran == null)
        {
            uiCanvasTran = GameObject.FindGameObjectWithTag("UICanvas").transform;
        }
    }
}

接下來寫生成面板的邏輯也是很簡單的

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

public class MainUIManager : MonoBehaviour
{
	/// <summary>
    /// MainUIManager單例
    /// </summary>
    public static MainUIManager Instance;
	
	 /// <summary>
    /// 保存從Json檔案決議出來的面板資料
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
	
    /// <summary>
    /// 保存面板實體
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
	
	/// <summary>
    /// 文本資源 用于讀取Json檔案里的資料
    /// </summary>
    private TextAsset uiPanelJson;
	
    private Transform uiCanvasTran;
	
	public void Awake()
	{
		  Instance = this;
		  InitJson();
          Init();
	}
	
	 /// <summary>
    /// 初始化Json資料
    /// </summary>
    private void InitJson()
    {
        //獲取Json檔案資料
        uiPanelJson = Resources.Load<TextAsset>("UIPanelData");

		//決議Json
        UIPanelDataList panelData = https://www.cnblogs.com/NewIDream/archive/2021/01/31/JsonMapper.ToObject(uiPanelJson.text);

        //存盤資料到字典中
        foreach (PanelData item in panelData.data)
        {
            //將String型別轉換成列舉型別 并存盤到字典中
			oriPanelDataDic.Add((UIPanelType)System.Enum.Parse(typeof(UIPanelType), item.uiPanelType.ToString()), item.uiPanelPath);
        }
    }
	
	
	/// 
    /// 初始化操作
    /// 
    private void Init()
    {
        if (uiCanvasTran == null)
        {
            uiCanvasTran = GameObject.FindGameObjectWithTag("UICanvas").transform;
        }
    }
}

    /// <summary>
    /// 生成面板
    /// </summary>
    /// <param name="panelType">面板型別</param>
    /// <returns></returns>
    public UIPanelBase GeneratePanel(UIPanelType panelType)
    {
        UIPanelBase uiPanelBase;
        newPanelDataDic.TryGetValue(panelType, out uiPanelBase);

        //如果uiPanelBase為空就表示沒在字典中
        if (uiPanelBase == null)
        {
            string panelPath;
            oriPanelDataDic.TryGetValue(panelType, out panelPath);
            GameObject newPanel = Instantiate(Resources.Load<GameObject>(panelPath));
            newPanel.transform.SetParent(uiCanvasTran, false);
            uiPanelBase = newPanel.GetComponent<UIPanelBase>();
            newPanelDataDic.Add(panelType, uiPanelBase);
            return uiPanelBase;
        }
        return uiPanelBase;
    }

生成面板并回傳得到uiPanelBase（面板基類）后我們就可以做面板入堆疊出堆疊的操作了

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

public class MainUIManager : MonoBehaviour
{
	/// <summary>
    /// MainUIManager單例
    /// </summary>
    public static MainUIManager Instance;
	
	 /// <summary>
    /// 保存從Json檔案決議出來的面板資料
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
	
    /// <summary>
    /// 保存面板實體
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
	
	/// <summary>
    /// 文本資源 用于讀取Json檔案里的資料
    /// </summary>
    private TextAsset uiPanelJson;
	
    private Transform uiCanvasTran;
	
	private Stack<UIPanelBase> panelStack;
	
	public void Awake()
	{
		  Instance = this;
		  InitJson();
          Init();
	}
	
	 /// <summary>
    /// 初始化Json資料
    /// </summary>
    private void InitJson()
    {
        //獲取Json檔案資料
        uiPanelJson = Resources.Load<TextAsset>("UIPanelData");

		//決議Json
        UIPanelDataList panelData = https://www.cnblogs.com/NewIDream/archive/2021/01/31/JsonMapper.ToObject(uiPanelJson.text);

        //存盤資料到字典中
        foreach (PanelData item in panelData.data)
        {
            //將String型別轉換成列舉型別 并存盤到字典中
			oriPanelDataDic.Add((UIPanelType)System.Enum.Parse(typeof(UIPanelType), item.uiPanelType.ToString()), item.uiPanelPath);
        }
    }
	
	
	/// 
    /// 初始化操作
    /// 
    private void Init()
    {
        if (uiCanvasTran == null)
        {
            uiCanvasTran = GameObject.FindGameObjectWithTag("UICanvas").transform;
        }
    }


    /// <summary>
    /// 生成面板
    /// </summary>
    /// <param name="panelType">面板型別</param>
    /// <returns></returns>
    public UIPanelBase GeneratePanel(UIPanelType panelType)
    {
        UIPanelBase uiPanelBase;
        newPanelDataDic.TryGetValue(panelType, out uiPanelBase);

        //如果uiPanelBase為空就表示沒在字典中
        if (uiPanelBase == null)
        {
            string panelPath;
            oriPanelDataDic.TryGetValue(panelType, out panelPath);
            GameObject newPanel = Instantiate(Resources.Load<GameObject>(panelPath));
            newPanel.transform.SetParent(uiCanvasTran, false);
            uiPanelBase = newPanel.GetComponent<UIPanelBase>();
            newPanelDataDic.Add(panelType, uiPanelBase);
            return uiPanelBase;
        }
        return uiPanelBase;
    }
	
	/// <summary>
    /// 面板入堆疊
    /// </summary>
    /// <param name="panelType"></param>
    public void PushPanel(UIPanelType panelType)
    {
        if(panelStack==null)
        {
            panelStack = new Stack<UIPanelBase>();
        }
        UIPanelBase uiPanelBase = GeneratePanel(panelType);
        uiPanelBase.PushState();
        panelStack.Push(uiPanelBase);
    }

    /// <summary>
    /// 面板出堆疊
    /// </summary>
    public void PopPanel()
    {
        if (panelStack == null) return;

        //拿到頂部資料
        UIPanelBase currentUIpanelBase = panelStack.Pop();
        currentUIpanelBase.PopState();

        if (panelStack.Count > 0)
        {
            UIPanelBase outUIpanelBase = panelStack.Peek();
            outUIpanelBase.RemotState();
        }
    }
}

這樣我們的MainUIManager類就寫完了接下來呼叫就很簡單了我們為SettingPanel添加一個腳本“SettingPanel”（記得繼承UIPanelBase）

public class SettingPanel : UIPanelBase
{
    public void AddButtonClick()
    {
        MainUIManager.Instance.PushPanel(UIPanelType.settingPanel);
    }
}

方法寫好后把他系結到要點擊的Button中（例如點擊設定按鈕顯示設定面板就把設定面板的腳本系結到設定按鈕的Button組件中）

Engelbart

啊不會系結直接把面板拖到OnClick上然后選擇我們剛剛寫的方法就好了或者百度一下馬上就懂了

現在我們所有的步驟都完成了運行游戲看看效果吧！正常來說我們現在點擊設定按鈕就會彈出面板的了

4、最后

如果你彈出了面板那就證明成功了，如果沒彈出也不要灰心好好研究下代碼看看報錯，在上面的案例中我們只做了面板入堆疊的操作，你可以試著完成下面板出堆疊的操作，非常簡單的只需要寫一行代碼就好了，寫代碼就是要思考為什么，而不是什么都跟著敲，試著自己在這套框架上添加一些新的功能吧！

最后還是要說明下文章主要是用來鞏固我學到的知識用的，所以沒那些大佬講的這么詳細，要是把你看懵了！那我就非常抱歉了，建議關掉去看一遍完整的教程哈哈哈哈~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/255095.html

標籤：其他

上一篇：mysql5.7安裝教程【轉載】

下一篇：【Python爬蟲】：使用動態IP代理進行反反爬蟲