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的一些小領悟，如果官方給出文檔的話，我就不獻丑了= =