CocosCreator 2.x Spine动画相关方法

前言

遇到一个涉及在CocosCreator2.4中播放spine动画的问题。

方法

获取当前播放动画的名称

let track: sp.spine.TrackEntry = this.enemySpine.getCurrent(0);
console.log("目前播放的动画为：" + track.animation.name);

设置动画融合

设置动画融合，两动画融合期间不能监听动画结束

//设置动画融合，两动画融合期间不能监听动画结束
this.heroSpine.setMix("idle", "run", 0.2);

播放动画

//播放动画
this.heroSpine.setAnimation(0,"run",false);

获取动画时常等信息

//获取动画信息
let animation: sp.spine.Animation = this.heroSpine.findAnimation('run');

//打印动画时长
console.log(animation.duration);

基础事件监听

//设置动画结束监听
this.heroSpine.setCompleteListener((trackEntry:sp.spine.TrackEntry) => {
	//清空监听
	// this.heroSpine.setCompleteListener(null);
	console.log(trackEntry.animation.name+"动画播放完毕！");
	this.heroSpine.setAnimation(0,"idle",true);
});

自定义帧事件监听

//设置事件监听
this.heroSpine.setEventListener((trackEntry:sp.spine.TrackEntry, event) => {
	//清空监听
	// this.heroSpine.setEventListener(null);
	//动画事件
	console.dir(trackEntry);
	console.dir(event);
	console.log(event.data.name);
});

获取骨骼点位置

let handBone: sp.spine.Bone = this.enemySpine.findBone("fire");
//相对于spine节点(node)的坐标
let handNodePos=cc.v2(handBone.worldX, handBone.worldY);
//转换为cocos世界坐标
let handBonePos = this.enemySpine.node.convertToWorldSpaceAR(cc.v2(handBone.worldX, handBone.worldY));

生成挂点

可以在预制体中提前设置挂点。

这是在运行时动态生成方法

//拿到附加工具
let attachUtil: sp.sp.AttachUtil = this.enemySpine['attachUtil'];
//生成挂点(如果已经生成过了，就不用生成了)
attachUtil.generateAllAttachedNodes();
//拿到所有名叫move的骨骼
let boneNodes = attachUtil.getAttachedNodes("move");
//拿到骨骼对应的cc.Node
let boneNode: cc.Node = boneNodes[0];

动态修改IK约束

//获取骨骼
let bone: sp.spine.Bone = this.heroSpine.findBone("crosshair");

// 拿到IK
let ikConstraint: sp.spine.IkConstraint = bone.skeleton.findIkConstraint('aim-ik');
//解除约束
ikConstraint.mix=0;
//bone.x = 0;
//bone.y = 0;

//播放开枪动作
this.heroSpine.setAnimation(0,"shoot",false);
this.heroSpine.setCompleteListener((trackEntry:sp.spine.TrackEntry) => {
    //修改准星位置
    bone.x=800;
    bone.y=800;
    //添加约束
    ikConstraint.mix=1;
    //播放开枪动作
    this.heroSpine.setAnimation(0,"shoot",true);
});

动态变换约束

旋转约束只需要把transformConstraint.translateMix改成transformConstraint.rotateMix即可。

//获取骨骼
let bone: sp.spine.Bone = this.heroSpine.findBone("crosshair");

// 拿到变换
let transformConstraint = bone.skeleton.findTransformConstraint('move1');
//解除约束
transformConstraint.translateMix = 0;
bone.x = 0;
bone.y = 0;

//添加约束
transformConstraint.translateMix = 1;
bone.x = 800;
bone.y = 800;
//播放跳跃动作
this.heroSpine.setAnimation(0, "jump", false);
this.heroSpine.setCompleteListener((trackEntry: sp.spine.TrackEntry) => {
    if (trackEntry.animation.name == 'jump') {
    	//解除约束
        transformConstraint.translateMix = 0;
        bone.x = 0;
        bone.y = 0;
        this.enemySpine.setAnimation(0, "idle", true);
    }
});

部分源码

const {ccclass, property} = cc._decorator;

@ccclass
export default class SpineTest extends cc.Component {

    /**
     * 英雄的Spine
     *
     * @type {sp.Skeleton}
     * @memberof SpineTest
     */
    @property(sp.Skeleton)
    public heroSpine: sp.Skeleton = null;

    
    start () {

        //设置动画融合，两动画融合期间不能监听动画结束
        // this.heroSpine.setMix("idle", "run", 0.2);

        //播放动画
        this.heroSpine.setAnimation(0,"run",false);

        //获取动画信息
        let animation: sp.spine.Animation = this.heroSpine.findAnimation('run');

        //打印动画时长
        console.log(animation.duration);

        //设置事件监听
        this.heroSpine.setEventListener((trackEntry:sp.spine.TrackEntry, event) => {
            //清空监听
            // this.heroSpine.setEventListener(null);
            //动画事件
            console.dir(trackEntry);
            console.dir(event);
            console.log(event.data.name);
        });

        //设置动画结束监听
        this.heroSpine.setCompleteListener((trackEntry:sp.spine.TrackEntry) => {
            //清空监听
            // this.heroSpine.setCompleteListener(null);
            console.log(trackEntry.animation.name+"动画播放完毕！");
            this.heroSpine.setAnimation(0,"idle",true);
        });
    }
}