Topwo博客-CocosCreator使用spine的流程

您现在的位置是：Topwo博客>>Cocos文章

CocosCreator使用spine的流程

发布时间：2022-02-09作者：Topwo来源：原创点击：371

### 在CocosCreator中运行效果如下图所示:
![](http://uploadqn.topwo.com/topwo_site/3b6c5104518b2b765bc6176f09935392.gif)

### 1. spine中信息列表:
![](http://uploadqn.topwo.com/topwo_site/2211b93a3d2a76c3c440ec144421abe0.png)

### 2. 导出文件:
![](http://uploadqn.topwo.com/topwo_site/6a52fffd2f307095d0c63dffcdc97c8a.png)

### 3. 拖入对应骨骼,然后添加脚本:
![](http://uploadqn.topwo.com/topwo_site/ce551096a0c509370bc87a376037f3db.png)

### 4. 脚本如下:
```javascript
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);
    }
});
```

上一篇：Android内存泄露检测之LeakCanary的使用

下一篇：解决Android studio方法数超过65536的问题