怎样自己用素材做一个装备系统:包括背包面板、物品格子、物品装备;装备放入背包;在背包内移动、交换、叠加装备.

恩,事实证明这不是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按钮的调用方法

装备系统学习--GameGrind教程相关推荐

  1. Unity3D 装备系统学习Inventory Pro 2.1.2 基础篇

    前言 前一篇 Unity3D 装备系统学习Inventory Pro 2.1.2 总结 基本泛泛的对于Inventory Pro 这个插件进行了讲解,主要是想提炼下通用装备系统结构和类体系.前两天又读 ...

  2. 推荐一个opengl系统学习的教程

    由于opengl的版本特别多,而且opengl 1.x和opengl2.x及以后的版本差别有特别大,刚开始自学的时候难免会走一些误区,发现学的并不是自己所用的. 前者是固定管线,渲染流程的相关概念都比 ...

  3. 全网最全系统学习爬虫教程,用爬虫进行数据分析(bs4,xpath,正则表达式)

    1.bs4解析基础 2.bs4案例 3.xpath解析基础 4.xpath解析案例-4k图片解析爬取 5.xpath解析案例-58二手房 6.xpath解析案例-爬取站长素材中免费简历模板 7.xpa ...

  4. caffe linux 教程,Caffe 深度学习入门教程 - 安装配置Ubuntu14.04+CUDA7.5+Caffe+cuDNN_Linux教程_Linux公社-Linux系统门户网站...

    安装配置Ubuntu14.04+CUDA7.5+Caffe+cuDNN 一.版本 Linux系统:Ubuntu 14.04 (64位) 显卡:Nvidia K20c cuda: cuda_7.5.18 ...

  5. 云计算学习路线教程大纲课件:部署论坛系统Discuz

    云计算学习路线教程大纲课件:部署论坛系统Discuz: 一.基础环境[已完成] [root@apache ~]# sed -ri '/^SELINUX=/cSELINUX=disabled' /etc ...

  6. Jetson Xavier NX学习笔记(三)系统烧录+开机教程+YOLOv7环境搭建+错误总结(详细版)

    Jetson Xavier NX 系统烧录+开机教程+YOLOv7环境搭建+错误总结(详细版) 文章目录 Jetson Xavier NX 系统烧录+开机教程+YOLOv7环境搭建+错误总结(详细版) ...

  7. CocosCreator知识库amp;amp;lt;二amp;amp;gt;关于TiledMap的系统学习教程(阶段性更新)

    CocosCreator知识库<二>关于TiledMap的系统学习教程<26/12/2017>(长期更新,看不懂先大致总体搞一遍,然后回头细看)                 ...

  8. Linux C/C++ 零基础学习编程教程,Linux 系统编程教程

    从事 Linux 系统软件开发十余载,整理多套 Linux C/C++程序设计,Linux 系统编程的教程和实践项目,希望能够和更多的读者一起学习!       更多的资料,可以访问作者的博客网站: ...

  9. 系统架构设计师教程-学习-记录(1)系统架构师知识结构

    系统架构设计师教程-学习-记录(1)系统架构师知识结构 初 记 系统架构师知识结构 系统架构师具备的能力 初 欢迎进qq群交流:546496965 学习<系统架构设计师教程>,初心是为了学 ...

最新文章

  1. 转行python经验_【经验分享】转行如何自学Python并且找到工作,分享自己心得
  2. Mysql安装及入门
  3. 关于Android模拟器访问本地地址(转)
  4. Centos 7 下安装PHP7.2(与Apache搭配的安装方式)
  5. 用html5做一个简单的作品,html5 canvas 简单画板实现代码
  6. 怎么用计算机算账单,电脑如何快速调出计算器
  7. Python之常用模块(3)
  8. 微软云中国策略的下一步:驱动AI生态
  9. DELL RAID卡管理工具 MegaRAID Storage Manager(偏重RAID常用管理命令)
  10. Java类图(记录/转)
  11. 《程序员的自我修养》学习笔记之温故而知新
  12. Android中怎么破解游戏之修改金币数
  13. vue开发抽取组件方式思路
  14. linux下write()和read()函数详解
  15. Android SDK Android NDK 官方下载地址(zt)
  16. 02.国际标准文件查询
  17. Washing Text Animation
  18. Centos7安装trash-cli
  19. u盘中的android文件夹图标不显示了,u盘里的文件夹不显示,u盘文件夹不见了
  20. Linux图形子系统之GEM内存管理

热门文章

  1. python实现Moaic数据增强
  2. 分账系统多少钱?是如何收费的?
  3. php900塞孔油墨_HDI树脂油墨塞孔工艺研究
  4. 电商技术架构演进过程——具体到每一个技术
  5. 推荐系统学习笔记-冷启动
  6. EBS R12多组织的实现原理
  7. h5公众号调取微信扫一扫功能,处处都是坑~
  8. 2022年5月9日-10日 复盘计划
  9. window API播放pcm格式音频文件,函数waveOutOpen等
  10. VISIO使用技巧汇总