建站
咨詢
售后
建站咨詢
新聞中心
【Cocos2dx工具之Cocostudio界面編輯器】
三
寫在前面——
如果轉(zhuǎn)載請注明出處，謝謝大家支持
同步更新51CTO博客
——Forward
我的微博——龍顏碩
Hello，大家好，F(xiàn)orward新一期的博客有和大家見面了。接著上一期《【Cocos2dx工具——Cocostudio界面編輯器】二》末尾所提出的問題，我們往下說——
1、CocoGUILIB的結(jié)構(gòu)是什么樣子呢？
2、從文件解析到控件創(chuàng)建，CocoGUILIB是如何實(shí)現(xiàn)的呢？
3、有關(guān)Touch事件又是如何接收與處理呢？
4、CocoGUILIB是如何工作的呢？
好的，帶著以上幾個問題，我們正式開始學(xué)習(xí)CocoGUILIB庫。這里我們依然使用《二》中用到的那個例子UIEditorDemo來說明。
按照Forward學(xué)習(xí)的習(xí)慣——在學(xué)習(xí)一樣新知識時，最好對整體先有一個宏觀哪怕淺顯的認(rèn)識也好，這里Forward根據(jù)自己里的理解，繪制了一個類圖（個人UML不是特別熟悉，有使用不恰當(dāng)?shù)姆枺蠹叶喽嘀刚?/p>
圖 1
首先需要說明的是，F(xiàn)orward在完成這篇博客的時候，使用額CocoGUILIB庫版本號是0.1.3。
圖 2
如上圖所示，CocoGUILIB庫的核心主要是一個UISystem類，它主要依靠內(nèi)部的InputLayer類來接受Touch事件（具體我們后面會詳細(xì)描述）、CocoRootWidget（通過這個Widget來保存所有包括在它之上的控件UI），其余兩個（UIScene和UIManager是協(xié)助完成Widget控件的控制和Touch事件的分發(fā)的，具體的話我們可以看源代碼），初次以外，UISystem外部還依賴與一個CSJsonDictionary類，這個類是對Json協(xié)議的一個封裝，使用起來更加方便罷了（Forward曾經(jīng)在一篇博客《Protocol buffer介紹》中有提到過Json協(xié)議，后期Forward會根據(jù)Json的相關(guān)知識完成一篇博客）。
圖 3
再看上面類圖，CocoRootWidget最終繼承自CocoWidget，這就是一個邏輯概念上的一個控件，具體的控件當(dāng)前版本支持CocoButton、CocoCheckBox、CocoImageView、CocoLabel、CocoLabelAtlas、CocoLoadingBar、CocoPanel、CocoScrollView、CocoSlider、CocoTextArea、CocoTextButton、CocoTextField等，相信后續(xù)會有更多更好用的控件出爐^_^。
了解了邏輯控件之后呢，我們再往下看，可以看到有一個CCRenderNode模塊，很容易想到，這一模塊就是具體的控件加載所需的一個模塊，包括CClipAbleLayerColor、CClipAbleSprite、CLabelAtlas、CPrimitivesNode、CTextField、GUINodeRGBA等，追蹤源代碼，我們可以發(fā)現(xiàn)，這幾個自定義類又都分別繼承自Cocos2dx的一些CCNode或其子類，這樣就很清楚了，其實(shí)一個完成的UI在加載的時候其實(shí)都是一層層的CCNode堆疊而成的。
經(jīng)過以上的分析，相信大家已經(jīng)對CocoGUILIB庫有了一個整體上的認(rèn)識，下面我們接著博客開題提到的問題繼續(xù)學(xué)習(xí)——
大家是否還記得，在《Cocos2dx工具之Cocostudio界面編輯器一》中我們就提到通過界面編輯器編輯之后我們會得到一個Json格式的UI文件。今天我們通過上面的學(xué)習(xí)，相信不用我再贅述，大家腦海中已經(jīng)有了一個下面這樣一個流程圖——
圖 4
流程圖可能并不美觀，但它足以說明問題了，哈哈。
好了知道了上面這些以后，或許我們應(yīng)該關(guān)注一下對于UI來說最為重要的一個特性就是交互性的實(shí)現(xiàn)，當(dāng)然UI來說交互一般都是通過點(diǎn)擊、拖拽等事件來完成。
對于UI交互，我們的CocoGUILIB是依賴一個InputLayer層來實(shí)現(xiàn)的，上面已經(jīng)提到。
virtualboolccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);
virtualvoidccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);
virtualvoidccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);
virtualvoidccTouchCancelled(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);
正如我們所說的，InputLayer中重寫了這幾種Touch事件，那么他們的注冊在哪里呢？我們打開UISystem.cpp可以在resetSystem接口中看到其注冊如下：
this->m_pInputLayer =InputLayer::createWithUISystem(this);
this->m_pInputLayer->retain();
this->m_pInputLayer->setTouchEnabled(true);
cocos2d::CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this->m_pInputLayer, nPriority, true);
這樣，當(dāng)InputLayer這個層收到Touch事件之后，他就將根據(jù)事件的不同調(diào)用UISystem幾種不同接口：
bool InputLayer::ccTouchBegan(cocos2d::CCTouch*pTouch, cocos2d::CCEvent *pEvent)
{
returnthis->m_pUISystem->onTouchPressed(pTouch);
}
void InputLayer::ccTouchMoved(cocos2d::CCTouch*pTouch, cocos2d::CCEvent *pEvent)
{
this->m_pUISystem->onTouchMoved(pTouch);
}
void InputLayer::ccTouchEnded(cocos2d::CCTouch*pTouch, cocos2d::CCEvent *pEvent)
{
this->m_pUISystem->onTouchReleased(pTouch);
}
void InputLayer::ccTouchCancelled(cocos2d::CCTouch*pTouch, cocos2d::CCEvent *pEvent)
{
this->m_pUISystem->onTouchCanceled(pTouch);
}
UISystem在收到不同的消息時再通過InputManager將這個Touch事件傳遞給這個UISystem中的每一個需要獲取該消息的Widget控件。這就是UISystem的Touch事件處理的全過程了。
哈哈，不早了，明天還得上班，F(xiàn)orward的本次博客就先寫到這里了，拜拜~~
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
本文名稱：【Cocos2dx工具】Cocostudio界面編輯器三-創(chuàng)新互聯(lián)
URL分享：http://www.ef60e0e.cn/article/ecicg.html
