cocos2dx 3.0 简单使用 CocoStudio Animation Editor

在游戏开发过程中，很多新人往往会忽略一些小细节，对于 cocos2dx 3.0 如何简单使用 CocoStudio Animation Editor 更是不知如何操作。下面将详细介绍具体的操作步骤。

打开并新建工程

首先，打开 Animation Editor，然后新建一个工程，工程名称可随意设置，这里以 “NewAnimation” 为例。

界面介绍

Animation Editor 主要有以下几个部分：

1. 模式切换：该工具具有两种模式，分别是形体模式和动画模式，通过点击相应按钮即可进行切换。
2. 对象结构和属性面板：用于展示对象的结构以及设置对象的属性。
3. 资源面板：可以直接将文件拖入此面板。
4. 工具栏：提供了创建骨骼、隐藏骨骼等功能按钮。

拼图操作

1. 导入资源：资源可从 cpp - test 中获取。
2. 拖动图片资源：将图片资源拖到左边的面板中。需要注意的是，点击图片后可以设置其旋转角度。
3. 拼接小人：将图片拼接成一个小人的形状。

创建骨骼

1. 确定骨骼位置：点击工具栏中的 “创建骨骼” 按钮，然后在面板中鼠标点击的位置即为骨骼的位置，通常将骨骼放置在需要绑定的图片资源上。
2. 绑定骨骼：右键点击图片资源，选择 “绑定到骨骼”，接着将鼠标移动到需要绑定的骨骼上，此时骨骼会高亮显示，单击骨骼即可完成绑定。
3. 查看绑定结果：绑定成功后，在对象结构面板中可以看到图片和骨骼已经结合在一起。

骨骼相关注意事项

1. 骨骼形态：骨骼有两种形态，一种是 4 个方向舒展的，另一种是一个方向的子骨骼。
2. 创建方式：单击屏幕可创建 4 个方向形态的骨骼，单击屏幕然后拖动则创建子骨骼。
3. 父子关系：骨骼可以有父节点，例如，若 2 是 1 的父节点，那么当 2 移动时，1 也会跟着移动。

切换到动画模式

将所有需要活动的图片都绑定上骨骼后，切换到动画模式。动画模式界面主要有以下几个部分：

1. 动作列表：在此处添加需要的动作，例如这里已经添加了两个动作。
2. 属性面板：用于设置对应骨骼的属性，可对每一帧的骨骼属性（如旋转、移动等）进行调整。
3. 动画帧面板：面板中显示的 comet、bone1、bone2 等对应着图片中的骨骼，右边显示的是这些骨骼的帧动画状态。例如，bone1 在第 5、10、15、20、25、30 帧下面有一个小白点，说明在这些帧都有一个画面，这些画面组成了 bone1 的动画。
4. 添加关键帧：添加关键帧即添加途中的小白点。右键点击帧可以隐藏这些帧图像，点击小白点（即帧片段），例如点击 bone1 的第 5 帧画面，可以设置其帧曲线，使动作看起来更加自然。

小技巧

可以选择所有骨骼，选中第 0 帧的小白点，然后复制，再在结束帧第 30 帧粘贴上去，这样可以保证开始和结束是同一帧。然后在中间帧设置骨骼的属性（如旋转角度、移动距离等），例如在第 15 帧设置骨骼的属性，然后分别在第 5、10、20、25 帧直接创建小白点，系统会自动设置这些帧属性的值（实际上是取均值）。

添加完动作后，可以播放动画查看效果。

导出资源

将制作好的动画资源导出，并放入程序的 Resources 文件夹中。

Comet.plist 文件说明

Comet.plist 是一个粒子属性的 plist 文件。在程序代码中，可以使用 plist 文件来创建粒子，也可以使用 ParticleSystemPoint 或者 CCParticleSystemQuad 来创建。具体内容可参考文章 cocos2d - x CCParticleSystem 粒子系统 ，或者直接参考 cpp - test。

这里我们使用 plist 让头部喷火，可让 comet 在第 0 帧隐藏，然后在第 30 帧显示，即等其他骨骼执行完动作后再进行喷火。

在代码中使用动画

我们将操作都放在一个 Layer 中，以下是头文件和 cpp 文件的代码：

头文件

#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));
return true;
}

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 动作，然后跑到左边，如此循环。