關於Cocos Creator用js腳本代碼播放骨骼動畫的步驟和注意事項

步驟：

1.用cc.find()方法找到相應的骨骼動畫節點，並把這個對象賦值給一個var出來的新對象。

　具體代碼：var spineboy_anim = cc.find("UI_Root/anchor_lb/spineboy");

2.用getComponent()方法找到相應骨骼動畫節點的骨骼動畫組件，並把這個對象賦值給一個var出來的新對象。

　具體代碼：var ske_anim_comp = spineboy_anim.getComponent(sp.Skeleton);

3.把第二點的新對象通過賦值給一個新的全局對象this.ske_comp，這個對象可以在其他的函數里面使用。

　不像C和C++語言，要先聲明和定義才能使用函數，JavaScript里面的函數定義的位置都是隨便放的，函數里面要用其他函數的時候，用一個全局的this對象指向要用的目標函數就行了。

　當然也可以把變量賦值給全局this對象的一個屬性，這個屬性可以自己定義，這個屬性在其他函數里面也可以用。但是JavaScript里面的對象和變量都用var來定義，所以有時候如果不清楚得到的結果的類型會分不清賦值的是對象還是變量。

　具體代碼： this.ske_comp = ske_anim_comp;

4.創建一個 play_spineboy_walk的函數

5.在play_spineboy_walk函數里面實現動畫的清零和播放，這個方法是Cocos Creator提供的,可以在官方api找到。

　this.ske_comp.clearTrack(0);      //隊列中的指定的動畫將被清除，這里清除0號位置的動畫。
　this.ske_comp.setAnimation(0,"walk",true);　  //設置播放第幾個骨骼動畫，0是把它放在要播放動畫的隊列中的第0個的位置，“walk”是骨骼動畫動作的名字，true是是否循環播放。

6.在onload方法里面寫一下這個代碼，來調度一個只運行一次的回調函數。

　this.scheduleOnce(this.play_spineboy_walk.bind(this));

 

注意：

1.如果在動畫子節點里面設置播放的動畫動作為None，而在UI_Root節點上的腳本代碼卻在onLoad方法里面用this.paly_spineboy_walk()方法來設置播放的動畫是播不了的，因為creator會先處理UI_Root節點的腳本，再處理子節點的腳本，相當於用代碼設置好的要播的動畫，被動畫子節點的設置給清除了。而我們用回調函數且只調用一次，使它調用完UI_Root節點上的腳本后就不在理會子節點的腳本，這樣就可以播放我們想要播放的指定動作了。

2.在使用this.scheduleOnce(this.play_spineboy_walk.bind(this))的時候一定要注意加一個bind(this),這是JavaScript最難的地方，這里如果不加bind(this)，play_spineboy_walk函數里面的this就不是全局的this，我是這樣理解的，因為在JavaScript里面，函數名:function（）這樣寫的函數也算是一個對象，這時候如果使用兩次this.第一次this.play_spineboy_walk指定了play_spineboy_walk這個函數對象，而下一次的this，也就是play_spineboy_walk內部的this指的就是它自己這個函數對象，this.ske_comp就不存在，所以要用bind(this)來讓play_spineboy_walk方法里面的this和調用play_spineboy_walk的this的性質一樣，都是指向全局對象的this。

 

完整代碼：

cc.Class({
extends: cc.Component,

　　properties: {
　　　　// foo: {
　　　　// default: null,
　　　　// 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
　　　　// },
　　　　// ...
　　},

　　// use this for initialization
　　onLoad: function () {
　　　　var spineboy_anim = cc.find("UI_Root/anchor_lb/spineboy");
　　　　var ske_anim_comp = spineboy_anim.getComponent(sp.Skeleton);

　　　　this.ske_comp = ske_anim_comp;

　　　　this.scheduleOnce(this.play_spineboy_walk.bind(this));

　　　　//this.paly_spineboy_walk();
　　　　//console.log(ske_anim_comp);
　　},

　　play_spineboy_walk: function(){
　　　　this.ske_comp.clearTrack(0);　　　　　　　　　　　　 //隊列中的指定的動畫將被清除，這里清除0號位置的動畫。
　　　　this.ske_comp.setAnimation(0,"walk",true);　　　　　//設置播放第幾個骨骼動畫，0是把它放在要播放動畫的隊列中的第0個的位置，“walk”是骨骼動畫動作的名字，true是是否循環播放。
　　},


　　// called every frame, uncomment this function to activate update callback
　　// update: function (dt) {

　　// },

　　on_home_start: function(){ //切換到開始的場景
　　　　cc.director.loadScene("startscene");
　　},
});