骨骼动画

cocos2dx 3.0 简单使用 CocoStudio Animation Editor

时间 2014-05-18 00:14:23  CSDN博客原文  http://blog.csdn.net/shun_fzll/article/details/26096541

原来有一两个人说我不帅的时候，我不以为意，逗我玩而已，后来几乎所有

人都说我不帅，我才真正意识到事态的严重，这社会骗子真是越来越多了...

好吧我承认，这个笑话不好笑，其实我想说的是，做人一定要坚持自己的原则，

哪怕有一天所有人都和你背道而驰，都不要放弃自己当初的梦想，如果有一天，

我们淹没在人海之中，庸碌一生，那是因为我们不够努力，不够勇敢的去面对生活。

每天 积累一点点，嗯，满足简单的快乐。

--------------------------------------------------------------------------------------------

先来一张效果图，觉得太丑请自行忽略～～好吧，不会做gif图，求大神支招

昨天写了一篇关于怎么使用CocoStudio UI Editor的博文，有需要可以点这里   传送 门 ，然后今天看了一下animation editor的用法，觉得这东西其实还是蛮简单的，不过竟然折腾了一下午 （不小心又暴露了水平，哈哈） 人总是在不断成长中收获自己，认识自己，然后总会不断的去感悟和体验生活，恩，扯远了。。。

首先打开Animation Editor 这玩意，然后新建一个工程 “NewAnimation” 名字当然随意取啦，然后我们先看下面这一张图

首先，先忽略这张丑图。。。

简单介绍：（真的很简单）

1.Animation Editor这玩意有两种模式，分别是形体模式 和 动画模式 ，点击可以变身的，

2..对象结构和属性面板。

3.资源面板，可以直接拖文件进来

4.工具栏，可以创建骨骼，隐藏骨骼等等

先拼图：

1.导入资源（其实资源都来自cpp-test）

2.把图片资源拖到左边的面板中，注意一下，点击图片可以设置旋转角度的哦， 看到图片中的大保健了木有，按LOL小智的话来讲，就是虽然我短，但是我可以旋转。

3.拼接成一个小人

然后是创建骨骼：

1.点击框框4中的一个“创建骨骼”按钮，然后在面板中鼠标点击的位置就是骨骼的位置，一般我们放在你要绑定骨骼的图片资源上。

2.右键你的图片资源，然后选择绑定到骨骼，然后鼠标移动到你需要绑定的骨骼上，这时候会高亮显示，单击骨骼，绑定成功

3.然后你会发现对象结构面板里 图片 和 骨骼 合体了有木有

需要注意的是：

1.骨骼有两种形态，一种是4个方向舒展的（下图标注3），一种是一个方向的子骨骼（下图1，2）

2.单击屏幕是创建4个方向形态的，单击屏幕然后拖动是创建子骨骼

3.骨骼可以有父节点，比如下面这张图，2是1的父亲，2动1也要跟着动

把所有我们需要活动的图片都绑定上骨骼，然后切换到动画模式

然后我们看下面这张图。。。

      1.动作列表： 在这里添加你需要的动作，我这里已经添加了俩个

2.属性面板：对应骨骼的属性，你可以设置每一帧这个骨骼的属性（比如旋转啊，移动啊。。）

3.动画帧面板：下面一个个comet，bone1，bone2。。。对应的就是图片中的骨骼了，对应右边是这些骨骼的帧动画状态（比如bone1 在第5，10，15，20，25，30帧下面有一个小白点，说明在这些个帧都有一个画面，这些画面组成了bone1的动画）

4.添加关键帧，就是添加途中小白点的意

然后值得一提的是，右击帧可以隐藏这些帧图像，点击这些小白点，也就是帧片段，比如点击bone1的第5帧画面，可以设置他的帧曲线（右下角），让动作看起来不那么僵硬，好吧，我用的也不多，再说就要暴露些神马了。。

还有 一个小技巧就是，我们可以选择bone1 ，bone2，bone3.等所有的骨骼，选中第0帧的小白点，然后复制，然后在结束帧第30帧粘贴上去 ，这样子可以保证开始和结束是同一帧，然后在中间帧设置一下骨骼的属性（旋转角度，移动距离等），比如我们可以在第15帧设置骨骼的属性，然后在分别在第5，10，20，25帧直接创建小白点，这样子他会自动设置第5，10，20，25这些帧属性的值（其实就是取均值）

恩，添加完后可以播放看一下效果哦～～

然后导出资源，放入程序Resoures文件夹

等等，Comet.plist是神马东西？

其实这是一个粒子属性的plist文件。在程序代码中，可以用plist文件来创建粒子，也可以使用 ParticleSystemPoint或者 CCParticleSystemQuad来创建

具体我就不解释了，给出一篇文章  cocos2d-x CCParticleSystem粒子系统  

或者可以直接参考cpp-test，这个真心是一个好东西，发现好多人不看cpp-test然后在群里面直接问这里问那里，恩，虽然我以前也这样子。。。

这里我们使用plist让头部喷火， 没错，老板再不发工资就发火了 （我们可以让comet在第0帧隐藏，然后在第30帧显示，也就是等其他骨骼执行完后我们再喷火）

然后就是在代码中如何使用这些动画，我们把操作都放在这一个Layer中

头文件如下

#pragma once #include "cocos2d.h"#include "cocostudio/CocoStudio.h"#include "ui/CocosGUI.h"using namespace cocos2d;using namespace cocostudio;using namespace ui;class CocoStudio_AnimationTest : public Layer{public:  virtual bool init();  CREATE_FUNC(CocoStudio_AnimationTest);  //动画监听事件  void animationEvent(cocostudio::Armature *armature, cocostudio::MovementEventType movementType, const std::string& movementID);};

cpp文件如下，代码就没神马好解释了吧， 这玩意随便看看就能懂（不装会死？）

#include "CocosStudio_AnimationTest.h"bool CocoStudio_AnimationTest::init(){  if(!Layer::init()){    return false;  }  auto visibleSize = Director::getInstance()->getVisibleSize();  //如果资源太大太多可以用这种方式加载//ArmatureDataManager::getInstance()->addArmatureFileInfoAsync("xxx.ExportJson", this, schedule_selector("回调函数"));  ArmatureDataManager::getInstance()->addArmatureFileInfo("cocosAnimation/NewAnimation.ExportJson");  Armature* armature = Armature::create("NewAnimation");  armature->getAnimation()->play("GOGOGO");  armature->setPosition(Point::ZERO);  armature->setAnchorPoint(Point::ZERO);  armature->setScale(0.5f);  this->addChild(armature);  //添加动画监听   armature->getAnimation()->setMovementEventCallFunc(CC_CALLBACK_0(CocoStudio_AnimationTest::animationEvent, this, std::placeholders::_1, std::placeholders::_2, std::placeholders::_3));}void CocoStudio_AnimationTest::animationEvent(cocostudio::Armature *armature, cocostudio::MovementEventType movementType, const std::string& movementID){   if (movementType == LOOP_COMPLETE){     if (movementID == "GOGOGO"){       //       ActionInterval *actionToRight = MoveTo::create(2, Point(800 , 0));       armature->stopAllActions();       armature->runAction(actionToRight);       armature->getAnimation()->play("GOGOGO_2");     }else if(movementID == "GOGOGO_2"){       //        ActionInterval *actionToLeft = MoveTo::create(2, Point::ZERO);       armature->stopAllActions();       armature->runAction(actionToLeft);       armature->getAnimation()->play("GOGOGO");     }   }}

好吧，还是解释一下，大概就是我们让这小人执行完动作GOGOGO然后跑到右边，再执行GOGOGO_2，然后再跑到左边，然后循环。。。

恩，大概就这样子