游戏客户端之cocostudio的动画库

cocostudio 提供场景编辑工具，以及相应的控件，可以衔接到cocos2dx的引擎。

一个测试工程可参考：http://blog.csdn.net/chenjiayi_yun/article/details/22595387

这个测试工程相较于一般的Cocos2d-x程序多了两个库，第一个是UI库，第二个是动画库。本文说的是动画库。

场景编辑器的代码使用。

可参考：http://blog.csdn.net/fansongy/article/details/14544921

设计上：

(1)添加骨骼动画会把贴图（TestBone0.png）添加到纹理缓存，把plist资源（TestBone0.plist）添加到精灵帧缓存。把骨骼配置文件数据（TestBone.json）读取到骨骼数据管理器。骨骼配置文件数据包括骨骼数据（到骨骼数据容器）、动画数据（到动画数据容器）、纹理数据（"texture_data"）到纹理数据容器。

本文内容：

1、ArmatureDataManager 动画数据管理器

2、cocostudio 场景编辑器的生成资源

3、cocostudio的动画接入到场景

4、场景编辑器使用

（1）骨骼动画

（2）动画配置

1、ArmatureDataManager 骨骼动画数据管理器

骨骼动画数据管理器把骨骼配置文件加载到管理器内存，帧对象会添加到精灵帧缓存。

class ArmatureDataManager : public CCObject {
public:
    static ArmatureDataManager *sharedArmatureDataManager();
private:
    ArmatureDataManager(void);
    ~ArmatureDataManager(void);
public:
/**
     * @brief init ArmatureDataManager
     */
    virtual bool init();
    //添加骨骼动画数据
    /**
     * @brief add armature data
     *
     * @param _id the id of the armature data
 *
 *  @param _armatureData   ArmatureData *
     */
    void addArmatureData(const char *_id, ArmatureData *_armatureData);
     //获取骨骼动画数据
/**
     * @brief get armature data
     *
     * @param _id the id of the armature data you want to get
 *  
 *  @return ArmatureData *
     */
    ArmatureData *getArmatureData(const char *_id);
//添加动画数据
    /**
     * @brief add animation data 
     *
     * @param _id the id of the animation data 
 *
 *  @return AnimationData *
     */
    void addAnimationData(const char *_id, AnimationData *_animationData);
    //获取动画数据
/**
     * @brief get animation data from m_pAnimationDatas(CCDictionary)
     *
     * @param _id the id of the animation data you want to get
 *  
 *  @return AnimationData *
     */
    AnimationData *getAnimationData(const char *_id);
//添加纹理数据
    /**
     * @brief add texture data 
     *
     * @param _id the id of the texture data
 *
 *  @return TextureData *
     */
    void addTextureData(const char *_id, TextureData *_textureData);
     //获取纹理数据
/**
     * @brief get texture data
     *
     * @param _id the id of the texture data you want to get
 *  
 *  @return TextureData *
     */
    TextureData *getTextureData(const char *_id);
    //添加骨骼动画文件数据到缓存
    /**
 * @briefAdd ArmatureFileInfo, it is managed by ArmatureDataManager.
     */
void addArmatureFileInfo(const char *_armatureName, const char *_useExistFileInfo, const char *_imagePath, const char *_plistPath, const char *_configFilePath);
    //获取骨骼动画数据
    /**
     * @brief get ArmatureFileInfo from m_pArmatureFileInfoDic(CCDictionary)
     *
     * @param _id the id of the ArmatureFileInfo you want to get
 *
 *  @return ArmatureFileInfo *
     */
    ArmatureFileInfo *getArmatureFileInfo(const char *_id);
    //从文件加载图片和plist中的位置详细信息到精灵帧，保存在缓存
    /**
     * @brief Add sprite frame to CCSpriteFrameCache, it will save display name and it's relative image name
     */
    void addSpriteFrameFromFile(const char *_plistPath, const char *_imagePath);
     //清除缓存的骨骼动画数据和动画数据
/**
 * @briefClear the data in the m_pArmarureDatas and m_pAnimationDatas, and set m_pArmarureDatas and m_pAnimationDatas to NULL
     */
    void removeAll();

private:

//骨骼动画数据
    /**
 * @briefsave amature datas
 *  @key std::string
 *  @value ArmatureData *
     */
CC_SYNTHESIZE_READONLY(CCDictionary *, m_pArmarureDatas, ArmarureDatas);
//动画数据
    /**
 * @briefsave animation datas
 *  @key std::string
 *  @value AnimationData *
     */
CC_SYNTHESIZE_READONLY(CCDictionary *, m_pAnimationDatas, AnimationDatas);
//纹理数据
/**
 * @briefsave texture datas
 *  @key std::string
 *  @value TextureData *
     */
CC_SYNTHESIZE_READONLY(CCDictionary *, m_pTextureDatas, TextureDatas);
//骨骼数据管理器
private:
    static ArmatureDataManager *m_sSharedArmatureDataManager;
//骨骼动画文件数据缓存
    /**
 * @briefsave ArmatureFileInfo datas
 *  @key std::string
 *  @value ArmatureFileInfo*
     */
    CCDictionary *m_pArmatureFileInfoDic;
    
};

2、cocostudio 场景编辑器的生成资源

以cocostudio 场景编辑器的一个战斗场景为例

asseets文件夹：

ani文件夹

动画资源  enemy hero文件夹 monster0.plist 帧效果描述 monster0.png 怪物贴图 monster0_PList.Dir 怪物的所有的贴图 monster.ExportJson 所有的动画骨骼数据

img文件夹

bg1.png 背景贴图

particle文件夹

1-buff.plist 粒子效果数据 1-buff.png 粒子效果贴图

public文件夹

FightScene.json 战斗场景ui 和触发器（动作）

sound文件夹

arena.mp3 声音文件

ui文件夹

FightScene0.plist 战斗场景ui设置 FightScene0.png 战斗场景贴图   FightScene_1.ExportJson 战斗场景控件的组织结构

3、cocostudio的场景动画接入到场景

（1）把场景动画数据加载到动画管理器的内存

bool HelloWorld::init()

{
// 初始化层的大小、不可触碰等
if ( !CCLayer::init() )
{
return false;

}

......

//注册按钮的释放事件（播放动画）

anib->addReleaseEvent(this, coco_releaseselector(HelloWorld::playUIAnimation));

......

//加载动画资源到骨骼动画数据管理器

//TestBone:动画名称

//TestBone0.png:作为纹理依据

//TestBone0.plist:作为创建精灵帧的位置详细数据依据

//TestBone.json:加载骨骼动画(对应armature_data)、纹理（对应texture_data）、动画数据（对应animation_data）

//void addArmatureFileInfo(const char *_armatureName, const char *_useExistFileInfo, const char *_imagePath, const char *_plistPath, const char *_configFilePath)
cs::ArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("TestBone", "", "TestBone0.png", "TestBone0.plist", "TestBone.json");

//创建骨骼动画（会从骨骼动画数据管理器根据名称加载，没有的话就创建空动画）

...

}

(2)播放骨骼动画

//可以看得出来，这个动画是直接加入到动画管理器中的，要用的时候通过名字从动画管理器中获取相应动画

armature = cs::Armature::create("TestBone");

//播放骨骼动画,playByIndex这个的作用就是从第n幅图片开始播放，这里是从0开始

armature->getAnimation()->playByIndex(0);

//设置x，y坐标跟原图的渲染比例

armature->setScale(0.3);

//设置动画位置

armature->setPosition(300, 0);

//添加动画到层，从使用addChild就可以看出来，Armature继承于CCNodeRGBA

addChild(armature);

（3）播放一系列动作动画

void HelloWorld::playUIAnimation(cocos2d::CCObject *pSender)
{
CocoGUI::CocoWidget* widget = (CocoGUI::CocoWidget*)pSender;//这个是按钮触发控件
widget->stopAllActions();
CCSequence* seq = CCSequence::create(CCMoveTo::create(1.0, ccp(300, 300)),
CCScaleTo::create(1, 0.5),
CCMoveTo::create(1.0, ccp(127, 96)),
CCScaleTo::create(1.0, 1.0),
CCRotateTo::create(0.5, 720),
CCRotateTo::create(0.5, 0),NULL);
widget->runAction(seq);
}

以下是调用堆栈，可以看的出来，触发派送者检查到该按钮释放事件，回调调用UISystem的触摸管理器UIInputManager，再回调调用控件的释放事件，最终调用到播放动画的接口playUIAnimation。播放的是一个按钮的移动、缩放、‘旋转等。

4、场景编辑器的

(1)骨骼动画

举个例子（非同一个工程的）。

动画配置文件ani/hero/girl.ExportJson。

左图是节点贴图，右图是节点属性。

                   

含几组动画

（2）动画配置

TestBone.json：

{
   "animation_data" : [//动画数据
      {
         "mov_data" : [
            {
               "dr" : 36,
               "drTW" : 0,
               "lp" : true,
               "mov_bone_data" : [//骨骼移动数据
                  {
                     "dl" : 0.0,//第一个帧数据
                     "frame_data" : [//帧数据
                        {
                           "cX" : 0.9999995231628418,
                           "cY" : 0.9999995231628418,
                           "dI" : 0,
                           "dr" : 15,
                           "kX" : 0.01394689083099365,
                           "kY" : -0.01394701190292835,
                           "twE" : 0,
                           "x" : 103.5142974853516,
                           "y" : 373.1350402832031,
                           "z" : 8
                        },
                         ......
                     ],
                     "name" : "B45242013129",
                     "sc" : 1.0
                  },
                  {
                     "dl" : 0.0,//第二个帧数据
                     "frame_data" : [
                        {
                           "cX" : 1.0,
                           "cY" : 1.0,
                           "dI" : 0,
                           "dr" : 15,
                           "kX" : 0.0,
                           "kY" : 0.0,
                           "twE" : 0,
                           "x" : 19.49998092651367,
                           "y" : 265.4999694824219,
                           "z" : 7
                        },
                        ......
                     ],
                     "name" : "B45242013132",
                     "sc" : 1.0
                  },
               ......
          
               ],
               "name" : "Action22018391",
               "to" : 0,
               "twE" : 0
            }
         ],
         "name" : "TestBone"
      }
   ],
   "armature_data" : [//骨骼数据（贴图、配置）
      {
         "bone_data" : [
            {
               "arrow_x" : 0.0,
               "arrow_y" : 0.0,
               "cX" : 1.0,
               "cY" : 1.0,
               "display_data" : [
                  {
                     "displayType" : 0,
                     "name" : "testAnimationResource\\7.png"
                  }
               ],
               "effectbyskeleton" : false,
               "kX" : 0.0,
               "kY" : 0.0,
               "name" : "B45242013147",
               "parent" : "",
               "x" : 0.0,
               "y" : 0.0,
               "z" : 9
            },
            {
               "arrow_x" : 86.07528686523438,
               "arrow_y" : -240.1433715820313,
               "cX" : 1.0,
               "cY" : 1.0,
               "display_data" : [
                  {
                     "displayType" : 0,
                     "name" : "testAnimationResource\\1.png"
                  }
               ],
               "effectbyskeleton" : true,
               "kX" : 0.0,
               "kY" : -0.0,
               "name" : "B45242013129",
               "parent" : "",
               "x" : -5.531213760375977,
               "y" : 3.224767923355103,
               "z" : 8
            },
          ...
            {
               "arrow_x" : 0.0,
               "arrow_y" : 0.0,
               "cX" : 1.0,
               "cY" : 1.0,
               "display_data" : [
                  {
                     "displayType" : 0,
                     "name" : "testAnimationResource\\hat.png"
                  }
               ],
               "effectbyskeleton" : false,
               "kX" : 0.0,
               "kY" : 0.0,
               "name" : "B58542013156",
               "parent" : "",
               "x" : 0.0,
               "y" : 0.0,
               "z" : 6
            },
           ......
         ],
         "name" : "TestBone"
      }
   ],
   "config_file_path" : [ "TestBone0.plist" ],//贴图资源
   "texture_data" : [//纹理数据配置
      {
         "height" : 0.0,
         "name" : "DefaultBone",
         "pX" : 0.50,
         "pY" : 0.50,
         "width" : 0.0
      },
     ......
   ]
}