【 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，代表物品类。一个道具（物品），通常都会有 名字，所属种类，数量，价格等属性，而这里的话&#x