Unity 揹包系統的完整實現（基於MVC框架思想）

心之凌兒發表於2021-04-13
UnityMVC框架

前言：

專案原始碼上傳GitHub：Unity-knapsack

揹包系統：

  • 揹包系統是遊戲中非常重要的元素，幾乎每一款遊戲都有揹包系統，我們使用揹包系統可以完成裝備欄的資料管理，商店物體的資料管理等等一系列的功能，如何做好一個揹包系統呢，來學習把！

本次案例是基於資料本地儲存的方式設計的揹包系統，首先在資料管理方面，使用ScriptableObject類來實建立資料倉儲，可以儲存在遊戲系統中，重新開始後依舊可以再次載入出來該資料：

前期規劃：

為了使得遊戲邏輯簡潔清晰，可以使用MVC框架完成揹包系統的設計，來儘量降低資料、邏輯耦合，提升不同的模組的獨立性。便於程式的擴充套件和維護

什麼是MVC：

  • M即Model（模型）
  • V即View（檢視）
  • C即Control（控制）

而使用MVC的目的就是將M和V進行程式碼分離，便於邏輯區分

揹包系統要實現的是，存在於揹包內的物體可以顯示在UI上，而揹包內物體是動態變化的（減少或增加），所以UI可以根據這種變化而進行動態的變化，所以我們劃分為如下區塊：

  • 首先是M（業務模型）：我們通過ScriptableObject類建立資料倉儲來構造業務模型
  • 然後是V（使用者介面）：通過UI介面顯示揹包內所有物體
  • 最後是C（邏輯控制）：獲取資料倉儲模型並轉換到UI介面

UI端:

一、UI搭建

建立一個Panel作為揹包系統中所有物體的父元素，併為其更換一個背景圖片，這樣可以使得物體有容納的空間，能夠使得物體更加序列化，更規整：

在這裡插入圖片描述

接下來需要對MainGrid新增元件Grid Layout Group元件，該元件的作用是可以是的子元素按照一定的格式排列在父元素中，這樣就很容易使我們動態的顯示出不定長的UI元素同時保持規整的效果，

關於Grid Layout Group的具體作用和使用方式可以檢視之前文章：

為了使得新增的子物體可以完美的匹配的每一個格子中，需要調整Grid Layout Group元件的相關引數，而其中主要是padding，Call Size和Spacing三個元素，這三個引數調整的具體內容為：

  • Padding：類似網頁設計內邊距
  • Cell Size：組中每個佈局元素要使用的大小
  • Spacing：佈局之間的元素間距

最終達到這樣的效果，每新增一個圖片子元素，則向後排列一位，這樣可以完美的顯示在格子之中：
在這裡插入圖片描述
二、格子元素預製體制作

為了使得揹包內的物體可以在UI中顯示出來，需要將這些物體做成對應的UI元素，而UI元素則有兩個關鍵點，圖示和數量，為了實現這樣 的效果，首先建立一個Image命名為GridPrefab作為圖示，然後為其新增Text子元素作為物體數量顯示框：
在這裡插入圖片描述

在遊戲中，我們只需要為GridPrefab的Image元件中的Source Image新增圖片，即可實現最終的顯示效果，製作完成後將GridPrefab拖入到Assets中即可建立一個預製體

由於我們需要在使用預製體時，需要修改其一些資訊，比如說Image元件中的Source Image新增圖片和子元素Text中的顯示內容（物體個數），為了方便更改，使用一個指令碼整合這些需要修改地方，方便其他指令碼呼叫，指令碼命名為Grid，並掛載到GridPrefab上：

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

public class Grid : MonoBehaviour
{
    public Image gridImage;
    public Text girdNum;
}

掛載完指令碼後，將元件或元素拖入：
在這裡插入圖片描述

資料端：

一，基於ScriptableObject本地儲存資料

ScriptableObject可以用來建立不需要掛載到場景物體上的指令碼，這樣可以將遊戲資料儲存於本地，不會在每次遊戲結束時重置資料，我們可以利用這一點來設計出資料的儲存倉庫

關於ScriptableObject的一些細節可以檢視該文章：

建立一個儲存物體資料的倉庫，我們可以使用CreateAssetMenu來完成建立AssetMenu 的方法，這樣就可以使用Create來在資源中建立定義的倉庫

具體操作流程：

1，物體資料倉儲建立：

首先建立一個類Item（用來建立一個物體（比如說一件武器）資料儲存倉庫）繼承於ScriptableObject，既然是揹包物體，需要儲存的資料主要是UI顯示需要的圖示圖片，物體名稱和物體數量，以及物體的詳細資訊（本案例用不到）等：

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

//實現可以在Asset視窗建立資原始檔的方法
[CreateAssetMenu(fileName ="New Item",menuName ="Bag/New Item")]

public class Item : ScriptableObject
{
    //物體名、需要在UI中顯示的圖片、持有物體的數量、物體資訊的描述
    public string itemName;  
    public Sprite itemImage; 
    public int itemNum;      
    [TextArea] //改變輸入框格式，提示輸入框容量
    public string itemInfo;   
}

完成指令碼後儲存，在Asset皮膚右鍵建立，即可看到New Item選項，點選可以建立一個物體資料倉儲，並且可以填寫其中的資訊，也可以通過指令碼來修改資訊，並且是永久儲存的

  • 建立一個資料倉儲：
    在這裡插入圖片描述

  • 修改資料倉儲資訊：

在這裡插入圖片描述

2，揹包資料倉儲的建立

建立該倉庫是為了儲存揹包中究竟有哪些物體，也就是有哪些Item，建立一個類命名為MainItem同樣繼承於ScriptableObject，並定義一個列表來揹包中所有物體：

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

[CreateAssetMenu(fileName ="New MainItem",menuName ="Bag/New MainItem")]
public class MainItem : ScriptableObject
{
    public List<Item> itemList=new List<Item>();
}

建立操作流程：

  • 在資源皮膚點選後建立一個MainItem揹包物體管理倉庫，用來存放揹包中的Item資料：
    在這裡插入圖片描述
  • 檢視建立的資料倉儲，可以發現是一個列表管理資源，我們可以將一系列的Item資源拖入其中，這樣就可以在揹包中儲存所有物品的資訊：

在這裡插入圖片描述

遊戲場景端：

1，搭建場景

在Sence皮膚搭建一個簡單的場景，並新增一個Capsule作為玩家控制角色，然後新增一個Cube作為場景中可以撿拾的物體，當玩家撿拾到該物體後，就會在揹包UI中顯示出來

首先對於，玩家控制角色，為其新增Rigidbody元件併為其新增指令碼PlayerCtrl來控制其移動和揹包UI的顯示和隱藏：

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

public class PlayerCtrl : MonoBehaviour
{
    Vector3 v3;
    float speed = 2f;
    public GameObject myBagUI;
    private bool isPlay;

    // Update is called once per frame
    void Update()
    {
        //控制角色移動
        float x = Input.GetAxis("Horizontal");
        float y = Input.GetAxis("Vertical");
        v3 = new Vector3(x, 0, y);
        transform.Translate(v3*speed*Time.deltaTime);

        //控制UI顯示或隱藏
        if(Input.GetKeyDown(KeyCode.B))
        {
            isPlay = !isPlay;
            myBagUI.SetActive(isPlay);
        }
    }
}

完成指令碼後掛載到Player上，並將UI元素MyBag拖入：
在這裡插入圖片描述

2，場景中物體的設計

接下來要完成在遊戲場景中的物體程式碼設定，為其新增指令碼，在玩家碰撞到該物體時，將該物體對應的資料倉儲Item新增到揹包中的資料倉儲中，如果揹包中的資料倉儲已經存在該物體，則將對應物體的資料倉儲中的持有數量加一

為了方便理解，可以將其看作為吃雞遊戲中地面上子彈，當玩家撿拾後，對應的角色揹包中就會出現子彈，如果揹包中有之前撿拾的子彈，則揹包中子彈數量會增加，本案例使用Cube來代替

首先為Cube建立一個指令碼命名為ScenesItem來檢測碰撞，並獲取該物體的資料倉儲將其新增到揹包資料倉儲中：

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

public class ScenesItem : MonoBehaviour
{
    //物體的資料倉儲
    public Item item;
    //揹包的資料倉儲
    public MainItem mainItem;
    private void OnTriggerEnter(Collider other)
    {
        if(other.gameObject.name=="Player")
        {
			
            if(!mainItem.itemList.Contains(item))
            {
                mainItem.itemList.Add(item);    
            }
            item.itemNum += 1;
            Destroy(this.gameObject);
        }
    }
}

完成後，將指令碼掛載到物體上，並拖入於該物體對應的物體資料倉儲和揹包資料倉儲：
在這裡插入圖片描述

將資料顯示於UI：

通過讀取資料倉儲的資訊，將揹包的資料轉換到UI元素中顯示出來

首先通過讀取揹包資料倉儲中的列表資訊，讀取到列表中所有物體資料倉儲中的資訊，獲取到揹包倉庫中存在的物體圖片和數量，並顯示在UI上面，建立一個指令碼命名為BagDisplayUI並掛載到Canvas上，為了確保該類只有一個例項，用單例模式來實現該需求

public class BagDisplayUI : MonoBehaviour
{
    static BagDisplayUI bagDisplayUI;
    private void Awake()
    {
        if(bagDisplayUI!=null)
        {
            Destroy(this);            
        }
        bagDisplayUI = this;
               
    }
}

然後定義一些我們所需要的變數，首先需要是揹包資料倉儲，需要通過該倉庫遍歷到揹包中物體的資料倉儲，然後就是之前做好的顯示每一個物體圖示和數量的UI預製體，第三個則是用來作為新增每一個UI預製體的父物體

    //揹包資料倉儲、格子中物體預製體、和UI中顯示物體元素的父元素
    public MainItem mainItem;
    public Grid gridPrefab;
    public GameObject myBag;

定義完後，將需要的變數拖入：
在這裡插入圖片描述

接下來編輯該指令碼，實現在UI顯示揹包物體的功能：

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

public class BagDisplayUI : MonoBehaviour
{
    //單例模式
    static BagDisplayUI bagDisplayUI;
    private void Awake()
    {
        if(bagDisplayUI!=null)
        {
            Destroy(this);
            
        }
        bagDisplayUI = this;
               
    }
    //每次遊戲啟動前，動態的更新揹包UI元素
    private void OnEnable()
    {
        updateItemToUI();
    }
    //揹包資料倉儲、格子中物體預製體、和UI中顯示物體元素的父元素
    public MainItem mainItem;
    public Grid gridPrefab;
    public GameObject myBag; 

    /// <summary>
    /// 在UI中將一個物體的資料倉儲顯示出來
    /// </summary>
    /// <param name="item"></param>
    public static void insertItemToUI(Item item)
    {
        
        Grid grid = Instantiate(bagDisplayUI.gridPrefab, bagDisplayUI.myBag.transform);
        grid.gridImage.sprite = item.itemImage;
        grid.girdNum.text = item.itemNum.ToString();
        
    }

    /// <summary>
    /// 將揹包資料倉儲中所有物體顯示在UI上
    /// </summary>
    public static void updateItemToUI()
    {
        for (int i = 0; i < bagDisplayUI.myBag.transform.childCount; i++)
        {
            Destroy(bagDisplayUI.myBag.transform.GetChild(i).gameObject);
        }
        for (int i = 0; i < bagDisplayUI.mainItem.itemList.Count; i++)
        {
            insertItemToUI(bagDisplayUI.mainItem.itemList[i]);
        }
    }
}

同時在每一個物體的碰撞檢測指令碼上呼叫更新UI元素的方法，這是為了在Player碰撞到物體時，揹包資料倉儲發生變化時，可以在UI元素上也同步變化：
在這裡插入圖片描述

總結：

通過MVC框架思想來設計揹包系統，儘量保證資料、檢視的分離，通過控制端來連線兩者，提升獨立性

而對於揹包系統的主體設計，主要在於資料的儲存和讀取，本次案例我們採用的是本地儲存的方式。在網路遊戲中，如果採用資料儲存在伺服器的方式，可以通過讀取網路傳送過來的Json資料等方式來實現在UI介面的顯示

無論是本地還是伺服器，轉換為UI介面的展示效果方法基本相同，主要是對資料的處理方式的差異

相關文章