Cocoscreator plays spine animation

1. establish 2D Air Engineering  

2. The project opens the default scene , Canvas has been added to the default scene

3. Add an empty node to the canvas

4. Named node is NodeSke

 5. Add bone animation (Spine) Component to empty node

After successful addition , Click on NodeSke node , You can see that... Has been added to the property inspector sp.Skeleton node  

6. take Spine Drag the animation folder to assets Catalog

  an Spine Animation catalog girl You can see the relevant animation files

7. take Spine Animation json Drag files to Skeleton Data in

Select the specified skin

  After selecting skin , The animation canvas appears at the hollow node of the scene

8. Adjust the animation position

  Animation position adjustment OK

  Save the scene just made as main

9. Select the camera , And switch Layer by UI_2D, You can see that the camera has rendered the canvas in the scene  

10. Click preview to view the effect in the browser

11. Select the empty node NodeSke, Then select the animation to play by default in the attribute inspector on the right

Now? , In the browser, you can see Spine The animation has been played automatically

12. Control animation playback through scripts , stop it , And switch animation skin

     a. Add script file

b. by NodeSke Node to add a custom script  

 c. Double click the script to open VSCODE And in girl.ts Add methods to play animation and stop animation

d. Nodes are associated with variables

  Drag nodes into variables

 e. Add animation control buttons

 f. Add variable associations for buttons

g. Add click event associations for buttons  

 

coded Spine Animation play , stop it , Skin change function  

// Play animation 
    playAnimation(){
        this.SkeObj.setAnimation(0,"dance",true);
    }
    // Stop Animation 
    stopAnimation(){
       let SpEnt:sp.spine.TrackEntry =  this.SkeObj.setAnimation(0,"dance",true);
       SpEnt.animationStart = SpEnt.animationEnd;
    }
    // Skin peeler 
    changeSkin() {
        const skins =['girl', 'boy', 'girl-blue-cape', 'girl-spring-dress'].map(x=> `full-skins/${x}`);
        this.skinId = (this.skinId + 1) % skins.length;
        this.SkeObj!.setSkin(skins[this.skinId]);
    }

  demonstration :

Micro vision