Steps and considerations for Cocos creator to play skeletal animations with JS script code

1. Use the Cc.find () method to locate the corresponding bone animation node and assign the object to a new Var object.

Specific code: var Spineboy_anim = Cc.find ("Ui_root/anchor_lb/spineboy");

2. Use the Getcomponent () method to locate the skeletal animation component of the corresponding bone animation node and assign the object to a new Var object.

Specific code: var Ske_anim_comp = spineboy_anim.getcomponent (sp. Skeleton);

3. Assign the new object of the 2nd to a new global object This.ske_comp, which can be used in other functions. Unlike the C and C + + languages, to declare and define before you can use a function, the location of the function definition in JavaScript is random, and the function uses a global this object to point to the target function you want to use. Of course, you can assign a variable to a property of the global this object, which can be defined by itself, and it can be used in other functions as well. But the objects and variables in JavaScript are defined by Var, so sometimes it is unclear if the type of the resulting result is an object or a variable.

Specific code: This.ske_comp = Ske_anim_comp;

4. Create a Play_spineboy_walk function

5. In the Play_spineboy_walk function to achieve the animation of the clear 0 and play, this method is provided by Cocos Creator, can be found in the official API.

This.ske_comp.clearTrack (0); The specified animation in the queue is cleared, where the animation of position No. 0 is cleared.
This.ske_comp.setAnimation (0, "Walk", true); Set to play the first few bones animation, 0 is put it in the queue to play the No. 0 position of the animation, "Walk" is the name of the skeletal animation action, true whether the loop play.

6. Write this code in the OnLoad method to dispatch a callback function that runs only once.

This.scheduleonce (This.play_spineboy_walk.bind (this));

Attention:

1. If the animation in the animation sub-node is set to play the action is none, and the script code on the Ui_root node in the OnLoad method with the This.paly_spineboy_walk () method to set the playback of the animation is not broadcast, Because creator will process the script of the Ui_root node first, and then the script of the child node, the equivalent of the animation set up by the code to be broadcast, is cleared by the settings of the animated child node. We use the callback function and call it once, so that it calls out the script on the Ui_root node and ignores the child node's script so that we can play the specified action we want to play.

2. When using This.scheduleonce (This.play_spineboy_walk.bind (this)), be sure to add a bind (this), which is the hardest part of JavaScript, if you don't add bind ( This is not the global this, as I understand it, because in JavaScript, the function name: function () is also considered an object, which is the Play_spineboy_walk function. This is the case if you use this for two times. The first time This.play_spineboy_walk specified play_spineboy_walk This function object, and the next time this, that is, play_spineboy_ Walk internal this refers to its own function object, This.ske_comp does not exist, so use bind (this) to let the Play_spineboy_walk method inside the This and call Play_spineboy_ The walk of this is the same as this, which points to the global object.

Full code:

Acl 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); The specified animation in the queue is cleared, where the animation of position No. 0 is cleared.
This.ske_comp.setAnimation (0, "Walk", true); Set to play the first few bones animation, 0 is put it in the queue to play the No. 0 position of the animation, "Walk" is the name of the skeletal animation action, true whether the loop play.
},

Called every frame, uncomment this function to activate update callback
Update:function (DT) {

// },

On_home_start:function () {//switch to the beginning of the scene
Cc.director.loadScene ("Startscene");
},
});

About Cocos Creator the steps and considerations for playing a skeletal animation with the JS script code