cocos2dx3.2开发 RPG《Flighting》二骨骼动画介绍及游戏美术资源分享

一、前言

关于骨骼动画，如果大家不知道是什么小编的话，可以先百度一下。

如果大家有去玩过我介绍的《BattleHeart》的话，你会发现，里面用到的就是骨骼动画，而且骨骼动画有几个帧序列动画无法比拟的优点：

1）不需要太多的资源，就可以实现多种动画

2）动画效果可以自行设置（很适合像我这种没有美工MM辅助的苦逼）

3）可以随意替换，如果你有认真观察《BattleHeart》的话，你会发现，当你的英雄换了一把剑的时候，战斗的时候就用那一把剑。就是说能实现简单的换装同步。

二、正文

下面开始介绍怎么使用骨骼动画。

不得不提，cocos2dx提供了很好很强大的工具cocostudio给我们使用，使用cocostudio我们就可以很轻松地创建骨骼动画并且在项目中使用。

这里我的cocostudio版本是1.6(貌似现在已经升到2.0了)

1.在cocostudio1.6中创建一个火柴人

打开cocostudio1.6并选择动画编辑器，并且选择新建项目，进入如下界面

窗口介绍：

最右边：Resource里面放入你需要用到的资源，注意骨骼动画里面用到的资源一般是一段段的（如 前手臂，后手臂，头等）

左上角：形体模式，你可以把形体模式当做就是静态模式，通常创建骨骼动画都是先在形体模式上搭好一个人。

其实这个动画编辑器做得挺简单的，可以自己摸索一下

第一步 ：

导入所需资源，并且拼好一个人。就像玩拼图那样拼就好了。

第二步：

创建骨骼，可以这样理解，资源图片只是皮肤，一个动画真正动的是骨骼，骨骼带动皮肤。点击工具栏里面的创建骨骼按钮，即可以在我们的"皮肤"上面创建一根骨骼，需要注意的是，骨骼有主次方向之分，就是说最好中主心骨中拉出一根骨骼出来，例如我这个主心骨就是上半身，那就先创建上半身这根骨头，再从这根骨头向外扩展。这个不好描述，大家用一下就应该会有感觉了。骨骼拉完之后是这个样子的。由于我的火柴人是黑色的不好观看骨骼，所以我选择了全部，方便观察，基本上每一段就对应一根骨头

第三步：

对每一个骨骼右击，设置骨骼的父子关系，并且对每个资源右击，骨骼和资源绑定。设置父子关系，就是说谁要根据谁来转动，当父转动时，子也随之转动。好比人的前手臂和后手臂的关系，你可以只动你的前手臂（子），保持后手臂（父）不动。但是你不可能做到只动你的后手臂（父）而不动你的前手臂（子）吧。。好吧，至少我是做不到。骨骼跟资源绑定很好理解，就是让骨骼跟皮肤一一对应起来。绑定完之后基本没变化，这里就不截图了。前面已经说了，形体模式主要是负责人在不动的时候的布局，到此形体模式的工作已经做完了。

第四步：

点击左上方的形体模式按钮，切换到动画模式，界面如下。

如果有玩过Flash的，那就简单了，这不就是一个简化版的Flash动画编辑器吗。

左边动作列表：是你动作（动画）的名称，最好修改一下，因为以后在代码中调用需要用到这个名称。

中间动画帧：对于学过Flash的同学应该不用解释这是什么了，没学过的可以理解为一张张图片连续播放的序列

第五步：添加关键帧，修改关键帧的位置，旋转，大小等属性

接下来的步骤就跟flash一模一样了，cocostudio也是自动创建补间动画的，所以只需要添加关键帧并且修改关键帧的属性就好了。

在关键帧中可以旋转火柴人的身体以修改属性，很方便。做完之后记得点击播放键看看哦。很好玩吧。

第六部：导出项目。

2.在cocos2dx项目中导入骨骼动画

在项目中导入骨骼动画很方便，毕竟有专门的类

	ArmatureDataManager::getInstance()->addArmatureFileInfo("NewAnimation0.png","NewAnimation0.plist","NewAnimation.ExportJson");
	Armature *armature = Armature::create( "NewAnimation");
	armature->setPosition(Point(visibleSize.width * 0.5,visibleSize.height * 0.5));
	// 播放动画
	armature->getAnimation()->play("walk");
	this->addChild(armature);

addArmatureFileInfo的三个参数分别对应从cocostudio里面导出的那三个文件

Armature::create()的参数是项目名

armature的play函数的参数就是刚刚我们创建动画的名字。

3.在cocos2dx项目中相关配置

假如大家不会再cocos2dx-VS项目中配置cocostudio，这里给出一个很好的博客网址供大家参考

http://blog.sina.com.cn/s/blog_6d193c030101hbnf.html

至此，如何使用骨骼动画就介绍到这里了。这里附带我这个《Flighting》的这个美术资源包，骨骼动画在BoneAnimate文件夹里面

《Flighting》资源：点击打开链接

我的csdn地址：http://blog.csdn.net/hezijian22

邮箱地址：[e-mail]

如有问题或指教，请于我交流，谢谢。