spine⾻骼动画组件使⽤详解
1. spine⾻骼动画⼯具
⾻骼动画: 把动画打散, 通过⼯具，调⾻骼的运动等来形成动画
spine是⼀个⾮常流⾏的2D⾻骼动画制作⼯具
spine 动画美术⼈员导出3个⽂件:
(1) .png⽂件：动画的”⾻骼”的图⽚集;
(2).atlas⽂件: 每个⾻骼在图⽚集⾥⾯位置，⼤⼩;
(3).json⽂件: ⾻骼动画的anim控制⽂件，以及⾻骼位置等信息;
⾻骼动画导⼊: 直接把三个⽂件拷贝到项⽬的资源⽬录下即可;
使⽤⾻骼动画 2种⽅式:
(1) 直接拖动到场景;
(2) 创建⼀个节点来添加sp.Skeleton组件;
2. sp.Skeleton
sp.Skeleton: 控制⾯板属性:
Skeleton Data: ⾻骼的控制⽂件.json⽂件;
Default Skin: 默认⽪肤;
Animation:  正在播放的动画;
Loop: 是否循环播放;
Premuliplied Alpha 是否使⽤贴图预乘;
TimeScale: 播放动画的时间⽐例系数;
Debug Slots: 是否显⽰ Slots的调试信息;
Debug Bone: 是否显⽰Bone的调试信息;
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)；往管道⾥⾯添加⼀个动画;
3. 动画事件监听
setStartListener: 设置动画开始播放的事件;
setEndListener : 设置动画播放完成后的事件;
setCompleteListener: 设置动画⼀次播放完成后的事件;
代码⽰例: game_scene.js
// Learn cc.Class:
// - [Chinese] s/creator/manual/zh/scripting/class.html
// - [English] /creator/manual/en/scripting/class.html
// Learn Attribute:
// - [Chinese] s/creator/manual/zh/scripting/reference/attributes.html
// - [English] /creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - [Chinese] s/creator/manual/zh/scripting/life-cycle-callbacks.html
// - [English] /docs/creator/manual/en/scripting/life-cycle-callbacks.html
cc.Class({
extends: cc.Component,
properties: {
/
/ foo: {
// // ATTRIBUTES:
// default: null, // The default value will be used only when the component attaching
// // to a node for the first time
// type: cc.SpriteFrame, // optional, default is typeof default
// serializable: true, // optional, default is true
// },
// bar: {
// get () {
// return this._bar;
// },
/
/ set (value) {
// this._bar = value;
// }
// },
//编辑器绑定
ske_anim: {
type: sp.Skeleton,
default: null,
},
},
// LIFE-CYCLE CALLBACKS:
onLoad () {
//代码获取
var spine = ChildByName("spine");
this.ske_comp = Component(sp.Skeleton);
//事件
html animation属性
this.ske_comp.setStartListener(function() {
console.log("play start ");
});
this.ske_comp.setCompleteListener(function() {
console.log("play once ");
});
},
enter_click() {
//清理动画播放管道
// this.ske_comp.clearTracks();
this.ske_comp.clearTracks(0);//指定管道的索引
//end
//step1 播放⼊场动画
this.ske_comp.setAnimation(0, "in", false); //将管道清空，再加⼊this.ske_comp.addAnimation(0, "idle_1", true); //直接加⼊管道队列//end
//step 播放我们的idle
},
start () {
},
// update (dt) {},
});
---------------------

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。