CocoStudio Test 详尽解析

 CocoStudio工具的发布让人振奋（虽然还有不少的问题，但是瑕不掩瑜）

不得不说，作为只有Windows电脑的屌丝能有这么好的免费开发工具确实很开心

但是作为一款刚发布的工具，官方自己也在赶制使用教程，使用上还是有一定难度的。

由于官方正在赶制使用Editor的视频，这里我就不说这方面的问题了,想看可以去下面网址观看：

http://i.youku.com/u/UNTk3MDQ4NzA0（截止今天只有两部，分别是动画与UI编辑器的）

我想看了如上视频对于如何使用该工具有了一个大概的了解，但是也会有一个疑问，那就是该工具导出的文件如何使用，尤其是.json文件。

好在官方有一个test让我们参考，接下来就来分析下这个官方的test（可以在 http://www.cocos2d-x.org/projects/studio/wiki 下载到，这是官方地址）

先看看运行效果（我个人认为还比较有爱）：

这个Test相较于一般的Cocos2d-x程序多了两个库，第一个是UI库，第二个是动画库（我是这么认为的）。

由于该Test中只用到了很少一部分动画库（我简要看了一下之后发现确实也只需要这部分就可以显示动画了，其他很多接口都是它内部调用的而已）而没有任何文档说明，所以就没仔细看动画库，转而仔细研究了下UI库。

那么先来看一下HelloWorldScene.cpp的init代码吧

bool HelloWorld::init() 
{ 
    // 1. super init first 
    if ( !CCLayer::init() ) 
    { 
        return false; 
    } 
 
    COCOUISYSTEM->init(); 
    //COCOUISYSTEM->resetSystem(this); 
 
    COCOUISYSTEM->replaceUISceneWithFile(this, "CocoGUISample.json", 1, false); 
 
 
    CocoGUI::CocoButton* closeButton = CocoGUI::CocoButton::create(); 
    closeButton->setTextures("CloseNormal.png", "CloseSelected.png", ""); 
    closeButton->setPosition(ccp(430, 40)); 
    closeButton->setBeTouchAble(true); 
    closeButton->addReleaseEvent((CCObject*)this, coco_releaseselector(HelloWorld::menuCloseCallback)); 
    COCOUISYSTEM->getCurScene()->addWidget(closeButton); 
 
    CocoGUI::CocoScrollView* sc = (CocoGUI::CocoScrollView*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "scrollview")); 
    sc->setUpdateEnable(true); 
    CocoGUI::CocoTextButton* bt = (CocoGUI::CocoTextButton*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "backtotopbutton")); 
    bt->addReleaseEvent(this, coco_releaseselector(HelloWorld::backToTop)); 
    CocoGUI::CocoSlider* sld = (CocoGUI::CocoSlider*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "slider")); 
    sld->addPercentChangedEvent(this, coco_percentchangedselector(HelloWorld::sliderPercentChanged)); 
    CocoGUI::CocoButton* anib = (CocoGUI::CocoButton*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "animationbutton")); 
    anib->addReleaseEvent(this, coco_releaseselector(HelloWorld::playUIAnimation)); 
 
    cs::BatchNodeManager::sharedBatchNodeManager()->initWithLayer(this, "TEST_LAYER"); 
 
    cs::ArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("TestBone", "", "TestBone0.png", "TestBone0.plist", "TestBone.json"); 
 
    armature = cs::Armature::create("TestBone"); 
    armature->getAnimation()->playByIndex(0); 
    armature->setScale(0.3); 
    armature->setPosition(300, 0); 
    addChild(armature); 
 
 
    return true; 
} 

COCOUISYSTEM这是一个宏，用来获取一个UISystem对象：#define COCOUISYSTEM CocoGUI::UISystem::shareSystem()

这个UISystem之后再说，往下继续看

COCOUISYSTEM->resetSystem(this); 这一段本来是没有注释的，但在这里确实是没有任何作用的一段代码

这个resetSystem是用来重置当前场景的UI的（注意，是重置CocoStudio的UI，你自己添加的任何普通对象都会保留）有兴趣可以去看一下这个的源码，这里就不贴了

resetSystem用来作为初始化时的重置是没任何问题的，但是为什么说它在这里没用呢？

因为这句话的存在COCOUISYSTEM->replaceUISceneWithFile(this, "CocoGUISample.json", 1, false);

replaceUISceneWithFile之中调用也调用过一次resetSystem，所以说resetSystem是重复多余的

replaceUISceneWithFile的作用就是通过json载入编辑器做好的UI

其四个参数分别是UI目标，也就是添加UI的对象指针，配置文件，读取方式（1为json文件，0为plist文件），最后一个是是否允许自适应。

后面几行是生成一个CocoButton，也就是CocoStudio自己的UI控件

这里要说一下，CocoButton的控件几乎都是自己重写的，不继承于Cocos2d-x的控件，其触碰分派也是独立的，这里以后再说。

然后就是把控件add到当前场景中：COCOUISYSTEM->getCurScene()->addWidget(closeButton); 

前面说过了，这些空间都是重写的，而且不是继承于CCNode，所以不能直接用addChild来add，而是通过UISystem来add，并且通过UISystem来管理的，也就是说Remove也不是通过this.remove而是通过COCOUISYSTEM->getCurScene()->removeWidgetAndCleanUp

后面的几行差不多，就说下第一行

CocoGUI::CocoScrollView* sc = (CocoGUI::CocoScrollView*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "scrollview")); 

这一行就是关键中的关键了，在UI编辑器中只能编辑样子，不能添加事件，时间的添加只能在代码中添加，而获取对象则是添加的关键。

CocoStudio就是通过UISystem中的checkWidgetByName来获取对象的

其参数分别为：当前场景的rootwidget和对象名称（UI编辑器中使用的）

这样就可以对控件进行一系列修改，也包括最重要的添加事件了

比如CocoTextButton对象：

bt->addReleaseEvent(this, coco_releaseselector(HelloWorld::backToTop)); 

当然了，不同的对象是不一样的，比如CocoSlider就是

sld->addPercentChangedEvent(this, coco_percentchangedselector(HelloWorld::sliderPercentChanged)); 

这个要靠大家自己根据情况来定了

最后就是一个骨骼动画了

cs::BatchNodeManager::sharedBatchNodeManager()->initWithLayer(this, "TEST_LAYER");

这是创建一个BatchNodeManager对象（其实准确来说是在HelloWorld层中创建了一个名为TEST_LAYER的对象）用来管理BatchNode（继承于CCSpriteBatchNode，这个的作用就不用多说了吧）

cs::ArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("TestBone", "", "TestBone0.png", "TestBone0.plist", "TestBone.json");

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

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

然后设置一些属性

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

armature->setScale(0.3);

armature->setPosition(300, 0);

addChild(armature);

playByIndex这个的作用就是从第n幅图片开始播放，这里是从0开始

从使用addChild就可以看出来，Armature继承于CCNodeRGBA

整个Test大致包含了这么多内容，其他的需要等官方给更多的Test或者文档或者直接看源码来了解了。

如果官方明天没有给出文档的话（当然我觉得不太可能）我想说一下我对于UISystem的一些小领悟，如果官方给出文档的话，我就不献丑了= =