cocosBuilder播放动画

最新推荐文章于 2015-10-08 15:46:16 发布

z_w_c_小文

最新推荐文章于 2015-10-08 15:46:16 发布

阅读量3k

点赞数

分类专栏： cocosbuilder

cocosbuilder 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Working with Animations

动画

You can use CocosBuilder for creating character animations, animating complete scenes or just about any animation you can imagine. The animation editor has full support for multiple resolutions, easing between keyframes, boned animations and multiple timelines to name a few of the features.

你可以使用CocosBuilder创建角色动画，场景动画或者其他一些动画。动画编辑器完全支持多分辨率，动画关键帧，骨骼动画以及多条时间轴等功能。

The Basics

基础

In the bottom of the main window you can find the timeline. You use the timeline to create your animations.

在下图中你可以看到时间轴，你可以使用时间轴来创建你的动画。

By default your ccb-file has a single timeline that is 10 seconds long. CocosBuilder edits animations at a frame rate of 30 frames per second, but when you play back the animation in your app it will use whatever you have set cocos2d to use (the default in cocos2d is 60 fps). The current time is displayed in the top right corner, and has the format minute:second:frame. The blue vertical line also shows the current time. Click the time display to change the duration of the current timeline.

默认情况下你的ccb文件仅有一条长为10秒钟的时间轴。Cocosbuilder以每秒钟30帧的速率编辑动画，但当你的你的应用中播放动画的时候，动画将以你在cocos2d中设置的速率播放（默认是60fps）。当前的时间在右上角显示出来，格式为分钟：秒：帧。蓝色竖线也显示了当前的所在的时间。点击上方的时间显示（水平进度条）来改变当前时间轴单位时间之间的距离。

Adding Keyframes

添加关键帧

Animations in CocosBuilder are keyframe based. You can add keyframes to different properties of a node and CocosBuilder will automatically interpolate between the keyframes, optionally with different types of easing.

CocosBuilder中的动画是以关键帧为基础的。你可以为节点的不同属性添加关键帧，CocosBuilder会自动地在关键帧中插入不同类型的过渡效果。

To add a keyframe, first expand the view of the node by clicking the triangle to the right of the name of the node. This will reveal all the animatable properties of the node. What can be animated varies slightly depending on what type of node you have selected. Once the properties are visible you can click the property in the timeline with the option key held down. This will create a new keyframe at the time of the click. Alternatively, you can create a new keyframe at the time of the time marker by selecting a node then choosing Insert Keyframe in the Animation menu.

首先通过点击节点名称左边的小三角展开节点。这将把节点中所有可制作动画的属性展现出来。根据你所选择节点类型的不同，可以制作成动画的属性会有少许不同。按住键盘上的option键，点击时间轴上的属性，这将在你当前点击的时间点上建立一个关键帧。或者，选中节点后，你可以通过Animation菜单中的Insert Keyframe（插入关键帧）子菜单来创建一个关键帧。

Keyframes are automatically added at the current time if you transform a node in the canvas area, given that the transformed property already has one or more keyframes in the timeline.

如果你在画布区域对节点进行变形的操作，那么在当前时间点会自动创建一个关键帧。

Editing Keyframes

编辑关键帧

You edit a specific keyframe of a node by moving the time marker to the time of the keyframe and selecting the node. You can focus on a keyframe by double clicking it (which will select the node and move the time marker).

如果你要编辑一个关键帧，你要先选中节点，然后把时间标记移动到关键帧的时间点上。你可以通过双击一个关键帧把它设置为焦点（这个操作会选中节点并移动时间轴）。

You can select keyframes and move them together by dragging a selection box around them. You can also copy and paste keyframes between nodes. Make sure you only have one selected node when pasting the keyframes. The keyframes will be pasted starting at the time of the time marker.

你可以把关键帧进行框选后一起移动。你还可以在节点间拷贝粘贴关键帧。当你粘贴关键帧的时候，确保你只选中了一个节点。

If you have selected a set of keyframes it is possible to reverse the order of them by selecting Reverse Selected Keyframes in the Animation menu. Use the Stretch Selected Keyframes… option to speed up or slow down an animation by a scaling factor.

如果你选中了一组关键帧，那么你可以通过Animation菜单中的Revert Selected Keyframes（反转选定关键帧）子菜单来把它们的顺序反转。通过Stretch Selected Keyframes…（拉伸选定关键帧）子菜单来加速或者减缓你的动画（通过输入缩放系数）。

Importing a Sequence of Images

导入一系列图片

If you have an animation created by sprite frames it can be tedious to move each individual frame to the timeline. CocosBuilder simplifies this process by automatically importing a sequence of images. Select the frames that you want to import in the left hand project view, then select a CCSprite in the timeline. Now choose Create Frames from Selected Resources in the Animation menu. The frames will automatically be created at the start of the marker. If you need to slow down the animation, select the newly created keyframes and use the Stretch Selected Keyframes… command.

如果你的动画是通过一组精灵帧实现的，你可以把每一个单独的帧拖放到时间轴上去，但是CocosBuilder简化了这个过程，你可以一口气导入一系列图片资源。在左侧的项目视图中，选择你想要导入的一系列动画帧的资源图片，在时间轴上选择CCScprite（精灵），然后在Animation菜单中选择Create Frames from Selected Resources子菜单，这些帧会自动地在时间点的起始位置创建。如果你想放慢动画，选择刚刚创建好的关键帧并使用Stretch Selected Keyframes…子菜单来达到这个效果。

Applying Easing

使用关键帧过渡

CocosBuilder offers a carefully selected subset of the easings provided by cocos2d. To apply an easing right click between two keyframes and select the type of easing that you want to apply.

CocosBuilder提供了精心挑选的一组cocos2d的过渡（Easing）效果。在两个关键帧中点击右键然后选择你想要的过渡效果。

Some of the easings have additional options, after the easing has been applied you can right click again and select Easing Setting… from the popup menu.

有一些过渡效果有一些额外的参数，使用过渡效果后你可以再次右键点击并从弹出菜单中选择Easing… Setting（过渡设置）。

Using Multiple Timelines

使用多条时间轴

A very powerful feature of CocosBuilder's animation editor is the ability to have multiple timelines in a single file. You can name the different sequences and play them back from your code by using their name. It's even possible to smoothly transition between the different timelines.

CocosBuilder动画编辑器一项最为强大的功能是在一个文件中使用多条时间轴。你可以为不同的序列命名并在你的代码中通过这个名字来调用这个动画。更牛X的是你可以在不同的时间轴间实现无缝过渡。

To select, add or edit your timelines use the timeline popup menu:

在时间轴的弹出菜单中选择：添加或者是编辑你的时间轴：

In the edit timelines dialog you can get an overview of your timelines, rename them, add new ones and (optionally) set one of the timelines to automatically start playback directly when the ccbi-file is loaded by your app.

在编辑时间轴的对话框中，你会看到你的时间轴的概要信息，你可以重命名，添加一个新的时间轴或者指定其中一个时间轴作为当ccbi文件加载时自动播放的时间轴。

Properties in timelines that do not have keyframes set share their values across timelines. E.g. if you move one node in one timeline it will be moved in all timelines as long as they do not have a keyframe set for the position property. It can sometimes be useful to add a single keyframe to a property just to override the shared value for a specific timeline.

如果一个时间轴的属性上没有设定关键帧，那么它就会被其他时间轴的关键帧所影响，比如：如果你在一个时间轴里移动了一个节点，它也会在所有没有定义位置关键帧的时间轴里面移动。你可以通过给一个时间轴设定一个单帧来避免被其他时间轴的关键帧所覆盖。

Chaining Timelines

链接时间轴

You can automatically play back a sequence of timelines by chaining them. You can also use this feature for automatically looping a timeline.

你可以把多条时间轴链接起来并播放。你也可以利用这个功能来自动地循环播放一条时间轴。

To have a timeline play in sequence, click the No chained timeline text and select the timeline you want to play right after the current one.

如果要使用链接时间轴的功能，点击No chained timeline（无链接时间轴）文字并选择当前时间轴结束后你想继续播放的时间轴。

Playing Back Animations in Code

在代码中播放动画

To programmatically control the animations you create with CocosBuilder you will need to retrieve the CCBAnimationManager. The animation manager will be assigned to the nodes userObject when the ccbi-file is loaded.

为了让CocosBuilder创建的动画在你的代码中播放，你需要使用CCBAnimationManager。在ccbi文件加载时，动画管理器会被指定给userObject节点。

CCNode* myNodeGraph = [CCBReader nodeGraphFromFile:@"myFile.ccbi"];

CCBAnimationManager* animationManager = myNodeGraph.userObject;

The animation manager will be returned as an autoreleased object. To play back a specific timeline call the runAnimationsForSequenceNamed: method. If a timeline is currently playing it will be immediately stopped when calling this method.

动画管理器会返回一个自释放的对象。调用runAnimationsForSequenceNamed:方法来播放一个指定的时间轴。如果一个时间轴已经在播放了，它会被立即停止。

[animationManager runAnimationsForSequenceNamed:@"My Timeline"];

Optionally, you can use a tween duration to smoothly transition to the new timeline. Where possible linear interpolations will be used for the transition.

或者你也可以使用tweenDuration参数平滑地过渡到一个新的时间轴。

[animationManager runAnimationsForSequenceNamed:@"My Timeline" tweenDuration:0.5f];

It is also possible to receive a callback whenever a timeline has finished playing. You will receive these callbacks even if another timeline is chained in sequence. Use the CCBAnimationManagerDelegate to receive the callbacks.

还可以为时间轴播放完毕时设定一个回调函数。就算有另外一个时间轴被链接起来，你还是可以使用这些回调函数。使用CCBAnimationManagerDelegate来接收回调函数。

[cocos2dx开发技巧4]工具CocosBuilder的使用–复杂动画

转发，请保持地址：http://blog.csdn.net/stalendp/article/details/8760957

一个网友推荐过一款制作动画的工具，叫做 Spriter；其中有个Demo介绍怎么制作游戏中的boss，十分精彩；Sprite的Demo地址为：How to use Spriter 0；资源下载地址：Monster;

这篇文章中，我将使用CocosBuilder来复制这个例子，先看截图。

和这个系列之前的文章中一样，先创建cocos2dx工程，命名为Monster，然后在Monster的Resources下建立ccb文件夹，在ccb下创建CocosBuilder工程。然后设置相关属性，拷贝相应的文件。加下来就是cocosBuilder的设计了。

创建File，Root object Type为CCNode，不需要FullScreen，命名这个文件为monster.ccb:

把相应的13个图片拖动到模拟器中，如下图：

然后调整好位置，图层顺序等，如下图：

接下来的工作就是实现动画了。这里将介绍两个动画，一个是prepare动画，monster在做原地摆臂运动；一个是attack动画，monster将进行一个攻击性动画。

其实动画就是对monster的13个图片进行的Rotate和position等动画设置。（cocosBuilder的详细操作，请参考《[cocos2dx开发技巧2]工具CocosBuilder的使用–集成》）

这里重点介绍attack动画中的头部的动画。头部动画要设计到Rotate，position和frame动画。选择head_0, 在0s，1s处点击r和p按钮，分别创建Rotate和Position的关键帧。然后做相应的调整，在1s只能创建frame动画。如下图：

然后拖动时间轴，查看效果：

创建好attack和prepare动画之后，还要使它们连接起来。attack动画播放完之后，就进入prepare；prepare动画播放完之后接着播放prepare动画（循环播放）；具体的时间轴串联，请参考《[cocos2dx开发技巧2]工具CocosBuilder的使用–集成》。

然后创建playground文件，用来测试这个monster。具体如下：

按钮的回调函数设置如下：

导出monster.ccbi, playground.ccbi, 然后在xcode中导入相关文件，就可以进行cocos2dx端的编码了。程序的功能是，当点击btn时，将使prepare状态下的monster进行attack。主要是实现点击按钮的回调函数onAttack。

在xocde中创建Playground类，做如下实现：

class Playground: public CcbBase {
private:
    CCNode* monster;
public:
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(Playground, create);
    
    Playground():monster(NULL) {
        
    }
    
    virtual ~Playground() {
        CC_SAFE_RELEASE(monster);
    }
    
    bool onAssignCCBMemberVariable(cocos2d::CCObject * pTarget, const char * pMemberVariableName, cocos2d::CCNode * pNode) {
        CCB_MEMBERVARIABLEASSIGNER_GLUE(this, "monster", CCNode *, this->monster);
        return NULL;
    }
    
    virtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(cocos2d::CCObject * pTarget, const char * pSelectorName) {
        CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "onAttack", Playground::onAttack);
        return NULL;
    }
    
    void onAttack(cocos2d::CCObject *pSender) {
        CCLOG("attacking");
        
        CCBAnimationManager* animationManager = (CCBAnimationManager*)monster->getUserObject();
        animationManager->runAnimationsForSequenceNamed("attack");  //播放attack动画
    }
    
};