【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

时间:2023-02-08 08:00:25

 本站文章均为 李华明Himi 原创,转载务必在明显处注明:

转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/cocosbuilder/1061.html

          ☞ 点击订阅 ☜
 本博客最新动态!及时将最新博文通知您!

 

关于CocosBuilder 已经成为cocos2d、cocos2dx的官方编辑器,主要作用是场景编辑器、新版本中还已经支持了骨骼动画。【对于CocosBuilder Himi最新书籍中也有讲述】

对于骨骼动画,其实类似动作编辑器,将图的切片组成一帧,然后设置时间轴事件(序列动画),[动编里则是将每一帧按照一定的时间进行播放],多的不说了,对于动作编辑器、切片等都不太熟悉的童鞋请自行搜索相关文章吧,下面进行本篇的内容。

     首先声明:最新的cocosbuilder 与 coco2d 、cocos2dx联合发布了新版,所以!对于使用最新的cocos2d-2.1beta3-x-2.1.0  的童鞋,请你下载最新的cocosbuilder 3.0 alpha版本!

cocosbuilder 下载地址: http://cocosbuilder.com/?page_id=11

(细心的童鞋应该知道,Himi博客最下方的“友情链接”里很多有用的地址的说)

下载好最新的3.0 cocosbuilder ,那么请打开它,然后我们进行创建一个骨骼动画吧:

     1.  首先创建一个项目,在cocosbuilder中的菜单一栏选择“File”-“New Project”,如下图:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

 

 

      2. 继续创建一个我们的骨骼动画的子节点“,选择“FIle”-“New File”,如下图:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

选中后进入如下页面:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

这里,我们选择CCNode 节点,然后将“Full screen”的勾选去掉,我们不需要全屏。

点击“Create”后,会要求你选择存放目录,这里可能会出现如下提示:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

如果出现这个提示是要求你设置配置一些路径,解决方案:

1)配置“File”-“Project Settings…”的路径

2)直接将创建的CCNode放在你创建cocosbuilder目录的Resources目录下即可,如下图:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

 

以上步骤创建好后则如下图所示:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

这里需要注意的是,当你创建一个Project时,这里默认会有cocosbuilder的例子相关文件:

ccbResources 文件夹、clikme-down.png、clime.png、MainScene.ccb、MainScene.js,

我们将这些都删掉,让童鞋们更容易理解。(删除操作去目录下删除吧)

另外,animated-grossini.plist 以及 animated-grossini.png 是打包好的骨骼碎片,如下图

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

对于碎图整理打包,Himi推荐使用TexturePackage (TP),博客最下方有其地址(收费)

3. 当一个plist 、png的资源放入cocosbuilder中,默认此plist文件可以点开,并且对其中的每个碎图进行拖拽,如下图所示:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

下面我们就将plist下的每个图都拖拽到“骨骼动画视图”中吧,然后拼成一个小人,如下图:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

 

4. OK,继续,我们调整时间轴将其调整到1秒的位置,然后我们选中小人的头部!然后在cocosbuilder的菜单项中选择“Animation”-“Insert KeyFrame”,如下图:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

然后调整其切片属性的角度为90度,重复上述的步骤,将时间轴调回到0秒初始时,设置其头部角度为0度,完成后如下图:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

童鞋们点击下播放试试效果吧,是不是很嗨皮~有意思吧。

当然你也可以在同一时间让当前帧或者其他切片一些操作例如缩放、平移、透明度、颜色等。

5.下面对整个动画进行整体的调整设置吧:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

默认创建的动作都是10秒的周期,利用Set TimeLine Duration设置周期即可。

这里我们再简单设置下动作的名字吧:
选择“Edit TimeLines…”,出现如下界面:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

 

TimeLine Name :动作列表(默认名字为:Untitled Timeline  ,这里改成wave)

Duration:完成这个动作所需的时间

Autoplay:是否自动播放

 

需要提醒的是,如下图:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

   上图中的红色标记是表示“选择当前动作播放完成后,继续播放的下一个动作” 用以完成连贯动作。

6. 最后一步是将编辑好的骨骼动作,编译称cbbi文件吧:

选择cocosbilder菜单栏“FIle”-“Publish”   ,如下图:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

然后你将在你的项目文件夹中看到编译后的两个文件夹,“Published-iOS”、“Published-HTML5” 如下图所示:

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

Published-HTML5给HTML项目用的这里我们看 “Published-iOS”这个文件夹,这个文件夹中除了我们自己的plist与png资源文件外,还有一个编辑出来的切片动作信息文件ccbi文件,main.js也不用管,我们直接将如下三个文件拷贝到我们的cocos2dx项目中并且添加到项目中:

animated-grossini.plist、animated-grossini.png、TestAni.ccbi

下面我们来书写使用代码段吧,直接上代码了,比较简单:

先导入头文件:

  
 
 
  1. #include "cocos-ext.h" 
  2. using namespace cocos2d::extension; 
  3.  
  4. //----------------CocosBuilder 骨骼动画---------------- 
  5. /* 创建一个自动释放的 Node 加载库 */ 
  6. CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary(); 
  7.   
  8. /* 创建一个 CCBReader,并设置自动释放 */ 
  9. cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary); 
  10. ccbReader->autorelease(); 
  11.   
  12. /*读取一个ccbi的文件,生成一个CCNode实例*/ 
  13. CCNode *animationsTest = ccbReader->readNodeGraphFromFile("TestAni.ccbi"this); 
  14. //设置坐标 
  15. animationsTest->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width*0.5,260)); 
  16. if(animationsTest != NULL) { 
  17.     this->addChild(animationsTest); 

以上代码注释的比较清楚了,是从ccbi文件中将我们创建的骨骼动画解析读取出来,然后返回一个CCNode对象

下面我们让其进行动画的播放:

 

  
 
 
  1. //播放一个动作:根据动作名称进行播放 
  2.     ccbReader->getAnimationManager()->runAnimationsForSequenceNamed("wave"); 

以上的ccbReader是我们通过ccbi读取获取到的一个实例对象,这里放置了我们编辑所有动画序列,所有动作,另外当我们ccbi中有N个动作的话,那么这N个动作的下标默认:0,1,2,3,4,5….n-1

因此我们还可以利用动作下标进行播放动作:

 

  
 
 
  1. ccbReader->getAnimationManager()->runAnimationsForSequenceIdTweenDuration(0, 0.3f); 

这里Himi也顺便将动作的名字、周期时间、下标都打印出来供大家参考:

 

  
 
 
  1. //获取所有的动作序列 
  2. CCArray* allSeq = ccbReader->getAnimationManager()->getSequences(); 
  3.   
  4. for (int i=0; i<allSeq->count(); i++) { 
  5.     //获取到每一个Seq 
  6.     CCBSequence* everySeq = (CCBSequence*)allSeq->objectAtIndex(i); 
  7.     //获取每个序列动作周期、名字以及id 
  8.     everySeq->getDuration(); 
  9.     everySeq->getName(); 
  10.     everySeq->getSequenceId(); 
 

OK,基本上比较easy,下面是运行效果图与源码和资源下载地址:

资源与项目下载地址:   http://vdisk.weibo.com/s/kCT5z

 

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

 

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画