cocos2dx骨骼动画Armature源码分析(二)
2015-09-07 00:52
621 查看
flash中数据与xml中数据关系
上篇博文从总体上介绍了cocos2dx自带的骨骼动画,这篇介绍一下导出的配置数据各个字段的含义(也解释了DragonBone导出的xml数据每个字段的含义)。skeleton节点
<skeleton name="Dragon" frameRate="24" version="2.2">
name:flash文件名字。
frameRate:flash帧率。
version:dragonbones版本号。
armatures节点
首先是armatures节点,截取armatures中的部分数据。<armatures> <armature name="Dragon"> <b name="tail" parent="body" x="45.9" y="-70.8" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10"> <d name="parts-tail" pX="0" pY="-63.8"/> </b> <b name = "LegR" ... /> <b/> …… <b/> </armature> </armatures>
<b/>节点是一个骨骼(b是bone的缩写),<armature/>节点中含有多个<b/>,是动画的整体骨骼。如下2个图所示,整个layer和骨骼之间关系就是armature节点,红框中每一个layer就是一个b节点。
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907002253107-223324108.png)
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907002323404-1016756948.png)
<armatures>节点为什么有多个armature节点呢?因为一个flash中可能有多个骨骼动画,每个骨骼动画对应一个armature,比如下面这个flash导出后armatures里就会包含多个armature。带有帧标签的元件会被当成一个Skeleton。
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907002619545-1395289462.png)
<armatures name="Dragon">name属性是元件在库中的名字(下图),也是Skeleton的名字。
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907002941607-1164888806.png)
b节点(armature节点的子节点)
<b name="tail" parent="body" x="45.9" y="-70.8" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10">
骨骼信息,以第一帧信息为标准。
name:骨骼名字,就是TimeLine中layer名字,上图。
parent:骨骼父节点,上图。
x,y:元件旋转锚点相对于父节点原点的坐标,见下图,y方向向下为正方向。
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907003231732-740448737.png)
kX, kY:代表skewX,SkewY,一般情况2者相等,代表Rotate(旋转)大小。
cX, cY:代表scaleX, scaleY, 表示缩放大小。
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907003343576-1428934447.png)
pX, pY:代表pivotX, pivotY,旋转锚点相对于元件原点的坐标,下图调整了30度旋转。
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907003416170-1114621106.png)
z: 层级,最下面的layer是0层,逐上递加。
d节点
骨骼中显示节点,可以理解成皮肤,一个layer中用了几个库中的元件,就会有几个<d>节点。<d name="parts-tail" pX="0" pY="-63.8"/>
name:显示对象的名字,为在库中路径和元件名字的拼接。
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907003727795-533182728.png)
pX, pY: 显示对象相对于原点的位移。
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907003808811-1869658072.png)
animations节点
<animations/>节点代表了骨骼随时间的变化。<animations> <animation name="Dragon"> <mov name="stand" dr="7" to="6" drTW="30" lp="1" twE="0"> <b name="tail" sc="1" dl="0"> <f x="45.9" y="-70.8" cocos2d_x="124.1" cocos2d_y="-229.25" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10" dI="0" dr="2"/> <f x="43.9" y="-70.8" cocos2d_x="135.5" cocos2d_y="-221.95" kX="34.95" kY="34.95" cX="1" cY="1" pX="11.55" pY="176.35" z="10" dI="0" dr="3"/> <f x="45.9" y="-70.8" cocos2d_x="124.1" cocos2d_y="-229.25" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10" dI="0" dr="2"/> </b> </mov> <mov name="walk" dr="8" to="5" drTW="200" lp="1" twE="0"> </mov> <mov name="jump" dr="5" to="3" drTW="5" lp="1" twE="NaN"> </mov> <mov name="fall" dr="5" to="6" drTW="5" lp="1" twE="NaN"> </mov> </animation> </animations>
为什么<animations/>会有多个<animation/>呢?原因和<armatures/>中有多个<armature/>相同(见上文),animation和armature靠name属性一一对应。
mov节点
mov节点真正对应程序里面一个动画,TimeLine上一个帧标签就会产生一个mov,所以一个<animation/>中会有多个mov。![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907003951857-811244310.png)
<mov name="stand" dr="7" to="6" drTW="30" lp="1" twE="0">
name:帧标签名字。
dr:代表duration,mov持续多少帧,上图可知stand持续7帧。
to:真不知道是干啥的。
drTW:代表duratio_tween,动画运行多长时间,1/24*7=0.29s。在dragonbones面板上设置TotalTime会影响此值。
lp:代表loop,是否循环播放。
twE:真不知道是干啥的。
b节点(mov节点的子节点)
骨骼状态,mov中会有所有的骨骼b节点。<b name="tail" sc="1" dl="0">
name:骨骼名字
sc:代表movement_scale,不知是啥。总帧数调整,dragonBones面板可调整
dl:代表movement_delay,不知是啥。dragonBones面板中PlayDelay设置应该和其有关。
![](http://images2015.cnblogs.com/blog/776445/201509/776445-20150907004349029-2141787308.png)
f节点
<f x="45.9" y="-70.8" cocos2d_x="124.1" cocos2d_y="-229.25" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10" dI="0" dr="2"/>
对应关键帧信息。stand动画有3个关键帧,所以会有三个f节点。x,y,kX,kY,cX,cY,pX,pY,z与b节点(armature节点的子节点)中对应属性相同,cocos2d_x和cocos2d_y也不知道怎么来的。
dI:display_index 显示哪个图(<armature></armature>中<b></b>中<d></d>)。
dr: duration 帧数.
TextureAtlas节点
dragonbone导出方式可以选择,如果选择导出大图,那么TextureAtlas节点代表了大图中小图的相关信息,可以理解成TexturePacker产生的plist文件,比如<TextureAtlas name="Dragon" width="512" height="512"> <SubTexture/> <SubTexture name="parts-tail" width="108" height="139" cocos2d_pX="0" cocos2d_pY="-63.8" x="291" y="0"/> <SubTexture/> <SubTexture/> <SubTexture/> </TextureAtlas>
SubTexture节点为小图信息,width和height为长和宽,x和y为在大图中的坐标。cocos2dpX和cocos2dpY依然不晓得有什么用。
骨骼动画的配置数据就介绍到这,下一篇会介绍xml是怎么变成程序中的数据结构以及动画是如何动起来的源代码。
相关文章推荐
- 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第十一节:骨骼动画模型播放控制
- Cocos2d-x 屏幕适配新解
- cocos2d js 版斗地主,和网狐的pc端斗地主通信,能玩
- Cocos2d-js 开发记录:Loading载入界面自定义
- Cocos2d-js 开发记录:自定义按钮
- Cocos2d-js 开发记录:图片数据资源等的异步加载
- Cocos2dx 3.6.1运行html5的测试例子
- Cocos2d-x从入门到精通第12课《layer的创建与使用》
- Cocos2d-x从入门到精通第11课《锚点概念的理解》
- Cocos Studio和Cocos2d-x版本对应关系 附1.6Cocostudio版本下载地址
- cocos2dx,Layer锚点与scale缩放
- cocos2d 画中画效果
- cocos2d-x设计模式发掘之三:管理者模式
- Cocostudio 1.6 下载地址
- cocos2dx 游戏 fishes war
- quick-cocos2d-x绘制五角星精灵矩阵
- Cocos2d-x 3.x开发 -- 导入Cocos Studio资源
- cocos2dx3.3 使用cocos studio2.0 导出的.csb文件
- cocos2d-x设计模式发掘之三:管理者模式
- Cocos2d-x 断言 CCAssert 简述