cocos2dx 程序中处理cocostdio导出的帧动画

一、在 Cocostudio 中创建帧动画

在 “形体模式” 下（位于文件操作区域），从资源库中添加动画的起始图片。接着，切换到 “动画模式”，此时界面下方会出现一个动画帧的窗口，旁边默认生成的 “layerX” 即为刚才添加的起始动画的纹理文件。随后，从资源库中选中其余的动画图片，用鼠标将它们拖动到该区域。至此，动画添加完成，可在界面上方进行播放测试。

二、动作列表的使用

一个动作列表中可以添加多个动画，这些动画会随着该动作列表一同播放。若要单独播放某个动画，需新建一个动作列表，然后将相应动画添加进去。

程序效果图

工程名称：D:\cocos2d - x - 3.0alpha1\projects\cocostudioAnimationTest1

三、导入纹理解析花屏问题

在导入纹理时，可能会出现解析出来花屏的情况，目前尚未明确具体原因。

四、主要代码实现

1. helloworld.h 文件

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "HelloWorldScene.h"
#include "cocos2d.h"
#include "extensions/cocos-ext.h"
#include "cocostudio/CocoStudio.h"
#include "GUI/CocosGUI.h"

USING_NS_CC;
USING_NS_CC_EXT;
using namespace cocostudio;
using namespace gui;

class HelloWorld : public cocos2d::Layer {
public:
// 静态方法，用于创建场景
static cocos2d::Scene* createScene();

// 初始化方法，返回布尔值
virtual bool init();

// 按钮文本回调函数
void buttonTextCallBack(Object *pSender, gui::TouchEventType type);

// 菜单关闭回调函数
void menuCloseCallback(Object* pSender);

// 存储按钮文本信息的映射表
std::map<int, char*> UIButtonTextMap;

// 手动实现 “static create()” 方法
CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

2. helloworldscene.cpp 文件

#include "HelloWorldScene.h"
USING_NS_CC;

const int cocostdioTest = 10;

// 创建场景的静态方法
Scene* HelloWorld::createScene() {
// 创建一个自动释放的场景对象
auto scene = Scene::create();
// 创建一个自动释放的层对象
auto layer = HelloWorld::create();
// 将层添加到场景中
scene->addChild(layer);
// 返回场景对象
return scene;
}

// 初始化层的方法
bool HelloWorld::init() {
// 首先调用父类的初始化方法
if (!Layer::init()) {
return false;
}

// 获取可见区域的大小和原点位置
Size visibleSize = Director::getInstance()->getVisibleSize();
Point origin = Director::getInstance()->getVisibleOrigin();

// 添加关闭菜单按钮
auto closeItem = MenuItemImage::create(
"CloseNormal.png",
"CloseSelected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
closeItem->setPosition(Point(origin.x + visibleSize.width - closeItem->getContentSize().width / 2,
origin.y + closeItem->getContentSize().height / 2));
auto menu = Menu::create(closeItem, NULL);
menu->setPosition(Point::ZERO);
this->addChild(menu, 1);

// 添加 “Hello World” 标签
auto label = LabelTTF::create("Hello World", "Arial", 24);
label->setPosition(Point(origin.x + visibleSize.width / 2,
origin.y + visibleSize.height - label->getContentSize().height));
this->addChild(label, 1);

// 添加 “HelloWorld” 背景精灵
auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
this->addChild(sprite, 0);

// 加入 UI 编辑器
UILayer *uiLayer = UILayer::create();
auto myLayOut = GUIReader::shareReader()->widgetFromJsonFile("NewProject_1/NewProject_1.ExportJson");
uiLayer->addWidget(myLayOut);
this->addChild(uiLayer, 5);

// 添加按钮文本信息到映射表
UIButtonTextMap.insert(std::map<int, char*>::value_type(1, "TextButton_23"));
UIButtonTextMap.insert(std::map<int, char*>::value_type(2, "TextButton_27"));
UIButtonTextMap[3] = "TextButton_28";
UIButtonTextMap[4] = "TextButton_29";
UIButtonTextMap[5] = "TextButton_31";
UIButtonTextMap[6] = "TextButton_32";
UIButtonTextMap[7] = "TextButton_33";
UIButtonTextMap[8] = "TextButton_34";

// 遍历映射表，设置按钮属性
auto mapbag = UIButtonTextMap.begin();
typedef decltype(mapbag) CurrentType;
CurrentType mapend = UIButtonTextMap.end();
for (; mapbag != mapend; ++mapbag) {
auto pButtonText = dynamic_cast<UIButton*>(myLayOut->getChildByName(mapbag->second));
pButtonText->setTouchEnabled(true);
pButtonText->setTag(mapbag->first);
pButtonText->setTitleText(mapbag->second);
pButtonText->addTouchEventListener(this, toucheventselector(HelloWorld::buttonTextCallBack));
}

// 加载骨骼动画数据
ArmatureDataManager::getInstance()->addArmatureFileInfo("test1_2/test1.ExportJson");
// 创建骨骼动画对象
Armature *armature = Armature::create("test1");
armature->setTag(cocostdioTest);
armature->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2 + 100));
this->addChild(armature);

return true;
}

// 菜单关闭回调函数
void HelloWorld::menuCloseCallback(Object* pSender) {
Director::getInstance()->end();
#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
exit(0);
#endif
}

// 按钮文本回调函数
void HelloWorld::buttonTextCallBack(Object *pSender, gui::TouchEventType type) {
auto uiBt = dynamic_cast<UIButton*>(pSender);
auto armature = (Armature *)this->getChildByTag(cocostdioTest);
if (!uiBt) {
return;
}
int uiBtTag = uiBt->getTag();
if (type == TouchEventType::TOUCH_EVENT_ENDED) {
switch (uiBtTag) {
case 1:
armature->getAnimation()->play("Animation1");
break;
case 2:
armature->getAnimation()->play("Animation2");
break;
case 3:
armature->getAnimation()->play("Animation3");
break;
case 4:
armature->getAnimation()->play("Animation2_Copy1");
break;
case 5:
armature->getAnimation()->play("Animation4");
break;
default:
break;
}
}
}

以上代码展示了在 cocos2dx 程序中处理 cocostudio 导出的帧动画的完整过程，包括创建场景、添加 UI 元素、加载骨骼动画以及处理按钮事件等。通过这些步骤，能够实现对 cocostudio 导出动画的有效管理和播放。