【Spine】Spine使用二姿势、事件、边界框、皮肤、IK约束、路径约束、网格

一姿势

spine文档-姿势

1 在层级数中按ctrl+鼠标左键选中3个骨骼。

2 点击左下方的姿势按钮，在骨骼的末端会出现红色的圆圈。

3 拖动圆圈可以调整骨骼姿势，3个骨骼会一同随着骨骼关节变化。

二事件

spine文档-事件

1 选择层级树中的事件，选择下方的新建，新建一个事件名hit。

2 移动时间轴上蓝色图标选择需要触发事件的帧，点击层级树hit事件左边的钥匙，即可在当前时间轴创建一个事件关键帧。

代码中监听事件

setCompleteListener 监听动画完成，动画每播放一次都会触发一次

setEventListener 监听自定义事件，当播放到hit所在帧时触发一次

const { ccclass, property } = cc._decorator;

@ccclass
export default class SpineTest extends cc.Component {

    @property({ type: sp.Skeleton, tooltip: "spine动画" })
    spine: sp.Skeleton = null;

    onLoad() {
        this.spine.setAnimation(0, "animation", true);
        this.spine.setCompleteListener((trackEntry, loopCount) => {
            let name = trackEntry.animation.name;
            console.log("动画完成:", name);  //输出 "动画完成: animation"
        });
        this.spine.setEventListener((trackIndex, event) => {
            let name = event.data.name;
            console.log("触发事件:", name);  //输出 "触发事件: hit"
        });
    }
}

在事件时间轴上选择紫色关键帧，按delete键可删除事件

三边界框

spine文档-边界框

边界框可用于碰撞检测判断等。

切换到设置

选择层级数下方的新建，选择边界框。

在场景中绘制一个边界框，命名为box，边界框是可以绘制成任意多边形的，不一定是矩形。

将边界框放在第3个骨骼下，这样边界框可跟随骨骼移动和旋转。

代码中获取这个边界框，并打印边界框四个顶点位置

getAttachment(插槽名，边界框名)

computeWorldVertices() 转换世界位置，将边界框顶点从插槽父容器局部位置转换成距离骨骼动画原点的世界位置。例如边界框左上顶点在cocos中的位置就是（spine.node.x + vecs[0].x， spine.node.y + vecs[0].y）

const { ccclass, property } = cc._decorator;

@ccclass
export default class SpineTest extends cc.Component {

    @property({ type: sp.Skeleton, tooltip: "spine动画" })
    spine: sp.Skeleton = null;

    onLoad() {
        this.spine.setAnimation(0, "animation", true);
    }

    update() {
        //获取骨骼动画上的挂件
        let attachment = this.spine.getAttachment('box', "box")
        //获取box骨骼
        let slot = this.spine.findSlot("box");
        //获取box的顶点数组
        let arr = {}
        let data = attachment.computeWorldVertices(slot, 0, attachment.worldVerticesLength, arr, 0, 2)
        //将顶点转成vec2数组
        let vecs: cc.Vec2[] = [];
        for (let i = 0; i < 4; i++) {
            let vec: cc.Vec2 = new cc.Vec2();
            vec.x = Math.round(arr[i * 2]);
            vec.y = Math.round(arr[i * 2 + 1]);
            vecs.push(vec);
        }
        //打印顶点
        let str = "";
        for (let i = 0; i < vecs.length; i++) {
            str += "(" + vecs[i].x + "," + vecs[i].y + ")";
        }
        console.log(str);
    }
}

打印信息如下。可以用cc.Intersection.polygonPolygon等API进行碰撞检测。

四皮肤

spine文档-皮肤

切换到设置界面，新建皮肤

创建skin1和skin2

选择插槽root，选择新建-创建皮肤占位符，命名为body

把图片body拖动到皮肤占位符body下，表示在skin1皮肤时，body这个插槽会显示图片body。

选择皮肤skin2，把图片hand拖动到皮肤占位符body下，表示在skin2皮肤时，body这个插槽会显示图片hand。

代码中切换皮肤skin1和skin2

const { ccclass, property } = cc._decorator;

@ccclass
export default class SpineTest extends cc.Component {

    @property({ type: sp.Skeleton, tooltip: "spine动画" })
    spine: sp.Skeleton = null;

    private count = 0;

    onLoad() {
        this.node.on(cc.Node.EventType.TOUCH_END, () => {
            this.count++;
            if (this.count % 2 == 0) {
                this.spine.setSkin("skin1");
            } else {
                this.spine.setSkin("skin2");
            }
        }, this);
    }
}

切换效果　