spine使用BoundingBox实现游戏中的碰撞检测

首先允许我用句脏话发泄一下写这篇文章的心情，当时为了实现这个功能，查了许多资料，也问了不少所谓的大佬（有好多竟然还不知道spine的这个用法。。。），结果还是模棱两可，垃圾、垃圾、垃圾！

因为当时搞这个东西是真的耗费了我不少时间，也可能是我太菜了o(╥﹏╥)o，分享出来方便大家以后少走弯路，话不多说。

需求：

在项目中需要用实现角色的技能，技能的伤害判定一般是由碰撞触发的，而在这个技能的生命周期中，碰撞框Collider并不一定是固定形状的，而且由程序手动添加的碰撞组件（BoxCollider、CircleCollider、polygonCollider）并不一定跟技能动画帧每帧都很切合，所以在spine中有一个边界框的属性定义，在动画师制作技能动画的时候，可以随心所欲的勾连与技能动画碰撞范围相切合的边界框形状，有点类似于polygonCollider，可以勾连任意形状，所以一个技能的生命周期中，碰撞范围可以随意改变。

实现：creator、带有边界框的技能动画（spine）

在场景中新建一节点作为技能节点，命名为skillNode，手动添加渲染组件：SpineSkeleton，将技能动画的.json文件拖入到SpineSkeleton的SkeletonData属性上，选定一个动作执行，然后新建一个脚本代码实现，

重点：在脚本的onLoad函数中动态为技能节点添加polygonCollider组件（也可以在创建skillNode时手动添加，在脚本中获取该组件）

然后再update函数中更新polygonCollider组件的多边形顶点数组Points，代码如下：

onLoad(){

       this.node.addComponent(cc.cc.PolygonCollider);//代码添加PolygonCollider组件

       this.skillSpine=this.node.getComponent(sp.Skeleton);//获得spine组件

       this.isSkillingBox=null；//

}

//每帧更新polygonCollider组件的顶点数组

public update(dt: number): void {

            let slots = (<any>this).skillSpine._skeleton.slots;

            for (let i = 0; i < slots.length; i++) {

                let attachmentVertices = slots[i].attachmentVertices;

                if (attachmentVertices.length > 0) {

                    (<any>this).isSkillingBox = attachmentVertices;

                    if ((<any>this).isSkillingBox) {

                        let polCol = this.node.getComponent(cc.PolygonCollider);

                        polCol.offset.x = slots[i].bone.worldX;

                        polCol.offset.y = slots[i].bone.worldY;

                        let collider = this.node.getComponent(cc.PolygonCollider);

                        while (collider.points.length > (<any>this).isSkillingBox.length / 2) collider.points.pop();

                        for (let i = 0; i < (<any>this).isSkillingBox.length / 2; ++i) {

                            if (collider.points[i]) {

                                collider.points[i].x = (<any>this).isSkillingBox[i * 2];

                                collider.points[i].y = (<any>this).isSkillingBox[i * 2 + 1];

                            } else {

                                collider.points[i] = cc.v2((<any>this).isSkillingBox[i * 2], (<any>this).isSkillingBox[i * 2 + 1]);

                            }

                        }

                    }

                    break;

                }

        }

    }

需要注意的是要提前设定好碰撞分组，这样就可以实现用spine的边界框来实现碰撞了