1. 程式人生 > >cocos creator 骨骼動畫的使用

cocos creator 骨骼動畫的使用

1)匯入骨骼動畫

將JXM.png拖入到編輯器中,即可。 發現這個節點帶了sp.Skeleton元件。

2)程式碼


cc.Class({
    extends: cc.Component,

    properties: {
        ske_anim: {
            type: sp.Skeleton,
            default: null
        }
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        // 方法1: 節點查詢
        // var spine = this.node.getChildByName("spine");
        // var ske_com = spine.getComponent(sp.Skeleton);

        // 方法2: 繫結方式
        var ske_com = this.ske_anim;


        this.ske_com = ske_com;
        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(){
        this.ske_com.clearTrack(0);
        this.ske_com.setAnimation(0, "in", false);
        this.ske_com.addAnimation(0, "idle_1", false);
        this.ske_com.addAnimation(0, "in", false);
        this.ske_com.addAnimation(0, "idle_1", false);
    },

    anim_click: function(){
        this.ske_com.clearTrack(0);
        this.ske_com.setAnimation(0, "clk_1", false);
        this.ske_com.addAnimation(0, "idle_1", true);
    },

    start () {

    },

    // update (dt) {},
});