本文主要是介绍《Cocos Creator游戏实战》背包英雄中的背包功能实现原理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在线体验地址
https://la-vie-est-belle.github.io/backpack/
Cocos Store 购买地址：
https://store.cocos.com/app/detail/6665
运行效果
开发环境
- 编辑器版本：3.8.3
- 开发语言：TypeScript
实现思路
首先来看下我们在层级管理器中创建了哪些节点。
1. Backpack节点是一个布局节点，上面挂有Layout组件，布局类型是Grid。我们给他加了9个grid item精灵子节点，于是就出现了一个9宫格背包。
2. Backpack Cover节点是一个空节点，它永远跟Backpack节点一样大，且位置相同。武器在放入背包时，其实是添加到这个节点上的。
3. Weapon Layout节点就是最初展示各个武器的节点。
4. 当武器被拖入背包时，背包中的对应位置的网格需要显示成不一样的颜色。这点功能可以通过getBoudingBoxToWorld()和math.intersection()函数实现。前者获取当前节点所在的矩形区域，后者可以计算两个矩形区域的相交区域。
注：因为武器节点weaponItem在Weapon Layout节点中，而网格节点grid Item是在Backpack节点下，所以为了判断两个矩形区域是否相交，必须在世界坐标下进行判断。如果两种节点在同一父节点下，那么使用
getBoudingBox()即可。
5. 当某个武器放在另一个武器上时，原武器会重新返回Weapon Layout节点，同样这个替换功能是通过math.intersection()函数来实现的，如果新放置的武器和原武器有相交，则将原武器放回。
这篇关于《Cocos Creator游戏实战》背包英雄中的背包功能实现原理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
