《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()函数来实现的，如果新放置的武器和原武器有相交，则将原武器放回。