24帧动画走路分解图_Cocos Creator系列一：导入DragonBones动画

冷不防 2023-01-10 09:54 162阅读 0赞

![587dc289345bf3229b06ca18c849a422.png][]

## **一、texturepacker 制作图集资源** ##

可以把多个图片制作成合集，选择cocos2d输出格式，导出plist文件和png

把图片拖入到1,2指定保存文件，publish发布

![92c2a46999f00b4ad1fa866df73512a5.png][]

![2fbaaa9f259591424bd7b3072a11a0bf.png][]

制作图集资源好处：

在游戏中使用多张图片合成的图集作为美术资源，有以下优势：

*  合成图集时会去除每张图片周围的空白区域，加上可以在整体上实施各种优化算法，合成图集后可以大大减少游戏包体和内存占用
 *  多个 Sprite 如果渲染的是来自同一张图集的图片时，这些 Sprite 可以使用同一个渲染批次来处理，大大减少 CPU 的运算时间，提高运行效率。

二、DragonBone绑定骨骼

新建工程，把资源拖入到library，图m处

![293f79e886671c1daa945020a9048609.png][]

绑定人物骨骼的策略是，先把腰部作为根节点，再把对应的图片放到对应位置，之后分别是2,4左右大腿，再之后是3躯干，并行作为二级节点，放置对应的图片到二级节点下，以此类似绑定对应更小的节点和图片

三、DragonBone 基础操作

在绑定骨骼过程中，基本操作是，快捷键Z移动，快捷键X旋转，鼠标点击选中

![b54fa6decda76e9a27761a08165bc75a.png][]

新建骨骼后，只能看到一个节点，在属性界面调整长度大小，再使用移动旋转操作去处理

![4f8b8270283581afe52876b52ab07bdc.png][]

拖动辅助线来帮助动画制作定位。

四、DragonBone动画制作

![275305c787cdb84d6763ecdafd8a41e1.png][]

图中编号1，点击动画制作，进入动画制作界面，图2处创建新动画，并命名，图3开启自动关键帧，点中场景中骨骼进行旋转平移会自动记录相关骨骼的关键帧，图4表示 帧率是每秒24帧，图5为对应骨骼所K动画，图6可以手动记录移动平移缩放旋转关键帧。

行走动画如下：

![eea615d44efefe043e16b1d13d8a2387.png][]

制作完成导出界面设置如下：

![4ad5586900f7fd5bc371a272131b8ba2.png][]

导出文件有三个：

![cad590ef922680a70d99bb3b6b5a616f.png][]

五、cocos creator编写动画

新建一个空节点，添加dragonBones.ArmatureDisplay组件

![12c37aaee4d58aa71f285b15ece17d77.png][]

将ske和tex拖到对应的位置，即可看到场景中出现角色。组件有几个属性，animation是选择默认动画名称，timescale是动画播放速率，playtimes是播放次数，0代表无限次，-1代表默认配置，其他代表次数。

添加如下代码，

onLoad () {
             this.armatureDisplay = this.getComponent(dragonBones.ArmatureDisplay);
             //this.armature = this.armatureDisplay.armature();
             //添加DragonBones动画监听
             this.armatureDisplay.addEventListener(dragonBones.EventObject.LOOP_COMPLETE,this.animationEventHandler,this);
         }
    
         start(){
             
            this.TestPlay();
            //this.armatureDisplay.enabled = false;
         }
    
        animationEventHandler(event) {
    //目的是动画完成 移动角色到动画完成的地方 实现循环播放
            if(event.type == dragonBones.EventObject.LOOP_COMPLETE)
            {
                this.node.x += 826;
            }
        }
    
    
        TestPlay(){
            this.armatureDisplay.playAnimation('test',0);
        }
    
        public LoopPlayWalkAnimation(){
    //先关闭组件动画就不会自动播放， 可以在需要时候打开组件
            this.armatureDisplay.enabled = true;
        }

[587dc289345bf3229b06ca18c849a422.png]: /images/20221119/8bf4ee0901e546da9e292223a6e0de8b.png
[92c2a46999f00b4ad1fa866df73512a5.png]: /images/20221119/d618d803f60d46d28a0f666a0cf6b395.png
[2fbaaa9f259591424bd7b3072a11a0bf.png]: /images/20221119/55ae88e36bca4bdc98be0326ea588e8b.png
[293f79e886671c1daa945020a9048609.png]: /images/20221119/93cd1a1773f14899969627407e01f3cd.png
[b54fa6decda76e9a27761a08165bc75a.png]: /images/20221119/a5d79aa0114a4c1f896429450d65aa83.png
[4f8b8270283581afe52876b52ab07bdc.png]: /images/20221119/fb06551fa61744ffa5169dc974593696.png
[275305c787cdb84d6763ecdafd8a41e1.png]: /images/20221119/68e6bbec2367494f87c648773920d600.png
[eea615d44efefe043e16b1d13d8a2387.png]: /images/20221119/491703343efd47559ac7a9c8ec0bad15.png
[4ad5586900f7fd5bc371a272131b8ba2.png]: /images/20221119/ff780b8abc684768a63aa0b528665300.png
[cad590ef922680a70d99bb3b6b5a616f.png]: /images/20221119/efced0fce49a419e871bef0d3900927d.png
[12c37aaee4d58aa71f285b15ece17d77.png]: /images/20221119/2232aec7e7224b95b66cd1670affe83e.png