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) {

// },

總結

以上是生活随笔為你收集整理的android 骨骼动画库,cocos creator spine骨骼动画组件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。