关于CocosCreator里面导入spine的使用流程

版权声明：⎝⎝⎝MaximilianLiu⎠⎠⎠ https://blog.csdn.net/MaximilianLiu/article/details/79356242

在CocosCreator中运行效果如下图所示:

准备流程:

spine中信息列表:

导出文件:

拖入对应骨骼,然后添加脚本:

脚本如下:

cc.Class({
    extends: cc.Component,
    editor: {
        requireComponent: sp.Skeleton
    },

    properties: {
        mixTime: 0.2
    },

    onLoad() {
        var spine = this.spine = this.getComponent('sp.Skeleton');
        this._setMix('walk', 'run');
        this._setMix('run', 'jump');
        this._setMix('walk', 'jump');

        // .setStartListener()用来设置开始播放动画的事件监听。
        spine.setStartListener(trackEntry => {
            var animationName = trackEntry.animation ? trackEntry.animation.name : "";
            cc.log("[track %s][animation %s] start.", trackEntry.trackIndex, animationName);
        });
        // .setInterruptListener()用来设置动画被打断的事件监听。
        spine.setInterruptListener(trackEntry => {
            var animationName = trackEntry.animation ? trackEntry.animation.name : "";
            cc.log("[track %s][animation %s] interrupt.", trackEntry.trackIndex, animationName);
        });
        // .setEndListener()用来设置动画播放完后的事件监听。
        spine.setEndListener(trackEntry => {
            var animationName = trackEntry.animation ? trackEntry.animation.name : "";
            cc.log("[track %s][animation %s] end.", trackEntry.trackIndex, animationName);
        });
        // .setDisposeListener()用来设置动画将被销毁的事件监听。
        spine.setDisposeListener(trackEntry => {
            var animationName = trackEntry.animation ? trackEntry.animation.name : "";
            cc.log("[track %s][animation %s] will be disposed.", trackEntry.trackIndex, animationName);
        });
        // .setCompleteListener用来设置动画播放一次循环结束后的事件监听。
        spine.setCompleteListener((trackEntry, loopCount) => {
            var animationName = trackEntry.animation ? trackEntry.animation.name : "";
            if (animationName === 'attack') { //如果当前为射击状态,立马清除
                // .clearTrack(对应状态数字)清除出指定 track 的动画状态。
                this.spine.clearTrack(1);
            }
            cc.log("[track %s][animation %s] complete: %s", trackEntry.trackIndex, animationName, loopCount);
        });
        // .setEventListener()用来设置动画播放过程中帧事件的监听。
        spine.setEventListener((trackEntry, event) => {
            var animationName = trackEntry.animation ? trackEntry.animation.name : "";
            cc.log("[track %s][animation %s] event: %s, %s, %s, %s", trackEntry.trackIndex, animationName, event.data.name, event.intValue, event.floatValue, event.stringValue);
        });

        this._hasStop = false;

        // var self = this;
        // cc.eventManager.addListener({
        //     event: cc.EventListener.TOUCH_ALL_AT_ONCE,
        //     onTouchesBegan () {
        //         self.toggleTimeScale();
        //     }
        // }, this.node);
    },

    // OPTIONS

    toggleDebugSlots() {
        // .debugSlots是否显示 slot 的 debug 信息。
        this.spine.debugSlots = !this.spine.debugSlots;
    },

    toggleDebugBones() {
        // .debugBones是否显示 bone 的 debug 信息。
        this.spine.debugBones = !this.spine.debugBones;
    },

    toggleTimeScale() {
        // .timeScale当前骨骼中所有动画的时间缩放率。
        if (this.spine.timeScale === 1.0) {
            this.spine.timeScale = 0.3;
        } else {
            this.spine.timeScale = 1.0;
        }
    },

    // ANIMATIONS

    stop() {
        // .clearTrack(对应状态数字)清除出指定 track 的动画状态。
        this.spine.clearTrack(0);
        this._hasStop = true;
    },

    walk() {
        // .setAnimation(trackIndex,name,loop)设置当前动画。队列中的任何的动画将被清除。返回一个 sp.spine.TrackEntry 对象。
        this.spine.setAnimation(0, 'walk', true);
        this._hasStop = false;
    },

    run() {
        // .setAnimation(trackIndex,name,loop)设置当前动画。队列中的任何的动画将被清除。返回一个 sp.spine.TrackEntry 对象。
        this.spine.setAnimation(0, 'run', true);
        this._hasStop = false;
    },

    jump() {
        // .animation当前播放的动画名称。
        var oldAnim = this.spine.animation;
        // .setAnimation(trackIndex,name,loop)设置当前动画。队列中的任何的动画将被清除。返回一个 sp.spine.TrackEntry 对象。
        this.spine.setAnimation(0, 'jump', false);
        if (oldAnim && !this._hasStop) {
            this.spine.addAnimation(0, oldAnim === 'run' ? 'run' : 'walk', true, 0);
        }
    },

    crouch() {
        // .setAnimation(trackIndex,name,loop)设置当前动画。队列中的任何的动画将被清除。返回一个 sp.spine.TrackEntry 对象。
        this.spine.setAnimation(0, 'crouch', true);
        this._hasStop = false;
    },

    head_turn() {
        // .setAnimation(trackIndex,name,loop)设置当前动画。队列中的任何的动画将被清除。返回一个 sp.spine.TrackEntry 对象。
        this.spine.setAnimation(0, 'head-turn', true);
        this._hasStop = false;
    },

    fall() {
        // .setAnimation(trackIndex,name,loop)设置当前动画。队列中的任何的动画将被清除。返回一个 sp.spine.TrackEntry 对象。
        this.spine.setAnimation(0, 'fall', true);
        this._hasStop = false;
    },

    idle() {
        // .setAnimation(trackIndex,name,loop)设置当前动画。队列中的任何的动画将被清除。返回一个 sp.spine.TrackEntry 对象。
        this.spine.setAnimation(0, 'idle', true);
        this._hasStop = false;
    },

    // crouch() {
    //     // .animation当前播放的动画名称。
    //     var oldAnim = this.spine.animation;
    //     // .setAnimation(trackIndex,name,loop)设置当前动画。队列中的任何的动画将被清除。返回一个 sp.spine.TrackEntry 对象。
    //     this.spine.setAnimation(0, 'crouch', false);
    //     if (oldAnim && !this._hasStop) {
    //         this.spine.addAnimation(0, oldAnim === 'run' ? 'run' : 'walk', true, 0);
    //     }
    // },

    attack() {
        // .setAnimation(trackIndex,name,loop)设置当前动画。队列中的任何的动画将被清除。返回一个 sp.spine.TrackEntry 对象。
        this.spine.setAnimation(1, 'attack', false);
    },

    _setMix(anim1, anim2) {
        // .setMix()为所有关键帧设定混合及混合时间（从当前值开始差值）。
        this.spine.setMix(anim1, anim2, this.mixTime);
        this.spine.setMix(anim2, anim1, this.mixTime);
    }
});