实习小白::(转) 【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder(官方编辑器)完成基础骨骼动画

时间:2023-02-08 08:05:24

【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder(官方编辑器)完成基础骨骼动画

本站文章均为 李华明Himi 原创,转载务必在明显处注明:(作者新浪微博: @李华明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

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

先导入头文件:

#include "cocos-ext.h"
using namespace cocos2d::extension;
    //----------------CocosBuilder 骨骼动画----------------
    /* 创建一个自动释放的 Node 加载库 */
    CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();

    /* 创建一个 CCBReader,并设置自动释放 */
    cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);
    ccbReader->autorelease();

    /*读取一个ccbi的文件,生成一个CCNode实例*/
    CCNode *animationsTest = ccbReader->readNodeGraphFromFile("TestAni.ccbi", this);
    //设置坐标
    animationsTest->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width*0.5,260));
    if(animationsTest != NULL) {
        this->addChild(animationsTest);
    }

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

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

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

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

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

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

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

    //获取所有的动作序列
    CCArray* allSeq = ccbReader->getAnimationManager()->getSequences();

    for (int i=0; i<allSeq->count(); i++) {
        //获取到每一个Seq
        CCBSequence* everySeq = (CCBSequence*)allSeq->objectAtIndex(i);
        //获取每个序列动作周期、名字以及id
        everySeq->getDuration();
        everySeq->getName();
        everySeq->getSequenceId();
    }

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

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

 

实习小白::(转) 【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder(官方编辑器)完成基础骨骼动画

 

实习小白::(转) 【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder(官方编辑器)完成基础骨骼动画