cocos creator學習--骨骼動畫入門教程

參考：Mark_Liu--cocos creator--DragonBones 骨骼動畫入門

       1.首先在網上下載dragonBones 的文件解壓后有三個文件

　　

　　2.將文件夾放入cocos creator，

　　

　　3.新建一個空結點並添加渲染組件dragonBones，新建一個js文件，將js文件和節點綁定。將資源的兩個json文件放入dragonBones對應的框中

　　

　　4.查看SwordsMan的json文件，搜索  gotoAndPlay  ，該關鍵字對應的就是動作名稱

　　5.打開js文件，寫入代碼

　　

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    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 () {
        this.getArmature();
    },

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

    // },
    getArmature:function(){
        //獲取 ArmatureDisplay
        this._armatureDisPlay = this.getComponent(dragonBones.ArmatureDisplay)
        //獲取 Armatrue
        this._armature = this._armatureDisPlay.armature()
        //添加動畫監聽
        this._armatureDisPlay.addEventListener(dragonBones.EventObject.FADE_IN_COMPLETE, this.animationEventHandler, this)
        this._armatureDisPlay.addEventListener(dragonBones.EventObject.FADE_OUT_COMPLETE, this.animationEventHandler, this)
        this.attack();
    },
    attack:function(){
        //動畫執行方式一
        this._armature.animation.fadeIn('attack1', -1, -1, 0, 'hit');
    },
    attack2:function(){
        //動畫執行方式二
        this._armatureDisPlay.playAnimation('attack2', 1);
    },
    animationEventHandler: function animationEventHandler(event) {
        if (event.type == dragonBones.EventObject.FADE_IN_COMPLETE) {
            cc.log(event.detail.animationName + ' fade in complete');
        } else if (event.type == dragonBones.EventObject.FADE_OUT_COMPLETE) {
            cc.log(event.detail.animationName + ' fade out complete');
        }
    }
});

其中的'attack1'，'attack2'，均可換為動作名稱。