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 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 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
解析PHP 5.5 新特性
2013/07/02 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
php和asp语法上的区别总结
2019/05/12 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
python实现excel读写数据
2021/03/02 Python
了解一下python内建模块collections
2020/09/07 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
八项规定对照检查材料
2014/08/31 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
学术会议领导致辞
2015/07/29 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers