cocoscreator播放Spine动画

1.创建2D空工程 

2.工程打开默认场景,默认场景中已添加画布

3.在画布中添加空节点

4.命名节点为NodeSke

 5.添加骨骼动画(Spine)组件到空节点上

添加成功后,点击NodeSke节点,可看到属性检查器上已添加了sp.Skeleton节点 

6.将Spine动画文件夹拖到assets目录

 展开Spine动画目录girl可看到相关动画文件

7.将Spine动画json文件拖到Skeleton Data中

选择指定皮肤

 选择皮肤后,场景中空节点出现动画画布

8.调整动画位置

 动画位置调整OK

 保存刚才制作的场景为main

9.选中摄影机,并切换Layer为UI_2D,可看到摄影机已将场景中画布渲染出来了 

10.点击预览在浏览器中查看效果

11.选中空节点NodeSke,然后在右边的属性检查器中选择要默认播放的动画

现在,浏览器中可看到Spine动画已自动播放了

12.通过脚本控制动画播放,停止,及切换动画皮肤

     a.添加脚本文件

b.为NodeSke节点添加自定义脚本 

 c.双击脚本打开VSCODE并在girl.ts中添加播放动画与停止动画方法

d.节点与变量关联

 将节点拖入变量

 e.添加动画控制按钮

 f.为按钮添加变量关联

g.为按钮添加点击事关联 

 

编码实现Spine动画播放,停止,换肤功能 

//播放动画
    playAnimation(){
        this.SkeObj.setAnimation(0,"dance",true);
    }
    //停止动画
    stopAnimation(){
       let SpEnt:sp.spine.TrackEntry =  this.SkeObj.setAnimation(0,"dance",true);
       SpEnt.animationStart = SpEnt.animationEnd;
    }
    //换肤
    changeSkin() {
        const skins =['girl', 'boy', 'girl-blue-cape', 'girl-spring-dress'].map(x=> `full-skins/${x}`);
        this.skinId = (this.skinId + 1) % skins.length;
        this.SkeObj!.setSkin(skins[this.skinId]);
    }

 演示:

微视