1: 掌握sp.Skeleton組件的使用;
spine骨骼動(dòng)畫工具
1: 骨骼動(dòng)畫: 把動(dòng)畫打散, 通過工具，調(diào)骨骼的運(yùn)動(dòng)等來形成動(dòng)畫
2: spine是一個(gè)非常流行的2D骨骼動(dòng)畫制作工具
3: spine 動(dòng)畫美術(shù)人員導(dǎo)出3個(gè)文件:
(1) .png文件:動(dòng)畫的”骨骼”的圖片集;
(2).atlas文件: 每個(gè)骨骼在圖片集里面位置，大小;
(3).json文件: 骨骼動(dòng)畫的anim控制文件,以及骨骼位置等信息;
4: 骨骼動(dòng)畫導(dǎo)入: 直接把三個(gè)文件拷貝到項(xiàng)目的資源目錄下即可;
5: 使用骨骼動(dòng)畫:
(1) 直接拖動(dòng)到場景;
(2) 創(chuàng)建一個(gè)節(jié)點(diǎn)來添加sp.Skeleton組件;
sp.Skeleton
1: sp.Skeleton: 控制面板屬性:
Skeleton Data: 骨骼的控制文件.json文件;
Default Skin: 默認(rèn)皮膚;
Animation: 正在播放的動(dòng)畫;
Loop: 是否循環(huán)播放;
Premuliplied Alpha 是否使用貼圖預(yù)乘;
TimeScale: 播放動(dòng)畫的時(shí)間比例系數(shù);
Debug Slots: 是否顯示 Slots的調(diào)試信息;
Debug Bone: 是否顯示Bone的調(diào)試信息;
2: sp.Skeleton重要的方法: Skeleton是以管道的模式來播放動(dòng)畫，管道用整數(shù)編號(hào)，管道可以獨(dú)立播放動(dòng)畫，Track;
(1)clearTrack(trackIndex): 清理對(duì)應(yīng)Track的動(dòng)畫
(2)clearTracks(); 清楚所有Track動(dòng)畫
(3)setAnimation(trackIndex, “anim_name”, is_loop)清楚管道所有動(dòng)畫后，再從新播放
(4)addAnimation(trackIndex, “anim_name”, is_loop);往管道里面添加一個(gè)動(dòng)畫;
動(dòng)畫事件監(jiān)聽
1: setStartListener: 設(shè)置動(dòng)畫開始播放的事件;
2: setEndListener : 設(shè)置動(dòng)畫播放完成后的事件;
3: setCompleteListener: 設(shè)置動(dòng)畫一次播放完成后的事件;
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() {
? ? ? ? // 清理動(dòng)畫播放管道, 索引來表示
? ? ? ? // this.ske_com.clearTracks(); // 清理所有播放隊(duì)列的動(dòng)畫
? ? ? ? this.ske_com.clearTrack(0); // 指定管道的索引
? ? ? ? // end
? ? ? ? // step1, 播放我們的入場動(dòng)畫
? ? ? ? this.ske_com.setAnimation(0, "in", false); // 把管道清空，加入當(dāng)前這個(gè)，
? ? ? ? this.ske_com.addAnimation(0, "idle_1", true); // 將我們的動(dòng)畫，以排隊(duì)的方式 加入到管道
? ? ? ? // end
? ? ? ? // step2: 播放我們的idle
? ? ? ? // end?
? ? },
? ? click1_anim_click: function() {
? ? ? ? this.ske_com.clearTrack(0); // 指定管道的索引
? ? ? ? this.ske_com.setAnimation(0, "clk_1", false); // 把管道清空，加入當(dāng)前這個(gè)，
? ? ? ? this.ske_com.addAnimation(0, "idle_1", true); // 將我們的動(dòng)畫，以排隊(duì)的方式 加入到管道
? ? },
? ? click2_anim_click: function() {
? ? ? ? this.ske_com.clearTrack(0); // 指定管道的索引
? ? ? ? this.ske_com.setAnimation(0, "clk_1", false); // 把管道清空，加入當(dāng)前這個(gè)，
? ? ? ? this.ske_com.addAnimation(0, "idle_1", true); // 將我們的動(dòng)畫，以排隊(duì)的方式 加入到管道
? ? },
? ? // called every frame, uncomment this function to activate update callback
? ? // update: function (dt) {
? ? // },
