cocos2dx骨骼动画Armature源码剖析(一)


Posted in Javascript onSeptember 08, 2015

cocos2dx从编辑器(cocostudio或flash插件dragonBones)得到xml或json数据,调用类似如下所示代码就可以展示出动画效果

ArmatureDataManager::getInstance()->addArmatureFileInfoAsync(
  "armature/Dragon.png", "armature/Dragon.plist", "armature/Dragon.xml",
   this, schedule_selector(TestAsynchronousLoading::dataLoaded));
Armature *armature = nullptr;
armature = Armature::create("Dragon");
armature->getAnimation()->playWithIndex(1);
addChild(armature);

那么调用内部是怎么实现的呢?

Armature::create和armature->getAnimation()->playWithIndex都实现了些什么呢?这几篇文章将从源码上分析Armature。

本文是Armature分析的第一篇,将从整体上对cocos2dx里的骨骼动画进行分析。涉及到内容如下:

什么是骨骼动画

编辑器导出数据格式概览

源码概述

什么是骨骼动画

游戏中的动画大体可以分成下面三种:

帧动画

补间动画(Tween)

骨骼蒙皮动画

帧动画

这个是最基本的动画,也是下面两个动画的基础,一帧展示一张图,cocos2dx Action中Animate就是帧动画。优点是实现简单,缺点是浪费资源(一帧一张图,可对比下面两种动画)。

补间动画

flash中补间动画用的比较多,不需要一帧一张图,只需起始状态和结束状态,中间的状态可以进行根据差值与经过时间计算出来。优点是节省资源,美术人员比较熟悉。

骨骼蒙皮动画

骨骼动画可以认为是补间动画的一种扩展,让动画的各个部分之间产生关联结构(骨骼),之后把图绑定到骨骼上。缺点是程序实现较复杂,其优点较补间动画有下面两点(其他优点暂时没有发现):

1.导出配置数据少并且美术制作简单

假设有一个下面这样结构的骨骼

body

armLeft

handLeft

armRight

handRight

head

legLeft

legRight

假设想在一帧中把动画整体向右移动,采用补间动画需要把body、armLeft、legRight等等全部移动,创建新的帧,而骨骼动画只需移动body的位置,其子节点会跟随父节点移动。对应导出的配置中,补间动画要处理body、armLeft等所有子节点导出的数据,而骨骼动画只有body一个节点数据的改变,导出的数据会小很多。

2.关节裂纹修复

下面的图是偷的《游戏引擎架构》449页,意思是如果美术作图时候不注意,关节链接处可能会有裂缝。采用骨骼动画可以解决这个问题,骨骼动画中的蒙皮可以按权重绑定到多个关节(骨骼中),并且可以按权重进行拉伸,cocostudio骨骼动画编辑器不熟,不知可不可多绑定,flash的dragonBones插件是不行的。 spine 对这种多绑定有不错的支持。

cocos2dx骨骼动画Armature源码剖析(一)

编辑器导出数据格式概览

cocostudio导出的json结构和dragonbones导出的xml结构相似,都是骨骼层,动画层,图片层三层结构,已dragonbones官方的demo为例(有删减):

<skeleton name="DragonBones_Tutorial_MultiBehavior" frameRate="24" version="2.2">
 <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>
  </armature>
 </armatures>
 <animations>
  <animation name="Dragon">
   <mov name="stand" dr="7" to="6" drTW="100" lp="1" twE="0">
   </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>
 <TextureAtlas name="DragonBones_Tutorial_MultiBehavior" width="512" height="512">
 </TextureAtlas>
</skeleton>

<armatures></armatures>是骨骼部分,对应flash中1区域,一个layer就是一个bone。

<animations></animations>是动画部分,对应flash中2区域,用帧标签区分哪个动画,比如stand、walk、jump等。

<TextureAtlas></TextureAtlas>是骨骼部分,对应flash中3区域,是皮肤,也就是图信息。

有了这些信息,就可以在程序中还原flash中的动画效果,具体dr、drTW、x、kX、kY等等是什么意思之后的文章里会说。

cocos2dx骨骼动画Armature源码剖析(一)

源码概述

代码大体可以分成xml或json数据的解析 和 用解析出的数据产生动画两部分。

数据解析的相关代码的UML

cocos2dx骨骼动画Armature源码剖析(一)

大致介绍下每个类的作用:

DataReaderHelper:解析armatures、animations、TextureAtlas的数据生成程序能直接使用的数据结构ArmatureData、AnimationData、TextureData。

ArmatureDataManager:管理DataReaderHelper及其解析出来的数据。

ArmatureData:对应xml中的<armature></armature>。

AnimationData:对应xml中的<animation></animation>。

TextureData:对应xml中的<SubTexture></SubTexture>。

BoneData:对应xml中的<b></b>。

DisplayData:对应xml中的<d></d>。

MovementData:对应xml中的<mov></mov>。

MovementBoneData:对应xml中的<mov><b></b></mov>。

FrameData:对应xml中的<mov><b><f></f></b></mov>。

产生动画相关代码的UML

cocos2dx骨骼动画Armature源码剖析(一)

大致介绍下每个类的作用:

Armature:里面包含了骨骼信息及动画信息,有个这个就可以播放动画。

Tween:骨骼动画的补间,一个骨骼一个Tween。对应上面的flash面板就是stand动画的tail层的第一到第七帧。

ArmatureAnimation:所有Tween的集合,够成一个动画。

Bone:带有Tween的骨骼信息,从这里面可以得到某个时间点的骨骼状态。

DisplayFactory:创建skin等显示对象。

DisplayManager:每个Bone中有一个,管理骨骼上的显示对象。

Skin:图的显示对象。

以上内容就是三水点靠木的小编给大家分享的cocos2dx骨骼动画Armature源码剖析(一),希望大家喜欢。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 #Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 #Javascript
js图片轮播特效代码分享
Sep 07 #Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 #Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 #Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 #Javascript
JavaScript简单下拉菜单实例代码
Sep 07 #Javascript
You might like
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
React中使用UMEditor的方法示例
2019/12/27 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
浅谈Python中函数的参数传递
2016/06/21 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
django中模板的html自动转意方法
2018/05/27 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Python3 元组tuple入门基础
2020/02/09 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
酒店个人求职信范文
2014/01/25 职场文书
企业内部培训方案
2014/02/04 职场文书
大四自我鉴定
2014/02/08 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
员工安全生产承诺书
2014/05/22 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
奖金申请报告模板
2015/05/15 职场文书
信仰纪录片观后感
2015/06/08 职场文书
四年级语文教学反思
2016/03/03 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers