cocoscreator 第十二章骨骼动画组件使用

最新推荐文章于 2025-05-28 12:48:07 发布

qq_18643343

最新推荐文章于 2025-05-28 12:48:07 发布

阅读量893

点赞数

CC 4.0 BY-SA版权

分类专栏： cocoscreator

本文链接：https://blog.youkuaiyun.com/qq_18643343/article/details/86587303

cocoscreator 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了CocosCreator中如何使用spine骨骼动画工具，包括骨骼动画的概念、sp.Skeleton组件的详细设置，如Skeleton Data、Default Skin、Animation等属性，并讲解了如何播放和控制动画，如添加动画、清除动画监听。此外，还阐述了动画事件监听，如设置动画开始、结束和完整播放的监听器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

spine骨骼动画工具

1: 骨骼动画: 把动画打散, 通过工具，调骨骼的运动等来形成动画

2: spine是一个非常流行的2D骨骼动画制作工具

3: spine 动画美术人员导出3个文件: (1) .png文件:动画的”骨骼”的图片集;

(2).atlas文件: 每个骨骼在图片集里面位置，大小;

(3).json文件: 骨骼动画的anim控制文件,以及骨骼位置等信息;

4: 骨骼动画导入: 直接把三个文件拷贝到项目的资源目录下即可;

5: 使用骨骼动画: (1) 直接拖动到场景;

(2) 创建一个节点来添加sp.Skeleton组件;

sp.Skeleton

1: sp.Skeleton: 控制面板属性:Skeleton Data: 骨骼的控制文件.json文件;

Default Skin: 默认皮肤;

Animation: 正在播放的动画;

Loop: 是否循环播放;

Premuliplied Alpha 是否使用贴图预乘;

TimeScale: 播放动画的时间比例系数;

Debug Slots: 是否显示 Slots的调试信息;

Debug Bone: 是否显示Bone的调试信息;

2: sp.Skeleton重要的方法: Skeleton是以管道的模式来播放动画，管道用整数编号，管道可以独立播放动画Track;

(1)clearTrack(trackIndex): 清理对应Track的动画

(2)clearTracks(); 清楚所有Track动画

(3)setAnimation(trackIndex, “anim_name”, is_loop)清楚管道所有动画后，再从新播放

(4)addAnimation(trackIndex, “anim_name”, is_loop);往管道里面添加一个动画;

动画事件监听

1: setStartListener: 设置动画开始播放的事件;

2: setEndListener : 设置动画播放完成后的事件;

3: setCompleteListener: 设置动画一次播放完成后的事件;

/////////////////////////////////////////////////////////////////////////////////////////////////////////

onLoad: function () {
    // 代码获取
    var spine = this.node.getChildByName("spine");
    var ske_com = spine.getComponent(sp.Skeleton);
    this.ske_com = ske_com;

    this.ske_com.setStartListener(function() {
        console.log("anim started");
    });

    this.ske_com.setEndListener(function() {
        console.log("anim end");
    });

    this.ske_com.setCompleteListener(function() {
        console.log("play once");
    });
},

enter_click: function() {
    // 清理动画播放管道, 索引来表示
    // this.ske_com.clearTracks(); // 清理所有播放队列的动画
    this.ske_com.clearTrack(0); // 指定管道的索引
    // end

    // step1, 播放我们的入场动画
    this.ske_com.setAnimation(0, "in", false); // 把管道清空，加入当前这个，
    this.ske_com.addAnimation(0, "idle_1", true); // 将我们的动画，以排队的方式 加入到管道
    // end

    // step2: 播放我们的idle
    // end 
},

click1_anim_click: function() {
    this.ske_com.clearTrack(0); // 指定管道的索引
    this.ske_com.setAnimation(0, "clk_1", false); // 把管道清空，加入当前这个，
    this.ske_com.addAnimation(0, "idle_1", true); // 将我们的动画，以排队的方式 加入到管道
},

click2_anim_click: function() {
    this.ske_com.clearTrack(0); // 指定管道的索引
    this.ske_com.setAnimation(0, "clk_1", false); // 把管道清空，加入当前这个，
    this.ske_com.addAnimation(0, "idle_1", true); // 将我们的动画，以排队的方式 加入到管道
},