cocos creator--DragonBones 骨骼动画入门

cocos creator的资料实在太少，只好自己来分析和补充

DragonBones 骨骼动画，又叫龙骨动画，由白鹭时代推出的动画解决方案，免费。

Spine 与之相同的另一款骨骼动画解决方案，据说比dragonBones更强大，没用过没有发言权，收费

DragonBones动画制作

这不是重点，官方有制作教程，官方文档

导出时请注意

• 目前的Cocos Creator支持的数据版本是4.5
• 类型是DragonBones
• 输出比例可以根据需求设置

导出的是三个文件

• _tex.png 资源图集
• _tex.json 图集位置文件
• _ske.json 骨骼动画文件

在Cocos Creator 中使用

• 把导出的三个文件放到项目assets的同一文件下
• 在Scene中建一个空节点
• 在空节点的属性检查器中通过添加组件方式添加dragonBones组件
• 将_ske.json 拖到dragonBones组件的 Dragon Asset 属性
• 将_tex.json 拖到dragonBones组件的 Dragon Atlas Asset 属性

如此就可以在场景中看到骨骼动画的效果了，这个骨骼动画官方找的

脚本部分

写一个player.js 的脚本，绑在这个dragonBones组件所在的节点
player.js

cc.Class({
    extends: cc.Component,
<span class="hljs-attr">onLoad</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-comment">//获取 ArmatureDisplay</span>
    <span class="hljs-keyword">this</span>._armatureDisPlay = <span class="hljs-keyword">this</span>.getComponent(dragonBones.ArmatureDisplay)
    <span class="hljs-comment">//获取 Armatrue</span>
    <span class="hljs-keyword">this</span>._armature = <span class="hljs-keyword">this</span>._armatureDisPlay.armature()
    <span class="hljs-comment">//添加动画监听</span>
    <span class="hljs-keyword">this</span>._armatureDisPlay.addEventListener(dragonBones.EventObject.FADE_IN_COMPLETE, <span class="hljs-keyword">this</span>.animationEventHandler, <span class="hljs-keyword">this</span>)
    <span class="hljs-keyword">this</span>._armatureDisPlay.addEventListener(dragonBones.EventObject.FADE_OUT_COMPLETE, <span class="hljs-keyword">this</span>.animationEventHandler, <span class="hljs-keyword">this</span>)
},
<span class="hljs-attr">attack</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-comment">//动画执行方式一</span>
     <span class="hljs-keyword">this</span>._armature.animation.fadeIn(<span class="hljs-string">'attack1'</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'hit'</span>);
},
<span class="hljs-attr">attack2</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-comment">//动画执行方式二</span>
    <span class="hljs-keyword">this</span>._armatureDisPlay.playAnimation(<span class="hljs-string">'attack2'</span>, <span class="hljs-number">1</span>);
}, 
<span class="hljs-attr">animationEventHandler</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animationEventHandler</span>(<span class="hljs-params">event</span>) </span>{
<span class="hljs-keyword">if</span> (event.type == dragonBones.EventObject.FADE_IN_COMPLETE) {
  cc.log(event.detail.animationName + <span class="hljs-string">' fade in complete'</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (event.type == dragonBones.EventObject.FADE_OUT_COMPLETE) {
  cc.log(event.detail.animationName + <span class="hljs-string">' fade out complete'</span>);
}

}
})

看了这个脚本文件，你是不是马上想去查看API，
然而...

关于dragonBones，Cocos 官方API给出如下

是不是觉得很坑，说好的API 呢

昨天还在群里和群友扯这些Cocos Creator的坑，群友来了句，这东西本来就是免费开源的，有什么问题你可以直接去改源码啊...

改源码... 呵呵

话不扯太多，给大家掰一掰这里面牵扯到的API吧

DrgonBones相关API

---

ArmatureDisplay

官方唯一有给出的api

(Armature Display 具有对骨骼数据的引用并且存储了骨骼实例的状态， 它由当前的骨骼动作，slot 颜色，和可见的 slot attachments 组成。
多个 Armature Display 可以使用相同的骨骼数据，其中包括所有的动画，皮肤和 attachments。)

• playAnimation ( animName playTimes )

  return dragonBones.AnimationState

  播放指定的动画. animName 指定播放动画的名称。 playTimes 指定播放动画的次数。 -1 为使用配置文件中的次数。 0 为无限循环播放。

Ok,在白鹭时代的网站上找到了dragonBones的API

白鹭时代API文档

下面只列一下刚刚脚本中用到的API，其它的大家可以去看API

Armature

Armature 是 DragonBones 骨骼动画系统的核心。他包含需要加到场景的显示对象，所有的骨骼逻辑和动画系统

• animation
  [只读] 骨架的动画实例

Animation

Animation实例隶属于Armature,用于控制Armature的动画播放

白鹭的API没有找到Animation.fadeIn方法，API中给出了gotoAndPlay方法

• gotoAndPlay ( animationName :string, fadeInTime :number, duration :number, playTimes :number, layer :number, group :string, fadeOutMode :string, pauseFadeOut :boolean, pauseFadeIn :boolean )
  • return dragonBones.AnimationState
  • 开始播放指定名称的动画

在源码中找到了fadeIn方法的代码，如下

/**
         * @language zh_CN
         * 淡入播放指定名称的动画。
         * @param animationName 动画数据的名称。
         * @param playTimes 循环播放的次数。 [-1: 使用数据默认值, 0: 无限循环播放, [1~N]: 循环播放 N 次]
         * @param fadeInTime 淡入的时间。 [-1: 使用数据默认值, [0~N]: N 秒淡入完毕] (以秒为单位)
         * @param layer 混合的图层，图层高会优先获取混合权重。
         * @param group 混合的组，用于给动画状态编组，方便混合淡出控制。
         * @param fadeOutMode 淡出的模式。
         * @param additiveBlending 以叠加的形式混合。
         * @param displayControl 是否对显示对象属性可控。
         * @param pauseFadeOut 暂停需要淡出的动画。
         * @param pauseFadeIn 暂停需要淡入的动画，直到淡入结束才开始播放。
         * @returns 返回控制这个动画数据的动画状态。
         * @see dragonBones.AnimationFadeOutMode
         * @see dragonBones.AnimationState
         * @version DragonBones 4.5
         */
        Animation.prototype.fadeIn = function (animationName, fadeInTime, playTimes, layer, group, fadeOutMode, additiveBlending, displayControl, pauseFadeOut, pauseFadeIn) {
            if (fadeInTime === void 0) { fadeInTime = -1; }
            if (playTimes === void 0) { playTimes = -1; }
            if (layer === void 0) { layer = 0; }
            if (group === void 0) { group = null; }
            if (fadeOutMode === void 0) { fadeOutMode = 3 /* SameLayerAndGroup */; }
            if (additiveBlending === void 0) { additiveBlending = false; }
            if (displayControl === void 0) { displayControl = true; }
            if (pauseFadeOut === void 0) { pauseFadeOut = true; }
            if (pauseFadeIn === void 0) { pauseFadeIn = true; }
            var animationData = this._animations[animationName];
            if (!animationData) {
                this._time = 0;
                console.warn("Non-existent animation.", "DragonBones: " + this._armature.armatureData.parent.name, "Armature: " + this._armature.name, "Animation: " + animationName);
                return null;
            }
            if (this._time != this._time) {
                this._time = 0;
            }
            this._isPlaying = true;
            if (fadeInTime != fadeInTime || fadeInTime < 0) {
                if (this._lastAnimationState) {
                    fadeInTime = animationData.fadeInTime;
                }
                else {
                    fadeInTime = 0;
                }
            }
            if (playTimes < 0) {
                playTimes = animationData.playTimes;
            }
            this._fadeOut(fadeInTime, layer, group, fadeOutMode, pauseFadeOut);
            this._lastAnimationState = dragonBones.BaseObject.borrowObject(dragonBones.AnimationState);
            this._lastAnimationState._layer = layer;
            this._lastAnimationState._group = group;
            this._lastAnimationState.additiveBlending = additiveBlending;
            this._lastAnimationState.displayControl = displayControl;
            this._lastAnimationState._fadeIn(this._armature, animationData.animation || animationData, animationName, playTimes, animationData.position, animationData.duration, this._time, 1 / animationData.scale, fadeInTime, pauseFadeIn);
            this._animationStates.push(this._lastAnimationState);
            this._animationStateDirty = true;
            this._time = 0;
            if (this._animationStates.length > 1) {
                this._animationStates.sort(Animation._sortAnimationState);
            }
            var slots = this._armature.getSlots();
            for (var i = 0, l = slots.length; i < l; ++i) {
                var slot = slots[i];
                if (slot.inheritAnimation) {
                    var childArmature = slot.childArmature;
                    if (childArmature &&
                        childArmature.animation.hasAnimation(animationName) &&
                        !childArmature.animation.getState(animationName)) {
                        childArmature.animation.fadeIn(animationName);
                    }
                }
            }
            this._armature.advanceTime(0);
            return this._lastAnimationState;
        }

今天只是介绍了一下骨骼动画的基本使用方法，如有时间再和大家讨论更多的骨骼动画问题

有问题 请留言...

      </div>
      转自：https://www.jianshu.com/p/57ffc148d1fa