CocoStudio UI 編輯器的使用

詳細教程：http://www.cocoachina.com/bbs/read.php?tid=161567

 

Table of Contents

• 1 游戲中的 UI
  • 1.1 基於 Cocos2d-x 的 UI 使用現狀分析
  • 1.2 如何在游戲中使用 CocoStudio UI 框架
  • 1.3 CocoUI 框架基本組成
• 2 CocoUI 框架

1 游戲中的 UI

CocoStudio 是專門針 對 Cocos2d-x 而設計的一套可視化編輯工具，它能與Cocos2d-x 無縫的集成。對美工而言，可以使用它來設計界面，對開發者而言，可以通過后台編寫代碼處理復雜的游戲邏輯，使得游戲 UI 的界面與邏輯相分離，從而提高開發效率。

1.1 基於 Cocos2d-x 的 UI 使用現狀分析

過去！在 Cocos2d-x 中使用控件我們需要根據自己的實際情況一個個封裝，因此也“積累”並重用了一些基本控件，一個以 CCControl 為基本的控件集，之所以說是控件集，是因為里面所實現的控件都是獨立的，之間並沒有關聯，每個控件都是一個層，這種管理方式與 Cocos2d-x 本身基於 CCNode 的管理方式，並沒有明顯區別，也因此，就 “UI控件” 來說，它們少了一個基本且必要的 “特性”。

• 沒有統一的關系結構設計與層次關系
• 沒有統一的觸摸實現機制，從而導致，在復雜 UI 情況下，處理觸摸變得異常麻煩，如多個控件的依賴於遮擋關系，依賴關系可以表現為：我們的父控件或層隱藏了，但仍然能接收到觸摸事件，而遮擋關系則表現為：由於控件直接只是處理自己的邏輯，而不能判斷是否在它的上層，已經存在接受觸摸事件的操作，從而導致一些邏輯上的處理錯誤
• 缺少一些常用控件，如復選框等基本功能

以上都是在我們在開發中所遇到的實際問題，由於 CCControl 機制的限制，也導致了在實際使用過程中的不便，而在 CocoStudio 中，解決了先前所言的各種不便，重新設計了一套獨立的 UI 系統，自己的架構，自己的管理方式，並且提供了豐富的基本控件且易於使用。

1.2 如何在游戲中使用 CocoStudio UI 框架

我們將使用 CocoStudio UI 編輯器完成一個簡單的功能：設計一個界面，並在其上放置兩個控件，一個按鈕，一個圖片框，通過點擊按鈕去控制圖片框的放大顯示。

UI 編輯器使用的是當前的最新版本 0.2.4，你可以從 這里 獲取最新的安裝文件（包括了所有需要的文件，並且提供了相應的例子程序，集成在 TestCpp 中）。 工具新建工程與導出資源文件同使用 CocoStudio 創建 Cocos2d-x 序列幀和骨骼動畫一樣，可以參考。

在編輯器中創建界面步驟：

1. 打開 CocoStudio UI 編輯器，創建一個新的項目（例：CsUi 項目）
2. 在新項目默認顯示一個層，我們在在左側拖動所需要的控件，添加到層上
3. 這里我們選擇了一圖片框與一個按鈕（根據自己的實際需要選擇添加控件）
4. 選擇按鈕控件，並在屬性視圖中，設置屬性啟用“交互”選項
5. 導出我們的 UI 界面資源
6. 導出了幾個資源文件在項目 “CsUi”目錄的 Export/CsUi_1 中，包含三個導出的資源文件 ：CsUi_1.ExportJson, CsUi0.plist, CsUi0.png

在上面的操作中，我們使用了 UI 編輯器編輯創建了一個 UI 界面，接下來便是將其添加到我們的項目中去並使用。 在程序中使用界面資源文件：

1. CocoGUILIB 將集成在 Cocos2d-x 2.1.4 之后的版本內, 這里 可以下載最新的版本使用，使用方式同 extensions 的其它擴展同樣，具體見 TestCpp 例子。
2. 我們創建了一個項目，並且導入了 CocoGUILIB 源代碼，將導出的 UI 資源文件夾 “CsUi_1″ 加入項目資源目錄： Resources/CsUi_1
3. 編寫測試場景，使用 UI 控件完成功能，其代碼如下：

1. // TestUI.cpp 文件內容
2.  
3. #include"TestUI.h"
4.  
5. CCScene*TestUI::scene(){
6. CCScene* scene =CCScene::create();
7. CCLayer* layer =TestUI::create();
8. scene->addChild(layer);
9. return scene;
10. }
11.  
12. boolTestUI::init(){
13. bool bRef =false;
15. do{
16. CC_BREAK_IF(!CCLayer::init());
17.  
18. // 初始化當前場景 UI 系統
19. COCOUISYSTEM->resetSystem(this);
21. // 加載 UI 資源文件，並添加到當前場景
22. COCOUISYSTEM->getCurScene()->addWidget(COCOUISYSTEM->createWidgetFromFileWithAdapt_json("CsUi_1/CsUi_1.ExportJson",true, rue));
24. // 獲取按鈕控件
25. cs::CocoButton* button =(cs::CocoButton*)(COCOUISYSTEM->getWidgetByName("Button"));
27. // 為按鈕添加點擊事件
28. button->addReleaseEvent(this, coco_releaseselector(TestUI::coButtonCallback));
29.  
30. bRef =true;
31. }while(0);
32. return bRef;
33. }
34.  
35. voidTestUI::coButtonCallback(CCObject* pSender){
36. // 獲取圖片框控件
37. cs::CocoImageView* image =(cs::CocoImageView*) COCOUISYSTEM->getWidgetByName("ImageView");
38. // 我們將圖片放大到 1.5 倍，以便觀察效果
39. image->setScale(1.5f);
40. }
41.  
42. // ################ 補充說明 #################
43. // 在 最新的 版本使用了新的 API 與調用方式，0.2 版本之后，新版重寫 init 方法與回調函數如下
44.  
45.  
46. boolTestUI::init(){
47. bool bRef =false;
49. do{
50. CC_BREAK_IF(!CCLayer::init());
52. UILayer* ul =UILayer::create();
53. // 設置 UI 層的tag
54. this->addChild(ul,0,100);
55. ul->addWidget(CCUIHELPER->createWidgetFromJsonFile("CsUi_1/CsUi_1.ExportJson"));
57. UIButton* btn =dynamic_cast<UIButton*>(ul->getWidgetByName("Button"));
58. btn->addReleaseEvent(this, coco_releaseselector(TestUI::coButtonCallback));
60. bRef =true;
61. }while(0);
62. return bRef;
63. }
64.  
65. voidTestUI::coButtonCallback(CCObject* pSender){
66. // 獲取圖片框控件
67. UILayer* ul =dynamic_cast<UILayer*>(this->getChildByTag(100));
68. UIImageView* image =dynamic_cast<UIImageView*>(ul->getWidgetByName("ImageView"));
69. // 我們將圖片放大到 1.5 倍，以便觀察效果
70. image->setScale(1.5f);
71. }

如上代碼運行，通過點擊按鈕，使得圖片放大。 請注意不同版本之間的 API 的改變。包括后文的說明，與官方使用手冊

1.3 CocoUI 框架基本組成

通過上面的例子，我們能通過 CocoStudio 提供的 UI 編輯器設計界面，並通過后台處理代碼編寫游戲邏輯。在 CocoUI 框架中，使用 ‘CocoWidget’ 作為基本組成元素，其功能正如在 Cocos2d-x 中的 CCNode，所有的控件都繼承自 ‘CocoWidget’ ，而這所有的 widget 都由 ‘UIScene’ 作為根，由他開始管理，我們可以通過 ‘COCOUISYSTEM->getCurScene()’ 獲取到當前的 UIScene，當然在使用之前需要通過 ‘COCOUISYSTEM->resetSystem(this);’ 進行初始化工作。得到了 UIScene，我們就能在其中添加 widget 了。COCOUISYSTEM 同樣為我們提供了從 UI 編輯器資源導入 widget 的功能，這使得 UI 界面的設計與邏輯相分離。 而 ‘COCOUISYSTEM’ (這是一個宏，展開為 ‘cs::UISystem::shareSystem()’)作為 CocoUI 框架的管理者，返回 ‘UISystem’ 對象 ，它不僅管理着 ‘UIScene’，還包含着其它必要的特性，比如觸摸機制的實現，在 UISystem 中定義了 ‘InputLayer* m_pInputLayer;’ 屬性; , 由 InputLayer 統一接受觸摸事件並處理，這樣做的好處顯而易見，通過內部控制靈活的處理各控件的點擊操作，添加各種判斷等都可以在此統一完成。

2 CocoUI 框架

以上簡單的例子，只是簡單的介紹了 CocoUI 的使用方法和其運行機制。當然，在 CocoUI 中還提供了很多功能更為豐富的控件，可以關注官方的 “UI CocoGUI使用方法手冊”http://bbs.cocostudio.org/forum.php?mod=viewthread&tid=732 ，在這里非常詳細的介紹了各個控件的使用方法及其注意事項，包括添加事件，內存管理，UI 動畫使用，UI 控件狀態控制，紋理緩存，以及非常重要的 “多分辨率適配” 方案。

（注：關於其它控件的使用，將會在后續文章介紹）