装备系统学习--GameGrind教程

怎样自己用素材做一个装备系统：包括背包面板、物品格子、物品装备；装备放入背包；在背包内移动、交换、叠加装备.
恩，事实证明这不是B站UP主李三影原创，完全照抄自GameGrind却提都没提，Shame On You！改标题！
--------------------------------------------------------------

1.建立装备信息的JSON文件并读取

JSON是一种数据交互格式，在unity里使用JSON文件前先下载一个LitJSON的插件并导入到Assets下（插件下载地点见李三影的教程下方说明）。
然后在Assets文件夹下新建文件夹StreamingAssets，注意这个文件夹的名称要区分大小写，拼写要完全相同（case-sensitive）。这个文件夹下的文件我们在其他脚本内读取路径时不会随着工程文件夹（比如打包后）的移动而读取失败。
在StreamingAssets文件夹内新建一个文本文档命名为Item，并把后缀改成json（后缀不区分大小写），就创建了一个用来存装备数据的JSON文件。
然后VS打开该JSON文件并按下图输入，注意格式（英文""和英文, 每项装备以{},分隔）：



输入完毕后保存回到unity新建Scripts文件夹并新建ItemDataBase c#脚本（用来读取JSON文件信息），打开并编辑





保存后回到unity测试。在当前示范json文件内所有条目都是字母的，debug时没有问题。但如果条目有中文，debug出来的是乱码（并不是有bug），是因为中文编码问题（GB2312）。解决方法是在VS内点击高级保存选项(要调用高级保存选项在视图→工具栏→自定义→命令→添加命令→文件→高级保存选项），将json文件保存为（Unicode（UTF-8带签名））格式。

2.制作仓库，格子和装备的prefab

Assets下新建Sprites文件夹，将要用的素材拖入（素材下载见教程），要注意的是拖入的素材一般是PNG格式，我们在Inspector下改成sprite（2D and UI）



记得点击sprite editor把素材的边切一下（拖动四周的绿线），为了之后改变填充模式时使边缘始终保持高的清晰度



Hierarchy下新建Panal（把Canvas的模式射程WorldSpace可修改Canvas的大小），拖动到合适的大小并设置为center（不按shift 或 alt），方便移动。将合适的素材拖入image source，并把透明度拉到最右，image type选为tiled。


Panal下新建两个panal命名为title panel（顶方的标题）和slot panel （装备区）。删掉slot panel的image组件，并添加Grid Layout Group组件（用来约束格子的排列）。
再在slot panel下新建panel命名为slot（即装备格子），拖入素材，设为不透明，填充模式为tiled。Ctrl+D复制一堆格子（多少取决于策划定的背包格数，此例是20）看看效果并调整。

Grid Layout Group组件，Cell Size设为80,80（用来约束格子的大小），Pedding下的Left改成10（用来设定边距），Spacing为10,10（格子间的间距）。然后按设置好的值计算Panal的大小回去设置Panal为（370,490）。



然后把title panal的image也拖入并设成tiled，调整到合适的大小。然后在title panal下加UI→Text，text内容改为Inventory，设为两个居中，字号改大一些，Font style改成Bold。并调整一下位置。



再来做装备，在slot下新建image命名为Item，拖入素材，改大小为60,60。
然后先把Item拖入Prefabs，再删除slot下的Item并拖入成预制件后并删除（如果以后有需要呼出背包，就把Panal整体存为prefab后在Hierarchy下删除）
可参考：https://www.jianshu.com/p/4608c6cbdb1f

3. 脚本实现铺设格子，添加装备和装备叠加

在Hierarchy下新建空对象命名为ItemDataBase用来加载之后的脚本。
Scripts下新建C# Inventory、ItemData和InventorySlot脚本
Inventory（背包、装备栏脚本。主体功能是装备生成在格子上）：







注意是放在ItemDataBase对象上。

教程上面是指定一个id的添加，通常会有一个装备List需要一 一添加时，用双层循环.

内层和教程一样用break来跳出该层循环，以保证所有空格不被一个物品占据。
参考：https://blog.yowko.com/2017/02/c-sharp-break-continue-goto-return.html





参考上还有关于continue，goto，return的分析，有需要可看。

装备叠加有需要的话在PART4，可回看，13分钟。



ItemData（主体功能是装备跟随鼠标拖动）：挂在Item prefab上
注意此时Item prefab要加Layout Element组件，并勾选Ignore Layout





然后在Item Prefab上加Canvas Group组件。



Canvas Group组件的说明：



再在拖拽的脚本ItemData上加上如下语句：



InventorySlot（主体功能是装备拖动到新格子和两个装备交换格子）：



测试后发现，还是只能拖拽，不能移动格子到新格子。debug后发现是因为OnDrop顶掉了OnEndDrug（至于怎样Debug出的参考教程PART5b10分钟之后），所以修改拖拽脚本ItemData：



然后在InventorySlot（移动格子和交换）上新增：



再测试，成功移动。但是不能拖拽回原来的格子，因为我们还没有清空A格子。
。。。太烦了，直接看最后的完整代码吧。

4.点击装备弹出装备信息框（tooltip）

Canvas下新建Image命名为Tooltip，添加子对象Text用来显示信息。
给Tooltip添加Content Size Fitter以自适应Text内容（随着text内容增多变少信息框变大变小），选择Vertical Fit 为Preferred Size。
添加了之后发现Tooltip看不到了，接着添加Horizontal Layout Group。设置一个Padding（按自己需求，这里是7777）.拖入信息框背景图。



新建脚本命名为Tooltip打开并编辑：



再在ItemData脚本里添加接口，打开并编辑：





保存后测试发现鼠标放在装备图片上就显示信息框，离开就消失。但信息框一直疯狂闪烁，因为一直在更新鼠标的raycast。还有就是信息框刚好在鼠标的正中间，我们想让它偏一点不要挡住本装备图片。
（拖动item到卖出图片上也是没反应是因为上面的Text阻挡了Raycast，所以Image下Text的Raycast Target都要取消勾选。）



所以Tooltip游戏下添加Canvas Group组件，取消勾选Interactable和Blocks Raycasts（解决闪烁问题）。再把Anchors的Pivot改右一点，比如（-0.1, 1）按自己的需求改。

5.出售装备

参考自：https://blog.kinpzz.com/2016/05/21/unity3d-ugui-Inventory/
新建图片命名为SellImage，调整位置到合适的地方，比如装备区的旁边。设置好合适的图片。



思路是拖动时EventSystem读取碰到的GameObject的名字。
如果名字是SellImage，就弹出对话框，问是否卖出。
点YES就销毁该Item并更新List，然后关闭对话框。如果点NO该Item回到原位，然后关闭对话框。

新建脚本DestroyItem，挂到ItemDataBase游戏对象上（在这里一定注意别挂在Slot或Item等不在Scene里的Prefab上，运行的时候Start里GetComponent引用不出来的。昨天在Tooltip上就没注意，今天在DestroyPopup又忘了。）
挂上脚本后在里面添加：



然后在ItemData脚本（drag脚本）里添加：





之后接着编写DestroyItem脚本：



回到Unity，在Canvas下新建Image，命名为DestroyItemPopup，设置Tag为同名Tag。
拖好Text和两个按钮，把按钮对应的方法拖入。（一定注意在运行前该对话框不在隐藏状态）

最后的完整代码：

ItemDataBase（读取JSON）：




Inventory（铺格子，添加装备）：







ItemData代码：装备跟随鼠标移动





InventorySlot代码：装备移动和交换



Tooltip弹出框代码：弹出装备信息框



DestoryItem：容纳“卖出确认”弹出框的Yes & No按钮的调用方法