1: 掌握 sp.Skeleton 组件的使用;
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: 设置动画一次播放完成后的事件;
- cc.Class({
- extends: cc.Component,
- properties: {
- // foo: {
- // default: null, // The default value will be used only when the component attaching
- // to a node for the first time
- // url: cc.Texture2D, // optional, default is typeof default
- // serializable: true, // optional, default is true
- // visible: true, // optional, default is true
- // displayName: 'Foo', // optional
- // readonly: false, // optional, default is false
- // },
- // ...
- // 界面绑定
- ske_anim: {
- type: sp.Skeleton, //
- default: null,
- },
- // end
- },
- // use this for initialization
- 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); // 将我们的动画, 以排队的方式 加入到管道
- },
- // called every frame, uncomment this function to activate update callback
- // update: function (dt) {
- // },
- });
来源: http://www.bubuko.com/infodetail-2969828.html