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 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
jquery实现拖动效果
2016/08/10 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
python3人脸识别的两种方法
2019/04/25 Python
numpy数组广播的机制
2019/07/12 Python
python动态视频下载器的实现方法
2019/09/16 Python
python实现取余操作的简单实例
2020/08/16 Python
Python函数调用追踪实现代码
2020/11/27 Python
Python实现粒子群算法的示例
2021/02/14 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
电脑教师的自我评价
2013/12/18 职场文书
年度考核评语
2014/01/19 职场文书
小学生学习感言
2014/03/10 职场文书
小学生家长寄语
2014/04/02 职场文书
卖车协议书
2014/04/21 职场文书
英文求职信范文
2014/05/23 职场文书
期末考试复习计划
2015/01/19 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
导游词之安徽九华山
2019/09/18 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
mysql序号rownum行号实现方式
2022/12/24 MySQL