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

时间:2023-02-07 23:34:08

一、前言

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

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

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

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

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


二、正文

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

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

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

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

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

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

 窗口介绍:   

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

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

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

第一步  :

导入所需资源,并且拼好一个人。就像玩拼图那样拼就好了。cocos2dx3.2开发 RPG《Flighting》(二)骨骼动画介绍及游戏美术资源分享

第二步:

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

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


第三步:

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


第四步:

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

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

如果有玩过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

邮箱地址:578690286@qq.com

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