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] https://docs.cocos.com/creator/manual/zh/scripting/class.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
// - [English] https://www.cocos2d-x.org/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 = this.node.getChildByName("spine");
this.ske_comp = spine.getComponent(sp.Skeleton);

//事件
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) {},
});
---------------------