UGUI 背包
首先我们要做背包，那就肯定需要存储一些信息，比如装备的功能，装备的描述，装备的数值等。
在公司里，一般都是从服务器中获取信息并以解析CSV，Excel或者JSON的形式来获取保存的信息。
所以首先我们应该构建一个数据类来保存我们的物品Item的信息。
数据类
由于背包中物品的类型有许多种，所以我们首先需要构建一个父类来保存它们作为物品共有的信息。（Item类）
- Item类只是一个普通保存信息的类所以不需要继承monobehavior实现Unity中的操作功能。
- 并在其中定义所以物品共有的信息。
Paste_Image.png
- 并为它添加构造函数，和装备类型的枚举值（Protected 可供子类进行修改）。
Paste_Image.png
- 接着我们定义相应的子类。
Paste_Image.png
开始UI设计。
- 在这里首先需要把Canvas Scale缩放的模式改成随着屏幕的大小进行相应的缩放
Paste_Image.png
-
Match属性跟着屏幕的宽度进行改变。
-
添加一个Panel作为存放Item的容器。并为其中添加适当的Grid作为格子的Prefabs，为了实现排序可以使用GridLayoutGroup组件。
Paste_Image.png
- 完成我们的背包UI界面的设计，并将我们里面的每一个Grid作为Prefab，方便以后使用。
Paste_Image.png
实现数据的存取。
设计好UI界面后，现在就该思考如何获得物品以及如何显示出物品。
首先我们如果想要达到取出物品放入格子中的效果，那我们就需要一个Item物品作为Grid格子下的子物体存在。如图：
Paste_Image.png
- 这个Item由两个子物体（Name，Image）组成（外层用空物体包裹，设置好Anchors，以便子物体跟随父物体动态的大小改变）。
Paste_Image.png
做好了Item后将它做成Prefab。我们添加物品的核心就是在格子里创建出Item并根据从数据类Item中取出数据的不同而生成不同的Name和Image显示，我们开始实现。
-
首先我们需要把从服务器得到的数据加载出来。这里直接使用字典来保存，使用按键来模拟服务器获取数据。我们为我们的Canvas添加KnapsackManager的脚本来控制全局。
-
使用Dictionary<int, Item>来进行储存。其中int代表Item类中的Id（因为Id是唯一标识不会重复，数据库中的主键），通过Id作为键来存储Item对象。
Paste_Image.png
- 模拟从服务器中获取数据，定义一个Load方法，并手动实例化对象。（Item的Icon属性作为图片的Path使用）
Paste_Image.png
- 在Awake中调用。
Paste_Image.png
- 取得数据之后，我们下一步应该把它显示到Canvas中出来。也就是存储物品在格子中来。
- 在此之前，我们应该为ItemUI预设添加一个脚本用于定义控制Name和Image显示的接口。
- 为ItemUI预设添加ItemUI脚本,并为它定义控制Name和Image显示的接口。
Paste_Image.png
- 在Unity中将Name（Text组件）和Image（Image组件）拖拽为脚本赋值。
Paste_Image.png
- 作好了接口我们如果想要将物品放入格子中首先需要知道这个Grid中是否已经有物体。只有没有物体的空格子才能存放物体。
- 我们为我们的GridPanel添加一个GridPanelUI脚本用于获取GridPanel中的格子的状态。
- 定义一个获取空格子的方法，只要找到空的格子就返回。
Paste_Image.png
- 将所有格子拖拽赋值。
Paste_Image.png
- 现在开始将物品存放在格子中，定义一个SaveItem方法参数为（int itemId）通过id从字典中取出Item对象。
- 首先我们要先判断字典中是否有这个id对应的Value，如果有，我们也首先判断格子是否已经满了。如果没有满则进行物品的储存。
Paste_Image.png
- 这里将创建物品定义为了一个方法CreateItem。（参数Item为需要存放在格子中的物品，parent为需要存放的父对象）
Paste_Image.png
- 通过ItemUI脚本中的两个接口为它们显示的图片和物品名赋值。这里的ItemIcon对应着Load中实例化生成物品的item.Icon属性用于保存了图片的路径。
Paste_Image.png
Paste_Image.png
- 使用Resoures.Load方法得到Sprite，并给Image组件的Source Image赋值。
Paste_Image.png
- 我们的KnapsackManager作为管理使用单例模式。
Paste_Image.png
- 并在Awake中赋值。
Paste_Image.png
- 定义一个InputDetector类并它的Update中通过按键生成物品查看效果。
Paste_Image.png
- 生成物品的效果：
Paste_Image.png
数据的保存
在格子中存放好物品以后，我们想对位于格子中的物品进行管理，所以我们需要一个格子物品的信息类来进行数据的管理。
- 和以上一个我们也通过使用字典来进行格子中物品的储存和管理。定义一个字典，格子的名称作为key，格子中的子对象作为Value进行储存。由于是数据类需要频繁的进行取出和储存，我们直接定义为静态。
Paste_Image.png
Paste_Image.png
之后我们就可以通过我们的ItemModel类对格子中的物品进行信息显示，拖拽等操作。
网友评论