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

在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);
        }
    });
————————————————
版权声明：本文为CSDN博主「MaximilianLiu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/MaximilianLiu/article/details/79356242