CocoStudio Test 詳盡解析

 CocoStudio工具的發(fā)布讓人振奮（雖然還有不少的問題，但是瑕不掩瑜）

不得不說，作為只有Windows電腦的屌絲能有這么好的免費(fèi)開發(fā)工具確實(shí)很開心

但是作為一款剛發(fā)布的工具，官方自己也在趕制使用教程，使用上還是有一定難度的。

由于官方正在趕制使用Editor的視頻，這里我就不說這方面的問題了,想看可以去下面網(wǎng)址觀看：

http://i.youku.com/u/UNTk3MDQ4NzA0（截止今天只有兩部，分別是動(dòng)畫與UI編輯器的）

我想看了如上視頻對于如何使用該工具有了一個(gè)大概的了解，但是也會(huì)有一個(gè)疑問，那就是該工具導(dǎo)出的文件如何使用，尤其是.json文件。

好在官方有一個(gè)test讓我們參考，接下來就來分析下這個(gè)官方的test（可以在 http://www.cocos2d-x.org/projects/studio/wiki 下載到，這是官方地址）

先看看運(yùn)行效果（我個(gè)人認(rèn)為還比較有愛）：

這個(gè)Test相較于一般的Cocos2d-x程序多了兩個(gè)庫，第一個(gè)是UI庫，第二個(gè)是動(dòng)畫庫（我是這么認(rèn)為的）。

由于該Test中只用到了很少一部分動(dòng)畫庫（我簡要看了一下之后發(fā)現(xiàn)確實(shí)也只需要這部分就可以顯示動(dòng)畫了，其他很多接口都是它內(nèi)部調(diào)用的而已）而沒有任何文檔說明，所以就沒仔細(xì)看動(dòng)畫庫，轉(zhuǎn)而仔細(xì)研究了下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這是一個(gè)宏，用來獲取一個(gè)UISystem對象：#define COCOUISYSTEM CocoGUI::UISystem::shareSystem()

這個(gè)UISystem之后再說，往下繼續(xù)看

COCOUISYSTEM->resetSystem(this); 這一段本來是沒有注釋的，但在這里確實(shí)是沒有任何作用的一段代碼

這個(gè)resetSystem是用來重置當(dāng)前場景的UI的（注意，是重置CocoStudio的UI，你自己添加的任何普通對象都會(huì)保留）有興趣可以去看一下這個(gè)的源碼，這里就不貼了

resetSystem用來作為初始化時(shí)的重置是沒任何問題的，但是為什么說它在這里沒用呢？

因?yàn)檫@句話的存在COCOUISYSTEM->replaceUISceneWithFile(this, "CocoGUISample.json", 1, false);

replaceUISceneWithFile之中調(diào)用也調(diào)用過一次resetSystem，所以說resetSystem是重復(fù)多余的

replaceUISceneWithFile的作用就是通過json載入編輯器做好的UI

其四個(gè)參數(shù)分別是UI目標(biāo)，也就是添加UI的對象指針，配置文件，讀取方式（1為json文件，0為plist文件），最后一個(gè)是是否允許自適應(yīng)。

后面幾行是生成一個(gè)CocoButton，也就是CocoStudio自己的UI控件

這里要說一下，CocoButton的控件幾乎都是自己重寫的，不繼承于Cocos2d-x的控件，其觸碰分派也是獨(dú)立的，這里以后再說。

然后就是把控件add到當(dāng)前場景中：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")); 

這一行就是關(guān)鍵中的關(guān)鍵了，在UI編輯器中只能編輯樣子，不能添加事件，時(shí)間的添加只能在代碼中添加，而獲取對象則是添加的關(guān)鍵。

CocoStudio就是通過UISystem中的checkWidgetByName來獲取對象的

其參數(shù)分別為：當(dāng)前場景的rootwidget和對象名稱（UI編輯器中使用的）

這樣就可以對控件進(jìn)行一系列修改，也包括最重要的添加事件了

比如CocoTextButton對象：

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

當(dāng)然了，不同的對象是不一樣的，比如CocoSlider就是

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

這個(gè)要靠大家自己根據(jù)情況來定了

最后就是一個(gè)骨骼動(dòng)畫了

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

這是創(chuàng)建一個(gè)BatchNodeManager對象（其實(shí)準(zhǔn)確來說是在HelloWorld層中創(chuàng)建了一個(gè)名為TEST_LAYER的對象）用來管理BatchNode（繼承于CCSpriteBatchNode，這個(gè)的作用就不用多說了吧）

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

終于開始創(chuàng)建動(dòng)畫了，可以看得出來，這個(gè)動(dòng)畫是直接加入到動(dòng)畫管理器中的，要用的時(shí)候通過名字從動(dòng)畫管理器中獲取相應(yīng)動(dòng)畫

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

然后設(shè)置一些屬性

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

armature->setScale(0.3);

armature->setPosition(300, 0);

addChild(armature);

playByIndex這個(gè)的作用就是從第n幅圖片開始播放，這里是從0開始

從使用addChild就可以看出來，Armature繼承于CCNodeRGBA

整個(gè)Test大致包含了這么多內(nèi)容，其他的需要等官方給更多的Test或者文檔或者直接看源碼來了解了。

如果官方明天沒有給出文檔的話（當(dāng)然我覺得不太可能）我想說一下我對于UISystem的一些小領(lǐng)悟，如果官方給出文檔的話，我就不獻(xiàn)丑了= =