【UGUI】（三）------- 背包系统（上）之简易单页背包系统及检索功能的实现-阿里云开发者社区

背包系统，无论是游戏还是应用，都是常常见到的功能，其作用及重要性不用我多说，玩过游戏的朋友都应该明白。

在Unity中实现一个简易的背包系统其实并不是太过复杂的事。本文要实现的是一个带检索功能的背包系统。先看一下我们要完成的效果。由于上传的gif图不能大于5M，所以录制的质量比较一般。大家先将就看一下吧

那现在，我们就开始动手了~~

一. 拼UI

由于本文着重讲述的是背包系统的运作，所以，背包里面的元素获取就简洁地做成这个样子

事实上，一般游戏内获取道具的途径是敌人掉落，完成任务，商城购买等，而这里简化了这一步，右边的加号代表向背包里添加一个该元素。好了，现在开始实际制作。

1.1 在 Resources 文件夹下创建两个子文件夹 Prefab 和 Sprite ，用于存放资源

,

1.2 创建一个Canvas；

    创建一个空物体，命名为Options；

    创建一个 Image，用来显示道具，命名为 X1-装备

    在上一步创建的 Image 下创建一个子 Image。

    然后给这两张 Image 赋值



这里需要说明的是，命名为 X1-装备 是为了更方便的说明背包如何运作，事实上一般游戏的道具都是有着名字，种类等属性，而这些属性应该储存在 配置表 里面。本文不会涉及到配置表的操作，所以这里就简洁处理。还有这些UI资源都是随意的，读者自行选择自己的图片资源。

1.3 进行第②中的操作，实现如下效果

1.4 制作背包

    在Canvas下创建一个空物体，命名为BG，赋上一张背景图，调整尺寸大小

     在BG下创建一个Panel，调整其尺寸大小。并添加 Content Size Fitter 和 Grid Layout Group 组件，修改其中参数

1.5 检索UI

在BG下创建一个空物体，命名为 Toggles ，并在其下创建3个子Toggle，分别命名为 Med，Eqi，Goods。

再创建一个 InputField。如图

1.6 单个道具Item

创建一张Image, 命名为Cell。在Cell下创建一个子Text。调整两者大小。做成prefab，放到prefab文件夹中

至此，UI 拼接就完成了。只缺逻辑了~~~

二. UI逻辑

2.1 物品类

首先创建一个C#脚本，命名为 CellItem，代表物品类。一个道具（物品），通常都会有名字，所属种类，数量，价格等属性，而这里的话，只取前三种属性，完整代码：

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

public class CellItem { private string name; private string tag; private int number; public CellItem(string name,string tag,int num) { Name = name; Tag = tag; Number = num; } public string Name { get { return name; } set { name = value; } } public string Tag { get { return tag; } set { tag = value; } } public int Number { get { return number; } set { number = value; } } }

2.2 数据管理类

当我们的角色获得了一个道具之后，理应有一个管理系统将新获得的道具信息添加进去。所以创建一个C#脚本，命名为DataManager 。

在本文中实现的背包系统中，只管理了三种道具：药品，装备，物品（消耗品）。对应着前文所描述的 UI拼接。所以在 DataManager 中创建3个 Dictionary ，用来存储道具信息。

	/// <summary>
	/// 药品 /// </summary> public Dictionary<string, CellItem> Medicine = new Dictionary<string, CellItem>(); /// <summary> /// 装备 /// </summary> public Dictionary<string, CellItem> Equipment = new Dictionary<string, CellItem>(); /// <summary> /// 物品(消耗品） /// </summary> public Dictionary<string, CellItem> Goods = new Dictionary<string, CellItem>();

以每个道具的名字为 key。同时为了方便管理，我把DateManager做成了单例模式。不熟悉单例模式的朋友可以参考一下这篇博文 https://www.cnblogs.com/liaoguipeng/p/5130144.html

DataManager完整代码：

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

public class DataManager { /// <summary> /// 药品 /// </summary> public Dictionary<string, CellItem> Medicine = new Dictionary<string, CellItem>(); /// <summary> /// 装备 /// </summary> public Dictionary<string, CellItem> Equipment = new Dictionary<string, CellItem>(); /// <summary> /// 物品(消耗品） /// </summary> public Dictionary<string, CellItem> Goods = new Dictionary<string, CellItem>(); // 定义一个静态变量来保存类的实例 private static DataManager _Instance; // 定义一个标识确保线程同步 private static readonly object locker = new object(); public static DataManager GetInstance() { // 当第一个线程运行到这里时，此时会对locker对象 "加锁"， // 当第二个线程运行该方法时，首先检测到locker对象为"加锁"状态，该线程就会挂起等待第一个线程解锁 // lock语句运行完之后（即线程运行完之后）会对该对象"解锁" // 双重锁定只需要一句判断就可以了 if (_Instance == null) { lock (locker) { // 如果类的实例不存在则创建，否则直接返回 if (_Instance == null) { _Instance = new DataManager(); } } } return _Instance; } }

2.3 UI管理类

这个类是整个背包的重点，用于管理第一步中创建的所以UI。

创建一个C#脚本，命名为UIManager。在场景中创建一个空物体，命名为GameManager，并把UIManager挂载上去。

为了获取第一步中所创建的UI，先定义与之相匹配的变量

	private Toggle selectMed;
	private Toggle selectEqi;
	private Toggle selectGoods;
	private InputField SearchBox;

	private bool isSelectMed; private bool isSelectEqi; private bool isSelectGoods; private Button[] buttons; private GameObject lattice; private GameObject content; private Dictionary<string, CellItem> whole = new Dictionary<string, CellItem>();

其中，toggle 和 InputField 对应之前所制作的 toggle 和输入框；

中间三个 bool 变量表示检索时是否选择的toggle代表的种类；

buttons 代表左边6个添加按钮； lattice 用来得到之前制作的 Cell 的prefab；

content 代表前文的Panel；

whole则会记录所以的道具信息；

先给这些变量赋值。我会先给出每个UI所对应的响应方法，方法体中会牵涉其它核心的方法，这个稍后会讲。

private void Awake() { SearchBox = GameObject.Find("Canvas/BG/InputField").GetComponent<InputField>(); SearchBox.onValueChanged.AddListener(SearchItem); lattice = Resources.Load<GameObject>("Prefab/Cell"); content = GameObject.Find("Canvas/BG/Panel"); selectMed = GameObject.Find("Canvas/BG/Toggles/Med").GetComponent<Toggle>(); selectEqi = GameObject.Find("Canvas/BG/Toggles/Eqi").GetComponent<Toggle>(); selectGoods = GameObject.Find("Canvas/BG/Toggles/Goods").GetComponent<Toggle>(); selectMed.onValueChanged.AddListener(OnMedicineToggleClick); selectEqi.onValueChanged.AddListener(OnEquipmentToggleClick); selectGoods.onValueChanged.AddListener(OnGoodsToggleClick); GameObject buts = GameObject.Find("Canvas/Options"); for (int count = 0; count < buts.transform.childCount; count++) { GameObject kid = buts.transform.GetChild(count).gameObject; kid.transform.GetChild(0).GetComponent<Button>().onClick.AddListener(() => OnAddButtonClick(kid.name)); } isSelectMed = true; isSelectEqi = true; isSelectGoods = true; }

而3个bool值变量对应着三个方法。这三个方法作用于检索

	private string IsSelectMed() { if (isSelectMed) return "药品"; return " "; } private string IsSelectEqi() { if (isSelectEqi) return "装备"; return " "; } private string IsSelectGoods() { if (isSelectGoods) return "物品"; return " "; }

3个Toggle也对应了3个响应方法

	public void OnMedicineToggleClick(bool isOn) { if (isOn) isSelectMed = true; else isSelectMed = false; ReflashBackup(); } public void OnEquipmentToggleClick(bool isOn) { if (isOn) isSelectEqi = true; else isSelectEqi = false; ReflashBackup(); } public void OnGoodsToggleClick(bool isOn) { if (isOn) isSelectGoods = true; else isSelectGoods = false; ReflashBackup(); }

6个button对应着同一个方法，不过参数不同，参数为每个button所对应的名字，如“X1-装备”，“X2-药品”等

	public void OnAddButtonClick(string Name) { string[] parts = Name.Split('-'); string name = parts[0]; string tag = parts[1]; switch(tag) { case "药品": ModifyKey(DataManager.GetInstance().Medicine, name,"药品"); break; case "装备": ModifyKey(DataManager.GetInstance().Equipment, name,"装备"); break; case "物品": ModifyKey(DataManager.GetInstance().Goods, name,"物品"); break; } ModifyKey(whole, name,tag); ReflashBackup(); }

接下来就是比较重要的方法：

一. 修改键对值

当添加一个道具进来时，对其进行管理。应该先检索当前的 Dictionary 中是否有这个道具（key），如果有，则这个道具的数量属性 + 1；如果没有，则添加一个键对值。

	public void ModifyKey(Dictionary<string, CellItem> cells,string name,string tag) { //先判断是否存在这个Key,没有则add if (cells.ContainsKey(name)) { int count = cells[name].Number; cells[name].Number = count + 1; } else { CellItem cellItem = new CellItem(name,tag,1); cells.Add(name, cellItem); } }

二. 创建道具单元

在默认显示所有物品的情况下，只要遍历 Dictionary whole就可以创建出所有的道具。而在加入了检索功能后，则需要多进行一个判断，提取出符合检索标准的键对值，这一步我们用 Linq 可以快速获取。然后创建所有道具。

	public void InstantiateCell(Dictionary<string, CellItem> dictionary) { Dictionary<string, CellItem> SelectObjs = new Dictionary<string, CellItem>(); var selects = from cell in dictionary where (cell.Value.Tag == IsSelectMed() || cell.Value.Tag == IsSelectEqi() || cell.Value.Tag == IsSelectEqi()) select cell; foreach(var select in selects) { SelectObjs.Add(select.Key, select.Value); } foreach (KeyValuePair<string, CellItem> value in SelectObjs) { GameObject cell = GameObject.Instantiate(lattice, content.transform); SetPicture(value.Key, cell); cell.transform.GetChild(0).GetComponent<Text>().text = value.Value.Number.ToString(); } }

创建单元时需要把道具相应的图片显示出来，需要注意的是，我把我的资源放在了Resources/Sprite下，读者的资源路径与我不一致时，仅修改一行代码即可

	public void SetPicture(string name,GameObject cell) { //图片资源路径 string path = "Sprite/" + name; Texture2D tex = Resources.Load<Texture2D>(path); Image img = cell.transform.GetComponent<Image>(); Sprite sp = Sprite.Create(tex, new Rect(new Vector2(0, 0), new Vector2(tex.width, tex.height)), new Vector2(0, 0)); img.rectTransform.sizeDelta = new Vector2(sp.rect.width, sp.rect.height); img.sprite = sp; }

三. 刷新背包

当我们添加一个道具或者按种类检索时，都应该刷新背包。而刷新的思路也很简单：先把 Panel 下的所以 CellItem 删除，然后根据新的 Dictionary 创建新的一批道具单元。

删除方法

	public void ClearContent() { Transform[] lattices = content.GetComponentsInChildren<Transform>(); foreach (Transform lattice in lattices) { if (lattice.name != "Panel") { lattice.DetachChildren(); GameObject.Destroy(lattice.gameObject); } } }

所以刷新函数如下

	public void ReflashBackup()
	{
		ClearContent();
		InstantiateCell(whole);
	}

四. 按名字搜索

按名字搜索对应着前文创建的 InputField。思路也是比较简单的，如果字典中有这个道具key，就创建出来

	public void SearchItem(string itemName) { ClearContent(); if (whole.ContainsKey(itemName)) { GameObject cell = GameObject.Instantiate(lattice, content.transform); SetPicture(itemName, cell); cell.transform.GetChild(0).GetComponent<Text>().text = whole[itemName].Number.ToString(); } }

完整代码：

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events; using UnityEngine.UI; using System.Linq; public class UIManager : MonoBehaviour { private Toggle selectMed; private Toggle selectEqi; private Toggle selectGoods; private InputField SearchBox; private bool isSelectMed; private bool isSelectEqi; private bool isSelectGoods; private Button[] buttons; private GameObject lattice; private GameObject content; private Dictionary<string, CellItem> whole = new Dictionary<string, CellItem>(); private void Awake() { SearchBox = GameObject.Find("Canvas/BG/InputField").GetComponent<InputField>(); SearchBox.onValueChanged.AddListener(SearchItem); lattice = Resources.Load<GameObject>("Prefab/Cell"); content = GameObject.Find("Canvas/BG/Panel"); selectMed = GameObject.Find("Canvas/BG/Toggles/Med").GetComponent<Toggle>(); selectEqi = GameObject.Find("Canvas/BG/Toggles/Eqi").GetComponent<Toggle>(); selectGoods = GameObject.Find("Canvas/BG/Toggles/Goods").GetComponent<Toggle>(); selectMed.onValueChanged.AddListener(OnMedicineToggleClick); selectEqi.onValueChanged.AddListener(OnEquipmentToggleClick); selectGoods.onValueChanged.AddListener(OnGoodsToggleClick); GameObject buts = GameObject.Find("Canvas/Options"); for (int count = 0; count < buts.transform.childCount; count++) { GameObject kid = buts.transform.GetChild(count).gameObject; kid.transform.GetChild(0).GetComponent<Button>().onClick.AddListener(() => OnAddButtonClick(kid.name)); } isSelectMed = true; isSelectEqi = true; isSelectGoods = true; } private string IsSelectMed() { if (isSelectMed) return "药品"; return " "; } private string IsSelectEqi() { if (isSelectEqi) return "装备"; return " "; } private string IsSelectGoods() { if (isSelectGoods) return "物品"; return " "; } public void OnAddButtonClick(string Name) { string[] parts = Name.Split('-'); string name = parts[0]; string tag = parts[1]; switch(tag) { case "药品": ModifyKey(DataManager.GetInstance().Medicine, name,"药品"); break; case "装备": ModifyKey(DataManager.GetInstance().Equipment, name,"装备"); break; case "物品": ModifyKey(DataManager.GetInstance().Goods, name,"物品"); break; } ModifyKey(whole, name,tag); ReflashBackup(); } public void OnMedicineToggleClick(bool isOn) { if (isOn) isSelectMed = true; else isSelectMed = false; ReflashBackup(); } public void OnEquipmentToggleClick(bool isOn) { if (isOn) isSelectEqi = true; else isSelectEqi = false; ReflashBackup(); } public void OnGoodsToggleClick(bool isOn) { if (isOn) isSelectGoods = true; else isSelectGoods = false; ReflashBackup(); } public void ModifyKey(Dictionary<string, CellItem> cells,string name,string tag) { //先判断是否存在这个Key,没有则add if (cells.ContainsKey(name)) { int count = cells[name].Number; cells[name].Number = count + 1; } else { CellItem cellItem = new CellItem(name,tag,1); cells.Add(name, cellItem); } } public void ReflashBackup() { ClearContent(); InstantiateCell(whole); } public void InstantiateCell(Dictionary<string, CellItem> dictionary) { Dictionary<string, CellItem> SelectObjs = new Dictionary<string, CellItem>(); var selects = from cell in dictionary where (cell.Value.Tag == IsSelectMed() || cell.Value.Tag == IsSelectEqi() || cell.Value.Tag == IsSelectEqi()) select cell; foreach(var select in selects) { SelectObjs.Add(select.Key, select.Value); } foreach (KeyValuePair<string, CellItem> value in SelectObjs) { GameObject cell = GameObject.Instantiate(lattice, content.transform); SetPicture(value.Key, cell); cell.transform.GetChild(0).GetComponent<Text>().text = value.Value.Number.ToString(); } } public void SetPicture(string name,GameObject cell) { //图片资源路径 string path = "Sprite/" + name; Texture2D tex = Resources.Load<Texture2D>(path); Image img = cell.transform.GetComponent<Image>(); Sprite sp = Sprite.Create(tex, new Rect(new Vector2(0, 0), new Vector2(tex.width, tex.height)), new Vector2(0, 0)); img.rectTransform.sizeDelta = new Vector2(sp.rect.width, sp.rect.height); img.sprite = sp; } public void ClearContent() { Transform[] lattices = content.GetComponentsInChildren<Transform>(); foreach (Transform lattice in lattices) { if (lattice.name != "Panel") { lattice.DetachChildren(); GameObject.Destroy(lattice.gameObject); } } } public void SearchItem(string itemName) { ClearContent(); if (whole.ContainsKey(itemName)) { GameObject cell = GameObject.Instantiate(lattice, content.transform); SetPicture(itemName, cell); cell.transform.GetChild(0).GetComponent<Text>().text = whole[itemName].Number.ToString(); } } }

有个问题是，当按名字搜索时，添加道具会执行相应的代码。事实上，当游戏中处于检索时一般是不会触发添加物体这种事件的。

三. 总结

总体来说，本文实现的这个背包系统不算复杂，也有人会问，本文一直在使用 Dictionary whole。而在 DataManager 中定义的三个字典除了存储了信息之外，并没有用到别的地方去，似乎是有点多余。

事实上，本文只是着重介绍整个背包系统的原理才使用了whole，可以更为简洁地说明。读者可以思考一下，如果我有着 10个种类的道具，每种道具都需要一页表来显示。如果我使用whole，那么对whole筛选10遍，重复操作多，浪费资源，而如果我有10个于种类对应的字典则可以直接使用，无需筛选。所以，分类保存是很有必要的。

在下一篇中，我会对这个背包系统进行优化和升级

采用读取配置表来录入道具信息

从单页背包升级分页背包

更为完善的检索系统

码字不易，希望这篇文章能对各位读者有所帮助O(∩_∩)O哈哈~

【UGUI】（三）------- 背包系统（上）之简易单页背包系统及检索功能的实现

一. 拼UI

1.1 在 Resources 文件夹下创建两个子文件夹 Prefab 和 Sprite ，用于存放资源

1.2 创建一个Canvas；

1.3 进行第②中的操作，实现如下效果

1.4 制作背包

1.5 检索UI

1.6 单个道具Item

二. UI逻辑

2.1 物品类

2.2 数据管理类

2.3 UI管理类

三. 总结

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【UGUI】 （三）------- 背包系统（上）之简易单页背包系统及检索功能的实现

一. 拼UI

1.1 在 Resources 文件夹下创建两个子文件夹 Prefab 和 Sprite ，用于存放资源

1.2 创建一个Canvas；

1.3 进行第②中的操作，实现如下效果

1.4 制作背包

1.5 检索UI

1.6 单个道具Item

二. UI逻辑

2.1 物品类

2.2 数据管理类

2.3 UI管理类

三. 总结

热门文章

最新文章

相关电子书

【UGUI】（三）------- 背包系统（上）之简易单页背包系统及检索功能的实现