更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
使用您的微博帐号登录，即刻尊享微博用户专属服务。
使用您的QQ帐号登录，即刻尊享QQ用户专属服务。
使用您的人人帐号登录，即刻尊享人人用户专属服务。
按住视频可进行拖动
把视频贴到Blog或BBS
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
收藏成功，可进入查看所有收藏列表
方式1：用手机看
用爱奇艺APP或微信扫一扫，在手机上继续观看：
DragonBones 简单的骨骼动画教学
方式2：一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
爸爸去哪儿2游戏 立即参与
DragonBones 简单的骨骼动画教学
播放量数据：
8,832人已订阅
你可能还想订阅他们：
{{#needAdBadge}} 广告{{/needAdBadge}}
&正在加载...
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
安装爱奇艺视频客户端，
马上开始为您下载本片
5秒后自动消失
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制向大家推荐一个制作骨骼动画的软件 Dragonbones【江南大学吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：177,270贴子：
向大家推荐一个制作骨骼动画的软件 Dragonbones收藏
美得超乎想象，著名的手游刀塔传奇里的动画就是用它做的。到官网下载安装包直接安装就可以，安装之后就会在欢迎页面看到教程。
特伦特大学成绩,想留学就选教育部许可的百利天下留学机构!留学到底需要什么条件?了解特伦特大学成绩,百利天下留学为您提供留学整体解决方案!
适合制作角色的各种动作，这也是它跟flash的一个很大的区别
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或9151人阅读
要看懂本文，你需要了解骨骼动画（或称关节动画）是什么，以及DragonBones是什么。下面提供了一些资料：
To flash veteran: do you remember the ‘Moho’?
不要使用官方版本的DragonBones
在写这篇文章的时候，DragonBones的官方版本为v2.3。cocos2d-x的稳定版本为2.1.5。
为了使用cocos2d-x，我们需要选择 Zip(XML and PNGs) 的方式，将图像文件导出为独立的图像帧加上XML格式的元数据文件。官方版本的DragonBones，会将元数据分成texture.xml和skeleton.xml两个文件，而cocos2d-x目前不支持这种情况。
因此，我们需要使用修改过的DragonBones插件。在，版本是2.0。但这个插件有一个bug，我在2.2的基础上重新打包了插件，并修复了bug。详情看这里：&。
使用这个版本的插件，在导出图像文件的时候，会将texture.xml和skeleton.xml文件合并成1个，同时会修改元数据中的部分格式，使其满足cocos2d-x的解析库要求。
注意：下面提到DragonBones的时候，均指这个修改过的插件。
DragonBones输出的图像数据可以导入CocoStudio Action编辑器
可以使用CocoStudio的Action编辑器将DragonBones输出的图片导入，然后重新输出成Cocos2d-x支持的格式。这种格式包含一个把碎图拼接好的png文件，一个plist文件和一个json文件。
如何进行上面的导入操作？可以看这个视频：
使用CocoStudio的Action编辑器导出的格式有什么优势呢？
DragonBones输出的png是碎图，而CocoStudio Action编辑器将碎图拼接成大图了；
plist文件是png碎图拼接的metadata；
json文件是骨骼和动画信息。
但是，使用CocoStudio Action编辑器有几个问题：
莫名其妙的崩溃。在导入的DragonBones文件中包含空格、中文等内容的时候，编辑器经常直接退出，让人较难判断原因；
不支持DragonBones的层级关系。如果在DragonBones中设计了层级关系，那么CocoStudio无法识别，骨骼会发生很大的错位；
CocoStudio Action编辑器不稳定。我在0.3.0.0版本中，可以导入DragonBones格式，但使用0.3.2.0，又不能导入同样的格式了，编辑器直接退出。
为什么不用CocoStudio
既然导入有这样那样的问题，那么直接用CocoStudio做骨骼动画好了，干吗还要用DragonBones？
DragonBones有如下优势：
DragonBones的骨骼动画实现起来非常非常容易；
大多数做动画的同学都熟悉Flash，但极少知道CocoStudio，谁都愿意用自己熟悉的软件；
Flash和DragonBones的操作体验优于CocoStudio太多。
加上上面提到的不稳定原因，我也无法说服自己使用CocoStudio Action编辑器，更别说把它交给美术MM了。
更何况，我们根本不必把DragonBones生成的文件导入CocoStudio！cocos2d-x能直接支持DragonBones生成的文件！
如果你还是希望用CocoStudo来做骨骼动画，可以参考这篇文章：。
update&CocoStudio升级到1.0之后，已经支持导入fla文件，但这个导入是有限制的：
需要将 想要导入到动画编辑器的元件放入到主场景中
暂时不支持导入矢量图形，可以右键矢量图形 装换为位图
暂不支持嵌套元件的元件作为骨骼部件
&，也有允许导入的文件范例。
生成cocos2d-x支持的文件格式
上面已经提到，使用DragonBones可以生成一堆碎图文件和一个xml文件。我们首先要做的，就是把这堆碎图文件拼成一张大图。cocos2d-x支持plist格式(基于XML)的元数据。
当然，如果你使用我修改过的&， 就不必进行下面的拼合工作，它会自动帮你生成png/xml/plist文件。
你也可以选择&&或者&&来做拼合碎图以及生成plist文件的工作。&正在准备支持cocos2d的plist文件格式。
拼合成功后，可以将碎图删除，现在我们有3个文件（为了方便描述，这里假设主文件名均为skeleton）：
拼合后的大的png文件 skeleton.png；
plist元数据文件 skeleton.plist；
xml骨骼动画数据文件 skeleton.xml。
再次强调，这里让主文件相同只是为了方便描述，实际使用的时候，主文件不必相同。
但是（为什么非要有但是呢？），你不认为文件名相同更方便人类阅读么？
我先来说一下 skeleton.xml 的内部结构吧。下面是我用 DragonBones 官方提供的 Dragon.fla 生成的xml文件……呃……的一部分。
&skeleton version=&2.1& frameRate=&24& name=&Dragon&&
&armatures&
&armature name=&Dragon&&
&!-- 这里是一坨b 那啥~ b标签（表想不正……） --&
&/armature&
&/armatures&
&animations&
&animation name=&Dragon&&
&!-- 这里是一坨mov --&
&/animation&
&/animations&
&TextureAtlas name=&Dragon& height=&512& width=&512&&
&!-- 这里是一坨SubTexture --&
&/TextureAtlas&
&/skeleton&
好了，1和2不必再检查了。但 skeleton.xml 必须检查。如果你不希望和我一样耗费一下午来猜谜的话，就记住下面几点吧：
最新的测试标明，armatures是允许有多个子标签的，只要与animations中的子标签对应即可。armature标签只允许有一个。你生成的xml文件中，可能由于FLA制作的问题，在armatures下面有多个armature，这是绝对不行DI。cocos2d-x碰到这种情况会直接异常没商量。所以，留一个最终正确的吧！
armature和animation的name属性必须完全相同，这个名称将是cocos2d-x中最终使用的名称。
TextureAtlas的name属性和skeleton的name属性就无所谓啦，可以随便填了。
还是有必要再罗嗦一遍，各种name不要用中文，不要加空格，不要用特殊字符……grumble,grumble……
话说，为什么生成的xml文件中会有多个armature呢？借势淫威……你的FLA库中的某个MovieClip中的第一层中包含label！
我们知道（我不知道你知不知道，你知道你就是我们知道中的我们，你不知道你就不是我们知道中的我们），DragonBones会将MovieClip第一层的label当作骨骼动画中的不同动作。如果你某个不开眼的MovieClip中莫名其妙的加了一个不知所谓的label，而且你这个MovieClip又被制作动画的那个主MovieClip使用了，那么这个带有label的MovieClip也会被作为armature输出。
使用CCArmature包实现骨骼动画
终于特码嘚进入代码阶段了，我快要累死了。
CCArmature并不是cocos2d-x核心包的内容，你可以在 cocos2d-x/extensions 中找到它。
在头文件中，需要include CCArmature包的所有内容。我不明白为什么 cocos2d-x 开发组不把这些包含文件都放到 cocos-ext.h 中去。毕竟 spine 都被放进去了啊。难道是不稳定？不敢再往下想了，一定有阴谋，借势个阴谋……
#include &cocos2d.h&
#include &cocos-ext.h&
#include &VisibleRect.h&
#include &CCArmature/CCArmature.h&
#include &CCArmature/CCBone.h&
#include &CCArmature/animation/CCArmatureAnimation.h&
#include &CCArmature/datas/CCDatas.h&
#include &CCArmature/display/CCBatchNode.h&
#include &CCArmature/display/CCDecorativeDisplay.h&
#include &CCArmature/display/CCDisplayManager.h&
#include &CCArmature/display/CCSkin.h&
#include &CCArmature/physics/CCColliderDetector.h&
#include &CCArmature/physics/CCPhysicsWorld.h&
#include &CCArmature/utils/CCArmatureDataManager.h&
#include &CCArmature/utils/CCConstValue.h&
#include &CCArmature/utils/CCDataReaderHelper.h&
#include &CCArmature/utils/CCTweenFunction.h&
#include &CCArmature/external_tool/sigslot.h&
update&现在阴谋终于展现了，原来cocos2d-x 2.2.0 把 CCArmature 整合进入了extensions/CocoStudio&包。下面的内容出现在&cocos-ext.h&中：
#include &CocoStudio/Armature/CCArmature.h&
#include &CocoStudio/Armature/CCBone.h&
#include &CocoStudio/Armature/animation/CCArmatureAnimation.h&
#include &CocoStudio/Armature/datas/CCDatas.h&
#include &CocoStudio/Armature/display/CCBatchNode.h&
#include &CocoStudio/Armature/display/CCDecorativeDisplay.h&
#include &CocoStudio/Armature/display/CCDisplayManager.h&
#include &CocoStudio/Armature/display/CCSkin.h&
#include &CocoStudio/Armature/physics/CCColliderDetector.h&
#include &CocoStudio/Armature/utils/CCArmatureDataManager.h&
#include &CocoStudio/Armature/utils/CCDataReaderHelper.h&
#include &CocoStudio/Armature/utils/CCTweenFunction.h&
#include &CocoStudio/Armature/external_tool/sigslot.h&
那么，如果你使用cocos2d-x 2.2.0（或以上），只需要&#include &cocos-ext.h&&即可了。
载入资源、创建动画、播放第一个动画。
VisibleRect这个类可以在 TestCpp 范例中找到。
我写得简单，是因为我只说重点和易错的地方。
埋怨我写的简单的，可以直接查看 TestCpp/ExtensionsTest/ArmatureTest 范例，那个详细得令人发指。
update&在 cocos2d-x 2.2.0 中，应该查看 ExtensionsTest/CocoStudioArmatureTest 范例。
CCArmatureDataManager::sharedArmatureDataManager()-&addArmatureFileInfo(&skeleton.png&, &skeleton.plist&, &skeleton.xml&);
CCArmature* __armature = CCArmature::create(&Dragon&);
__armature-&getAnimation()-&playByIndex(0);
__armature-&setPosition(VisibleRect::center().x, VisibleRect::center().y*0.3f);
addChild(__armature)
Cocos2d-x 2.2.0 在 CCArmature 上的BUG
比较 Cocos2d-x 2.1.5 和 Cocos2d-2.2.0，它们的CCArmature播放效果不同。
原本在2.1.5上非常流畅的Armature的骨骼动画，在2.2.0上会出现卡顿，以及动作不协调等情况。这不是帧率的问题，应该是在修改的过程中，Armature的Tween出了问题。
我分析出现这个BUG的原因应该是这样的：
CCArmature其实是基于DragonBones2.1的库移植而来，就是用C++把ActionScript3代码库重写了一遍；
现在触控传媒希望大力推进CocoStudio的使用（目前是lite版，可能以后会出收费版），让CocoStudio去支持CCArmature骨骼动画，因此不断对CCArmature进行改进以支持CocoStudio生成的JSON文件格式；
在改进的过程中，可能因为某些失误，导致对原来的DragonBones格式的支持出现了问题；
由于这次改进仅针对CocoStudio导出的JSON格式，而没有测试DragonBones生成的格式，导致这个BUG在2.2.0发布的时候也没有得到解决；
cocos2d-x在各种大会上说支持Flash，让Flash成为cocos2d-x的编辑器，其实团队内并不是真正重视Flash，或者并没有安排Flash的相关测试；
对于Cocos2d-x的使用者来说，深入了解Flash的可能比较少，更少人知道CCArmature其实是来自DragonBones，使用DragonBones的就少得可怜。再加上网上的资源匮乏，旧的、被转帖的教程泛滥，描述正确且准确的教程缺失，这个BUG就很难发现；
以上全是我的猜测。
但即使是官方的TestCPP，如果测试DragonBones导出的Dragon那个Armature动画，也是能看出问题的。下面是动画，请注意尾部顶端、右臂以及腿的动作区别（这两个gif文件很大，要稍微等一会儿才会播放流畅）：
For v2.2.0 testcpp/ExtensionsTest/CocoStudioArmatureTest
For v2.1.5 testcpp/ExtensionsTest/ArmatureTest
这个BUG我已经在&&，不过开发团队似乎只测试了CocoStudio导出的格式情况，并且认为并无问题。我补发了TestCpp的测试视频，官方并未回复。
update&根据开发团队的最新回复，此BUG已经被确认，并指定目标版本为3.0alpha-1。看来要等一段时间了。在官方解决这个BUG之前，我只能使用2.1.5版本。
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：237371次
积分：3076
积分：3076
排名：第10131名
原创：67篇
转载：69篇
评论：34条
(3)(2)(1)(3)(1)(1)(2)(3)(2)(1)(2)(3)(2)(3)(1)(2)(1)(2)(1)(2)(3)(10)(5)(1)(1)(4)(2)(1)(6)(5)(1)(6)(2)(12)(6)(16)(8)(3)(7)DragonBones使用方法
前提知识：有基本的Egret项目开发经验技术等级：中级必需产品：Egret Engine 1.5.1(，如当前版本小于1.5.1，请安装后打开检查社区体验版更新开关，再进行更新)开发工具：WebStorm或Visual Studio + EgretVS ()教程起点项目包：
DragonBones概述相信熟悉AS3的小伙伴，一定对DragonBones不陌生，当今火爆的手游《刀塔传奇》正是因为使用了DragonBones而得以效果如此丰富生动。当然还有大量不那么出名的游戏背后都有DragonBones的强力驱动。 数月前（2014年6月），DragonBones已经正式支持Egret了。但由于DragonBones相对于常规的MovieClip要复杂不少。因此撰写本文，让大家对DragonBones不再那么陌生。也希望推进Egret社群更快地涌现出更多DragonBones的上线作品！ 本文参考了DragonBones官方的《DragonBones快速入门指南》。但不是对其简单的整理，而是穿插一些DragonBones组成动画的原理介绍，并以理解和实用为目的来介绍其使用方法。其次本文完全结合Egret开发环境来介绍，避免由于Egret与Flash的差异带来的困扰。 DragonBones的使用主要分为两大阶段。 第一阶段为资源创作阶段，该阶段的主要目的是生成程序可以使用的DragonBones资源。这部分主要由美术人员通过Flash CC来完成。虽然这部分完全不需要写代码，但从DragonBones本身的工作流程来看，可能这部分工作量是最大的。该阶段可以理解为，生成一个骨骼动画库。 第二阶段即为程序使用阶段。对应于资源生成阶段，该阶段可以理解为，对骨骼动画库进行各种调用及组合，产生丰富而生动的游戏动作画面。 为了让大家快速了解Egret版DragonBones的用法，本教程避重就轻，使用现成的DragonBones资源来呈现动画效果。 为Egret项目增加DragonBones支持作为Egret官方的扩展模块，创建空白Egret项目后，可以很简单的增加DragonBones支持。修改egretProperties.json中的”modules”，成为： &modules&: [
&name&: &egret&
&name&: &game&
&name&: &tween&
&name&: &res&
&name&: &dragonbones&
在项目所在目录内执行一次引擎编译： egret build -e
本步骤已经完成，现在项目中既可以使用 DragonBones 相关的 API 了。 读取DragonBones资源并解析到工厂DragonBones资源，主要包含显示数据和各种骨骼动画的控制数据。 在Flash版本有很多种形式，JSON、PNG、SWF、ZIP等等。 但是SWF是Flash专用的格式，我们完全没必要为了增加一种格式的支持从Binary级别去解析。ZIP在本基础教程中也不涉及。 另外，在数据格式上，Egret更习惯于用JSON。 所以，本教程使用DragonBones资源只有最方便的JSON和PNG格式。 显示部分数据，跟其他游戏开发常用的纹理格式一样。显示数据是一对文件：纹理图集+纹理单元(下文称为图元)提取数据。具体就是PNG+JSON，通常为了便于表明其关系，主文件名是一样的。 本教程中的DragonBones资源按照角色分目录存放。在某一种角色目录中，纹理显示数据命名为：texture.json和texture.png。 骨骼动画控制数据，包含两大部分数据：角色各部位的骨骼链接关系；角色每个动作的定义，由每一个部位的运动轨迹组成。 在本教程，某种角色目录中，骨骼动画控制数据文件命名为skeleton.json。 现在我们以一个现成的武士DragonBones资源为基础，来进行读取和解析。 在resource.json中，加入武士相关的资源配置： {
&resources&:
{&name&:&warrior/skeleton.json&,&type&:&json&,&url&:&assets/warrior/skeleton.json&}
,{&name&:&warrior/texture.json&,&type&:&json&,&url&:&assets/warrior/texture.json&}
,{&name&:&warrior/texture.png&,&type&:&image&,&url&:&assets/warrior/texture.png&}
{&name&:&warrior&,&keys&:&warrior/skeleton.json,warrior/texture.json,warrior/texture.png&}
在Egret载入”warrior”资源组之后，即可开始解析其中的DragonBones资源，首先获得资源数据： var skeletonData = RES.getRes( &warrior/skeleton.json& );
var textureData = RES.getRes( &warrior/texture.json& );
var texture = RES.getRes( &warrior/texture.png& );
然后开始使用DragonBones解析。 本教程在Egret默认项目清理后(即教程起点项目包)的基础上进行，代码除新增函数外，均在基础项目Main.ts的createGameScene内逐渐加入。 DragonBones对资源的管理，基本的概念是工厂，可以理解为骨骼动画工厂。在一个游戏中，你可能有很多种角色要显示，但你只需要一个工厂。创建一个工厂的程序： var factory = new dragonBones.EgretFactory();
每一种角色，其实就是一套骨骼皮肤的组合。在DragonBones中，称为一套骨架(armature)。 只要我们将一套骨架的纹理显示数据和骨骼控制数据添加到工厂里，就可以用工厂来取出这套骨架。 接下来两行，就会将我们之前读到的资源添加到工厂： factory.addSkeletonData(dragonBones.DataParser.parseDragonBonesData(skeletonData));
factory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texture, textureData));
其中”skeletonData”(骨骼控制数据)和”textureData”(纹理分解数据)都包含骨架名信息。当DragonBones工厂加入多个骨架的数据时，它们之间将通过这个骨架名来区分。而一套骨架的骨骼控制数据和纹理数据也是通过相同的骨架名来合成该套骨架的综合数据。 本例中，现成的武士骨架名为”warrior”，这是在资源创作阶段就设定好的。
播放一个DragonBones动作前面说过，一种角色对应一套骨架。当我们需要显示某种角色时，首先将其DragonBones资源解析到工厂。 接下来，便可以轻易的用工厂建立一套骨架，用以显示其对应的角色。工厂是根据骨架名来建立骨架的： var armature = factory.buildArmature(&warrior&);
骨架可以理解为是某种角色的控制中心，但其不是直接的显示对象。 为了在舞台上显示该角色，那么我们可以用骨架的一个方法来直接取得其所控制的显示对象： var armatureDisplay = armature.getDisplay();
这里得到的是一个egret.DisplayObject，这样我们就可以放入Egret的显示列表中，并根据游戏情节需要给其进行定位，如： /// this.dispContainer 是事先创建好的egret.Sprite，并已经addChild到主文档类
this.dispContainer.addChild(armatureDisplay);
armatureDisplay.x = 200;
armatureDisplay.y = 450;
注意骨架显示对象的定位基准是该骨架创作时的注册点。这也是创作时需要规范好的。 现在编译项目(egret build)，然后通过http方式打开launcher/index.html，已经可以看到武士显示出来了：
然后，开始播放一个基本的动作： armature.animation.gotoAndPlay(&ready&);
注意，该动作ready也是在资源创作阶段约定好的动作名。播放动作时，必须确保该动作名在资源中有定义！ 现在，再次编译项目，打开页面，会发现仍无变化！ 这是由于动作的播放是需要定时推进的，即需要一个类似ENTER_FRAME的侦听处理，或者注册一个Ticker触发器。 首先，DragonBones对动作推进使用了一个时钟管理器。当某个现有的骨架需要动作播放时，在时钟管理器上加入该骨架： dragonBones.WorldClock.clock.add(armature);
然后加入一个定时推进触发器。可以用ENTER_FRAME： this.addEventListener( egret.Event.ENTER_FRAME, function():void{
dragonBones.WorldClock.clock.advanceTime( 0.01 );
}, this );
或者也可以用Ticker： egret.Ticker.getInstance().register(function (advancedTime) {
dragonBones.WorldClock.clock.advanceTime(advancedTime / 1000);
注意定时推进触发器只需要一个即可，因为两个都加入会产生叠加效果。 不过从精确时间控制的角度考虑，建议用Ticker，因为Ticker的每次推进回调会传入时间间隔，这样可以消除Ticker间隔波动造成的动作播放进度误差。如果使用ENTER_FRAME还需要额外的代码才能达到该目的。 现在，再次编译项目，打开页面，没有问题的话，武士应该已经动起来了！注意：ready只是一个原地待命的动作。 加入另一个骨架角色，并播放各自的动作在resource.json中，加入机器人相关的资源配置： {
&resources&:
{&name&:&warrior/skeleton.json&,&type&:&json&,&url&:&assets/warrior/skeleton.json&}
,{&name&:&warrior/texture.json&,&type&:&json&,&url&:&assets/warrior/texture.json&}
,{&name&:&warrior/texture.png&,&type&:&image&,&url&:&assets/warrior/texture.png&}
,{&name&:&robot/skeleton.json&,&type&:&json&,&url&:&assets/robot/skeleton.json&}
,{&name&:&robot/texture.json&,&type&:&json&,&url&:&assets/robot/texture.json&}
,{&name&:&robot/texture.png&,&type&:&image&,&url&:&assets/robot/texture.png&}
{&name&:&warrior&,&keys&:&warrior/skeleton.json,warrior/texture.json,warrior/texture.png&}
,{&name&:&robot&,&keys&:&robot/skeleton.json,robot/texture.json,robot/texture.png&}
不同的骨架加入工厂的代码都是一样的，因此将这部分代码整合到一个函数，传入工厂、骨架名称和骨架目录名，即可： private addArmatureToFactory( factory:dragonBones.EgretFactory, name:string, directory:string ){
var skeletonData = RES.getRes( directory + &/skeleton.json& );
var textureData = RES.getRes( directory + &/texture.json& );
var texture = RES.getRes( directory + &/texture.png& );
factory.addSkeletonData(dragonBones.DataParser.parseDragonBonesData(skeletonData));
factory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texture, textureData));
这样，建立工厂后，我们先把武士和机器人的两套资源加入工厂： var factory = new dragonBones.EgretFactory();
this.addArmatureToFactory( factory, &warrior&, &warrior& );
this.addArmatureToFactory( factory, &robot&, &robot& );
则创建一个武士角色并显示的代码变为： var amtWorrior:dragonBones.Armature = factory.buildArmature( &warrior& );
var dispWorrior = amtWorrior.getDisplay();
this.dispContainer.addChild(dispWorrior);
dispWorrior.x = 160;
dispWorrior.y = 200;
dispWorrior.scaleX = dispWorrior.scaleY = .7;
amtWorrior.animation.gotoAndPlay(&ready&);
dragonBones.WorldClock.clock.add(amtWorrior);
注意，为了同时显示两个角色，骨架显示对象的位置进行了调整。 编译运行，除了位置变化，动作效果应该跟修改前一样。 然后我们类似的，创建一个机器人角色，并播放单脚舞姿动作： var amtRobot:dragonBones.Armature = factory.buildArmature( &robot& );
var dispRobot = amtRobot.getDisplay();
this.dispContainer.addChild(dispRobot);
dispRobot.x = 330;
dispRobot.y = 230;
amtRobot.animation.gotoAndPlay(&oneLegStand&);
dragonBones.WorldClock.clock.add(amtRobot);
编译运行，两种不同角色有各自的动作同时显示出来，如图所示：
播放另一个骨架的动作，即动画拷贝功能通常设计不同的骨架，各自都有不同的动作。如果某套骨架在设计时不包含某个动作，而另一套骨架有这样现成的动作，并且可以套用，那将会节省很多设计工作量。 从Egret1.5.1起，已经有了这样的功能！ 比如前一节的单脚舞姿动作，是机器人骨架设计时包含的。那么武士播放这个动作就可以调用工厂的copyAnimationsToArmature方法，我们再创建一个骨架，来测试该功能： var amtWorriorUseRobot:dragonBones.Armature = factory.buildArmature( &warrior& );
var dispWorriorUseRobot = amtWorriorUseRobot.getDisplay();
factory.copyAnimationsToArmature( amtWorriorUseRobot, &robot& );
this.dispContainer.addChild(dispWorriorUseRobot);
dispWorriorUseRobot.x = 180;
dispWorriorUseRobot.y = 290;
dispWorriorUseRobot.scaleX = dispWorriorUseRobot.scaleY = .7;
amtWorriorUseRobot.animation.gotoAndPlay(&oneLegStand&);
dragonBones.WorldClock.clock.add(amtWorriorUseRobot);
编译运行，会看到武士跟机器人完美地同步进行单脚跳舞动作，如图所示：
Egret1.5.1新增的其他DragonBones功能有一个功能是使指定动作停止在指定的秒数，用跟MovieClip类似的gotoAndStop方法。另外一个是控制动画倒序播放，在gotoAndPlay返回的AnimationState上调用setTimeScale。 在createGameScene最后加入如下代码来测试这两个功能： this.nTap = 0;
this.nTimeScale =
var self:Main =
this.stage.addEventListener( egret.TouchEvent.TOUCH_TAP, function( evt:egret.TouchEvent ):void{
switch ( ++self.nTap ){
amtWorriorUseRobot.animation.gotoAndStop( &squat&, 1 );
if( self.nTimeScale == undefined ){
/// 第二次首先取得默认的timeScale值
self.nTimeScale = amtRobot.animation.gotoAndPlay( &run& ).timeS
console.log( &nTimeScale design value:&, self.nTimeScale );
/// 后续点击均切换正逆序播放动画
self.nTimeScale *= -1;
console.log( &nTimeScale switch:&, self.nTimeScale );
amtRobot.animation.gotoAndPlay( &run& ).setTimeScale( self.nTimeScale );
}, this );
代码所需的两个成员需要在类中定义： private nTap:
private nTimeScale:
该段测试代码用舞台触摸触发进行。第一次触摸测试gotoAndStop功能。 第二次及后续触摸均为测试逆序播放动作动画，每次点击切换正逆序。 其中，gotoAndStop功能，第二个参数是时间推进的秒数。动作的timeScale值是在资源创作阶段设定的，不同的动作可能有不同的值，所以为了保证逆序播放某个动作动画与正序播放有相同的速率，需要先取到这个初始值。 编译运行，触碰舞台会看到这两个功能正常运行，如图所示：
结语本教程主要介绍了DragonBones在程序使用阶段的基本用法，以及到目前(Egret 1.5.1)为止的一些新用法。展示了Egret版DragonBones的强大功能。 以后，会根据情况补充DragonBones的相关教程，帮助开发者自如的创作强大的骨骼动画游戏。
&&&&&&&&&&&
阅读(5279)
我可能需要关注的开源项目? >
我可以选择哪些技术支持? >
我可以选择哪些培训方式？>
过去的内容？>
(已满) (已满) (已满) (已满) (未满)
Copyright (C) . 京ICP备号 京公网安备02