关于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");
　　},
});

关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项

标签：

原文地址：http://www.cnblogs.com/HangZhe/p/5414259.html