背景介紹

Cocostudio是觸控科技公司在2013年CocoaChina開發者大會中發布的編輯器工具集。其中包括數據編輯器、界面編輯器、動畫編輯器和場景編輯器四種工具。可以說這一工具集的發布，進一步幫助游戲開發者減少了開發周期、提高了開發效率。

作為一個Cocos2dx的游戲開發者，無論你是策劃、程序還是設計人員都應該在一定程度去了解或掌握它。

安裝

讀者可以在http://cocostudio.org/下載最新的Cocostudio安裝包，作者在完成本文的時候Cocostudio已更新至0.1.5版本。（安裝過程略）

使用說明

作為基礎篇，本中主要介紹上面提到的前兩種工具的使用——數據編輯器和UI編輯器。

如上圖所示，藍色圈中區域和紅色圈中區域就是我今天和大家分享的兩個編輯器使用體驗。

數據編輯器

Cocostudio提供的數據編輯器現在的功能主要是在可視化窗口中對特定格式（Excel）進行數據編輯，然后將編輯好的數據導出為我們期望的數據格式（Json）以方便游戲中的使用。

選擇Data Editor，我們首先進入數據編輯器中開始學習。

如下圖，是我們的原始數據

我們將該數據表導入到數據編輯器中，如下圖所示

如上圖所示，左上角的紅色框區域表示我們打開的原始數據表名稱，中間紅色區域表示Excel每個Sheet中數據項，而最右側的紅色區域則是用來顯示我們在第二紅色區域選中數據項的具體數據。

好的，導入數據是第一步，接下來我們就可以在選定數據項區域去查看或者編輯我們的數據了。

或許有人會說，這些查看和編輯工作我完全可以在Excel表格中完成，為什么非要使用這個編輯器呢？客觀來說，這個編輯器還不夠完善，個人認為比較好的一個功能是數據格式轉換——數據編輯器支持將當前數據保存成我們期望的Json格式（具體的話，可以按照需要保存成屬性方式的Json文件或者對象方式的Json文件，后面會有詳細說明）。

選擇“文件”下來列表中選擇“導出Json文件”選項，可以在如下圖的對話框中選擇我們的需要的格式進行導出。

為了明確前面提到的“屬性方式的Json文件”和“對象方式的Json文件”這兩個概念，我們將之前導入的文件分別進行這兩種方式的保存，并做下面圖示的對比。

仔細觀察圖6和圖7中的數據，我們會發現他們的差異之處，即——屬性方式的Json是每一項都是ID和Name的鍵值對，整體是一個數組，數組中的每一項格式都是一致的；而對象方式的Json則是和原始數據存儲方式類似，都是首元素表示這一數據表中的表頭，剩下的元素才是真正的數據項。相信通過這兩個文件對比，讀者已經可以完全理解他們的區別。

當然這兩種格式的存儲并無優劣之差，需要按照我們的需要去是當選擇即可。

OK，有了我們保存好的數據，最后我們就需要在程序中去加載使用它了，有關Json數據的加載并不是Cocostudio工具集的主要內容，有需要的讀者可以去網上搜索相關資料，這一部分內容網上資源還是比較豐富的，這里我們只做簡單說明。

std::string tFullPath = cocos2d::CCFileUtils::sharedFileUtils()->fullPathForFilename(tFullName.c_str()); 
 
pBuffer = (char*)(cocos2d::CCFileUtils::sharedFileUtils()->getFileData(tFullPath.c_str(),"r" , &outLength)); 

首先將整個Json文件加載進來，然后按照自定義的關鍵字去逐一解析即可，如下。

bool parseRet = reader.parse(pBuffer,jsValue,false); 
 
tDictionaryData->mID = jsValue[i]["ID"].asInt64(); 

運行程序，我們可以看到數據已經正常被解析加載了。（下圖是筆者項目中對數據編輯器解析的截圖，運行結果無誤）

數據編輯器就當前版本來說做的還是比較簡單的。也許有人可能會說，這么簡單的功能，我使用一個通用讀表器不是更簡便嗎？但是筆者認為，使用數據編輯器更重 要的意義不是我們上面提到的數據的保存和轉換，而是它作為正式發布的工具集之一，是有專門的團隊在維護，另一方面我們也相信，后續版本會有更多更好的功能 不斷增加進來。

#p#

UI界面編輯器

接下來我們進行界面編輯器的學習，如圖1中選擇藍色圈區域進入界面編輯器。和第一部分一樣，首先我們對界面編輯器整體做一個認識，見下圖。

紅色區域是我們可以添加的控件工具欄區域；

藍色區域是我們編輯過程中使用的主區域，即所有主要的操作結果都是在這個區域中完成的；

黃色區域是我們編輯之后物理層級結構展示區域；

綠色區域是我們在編輯過程中選中控件的屬性顯示區域；

藍綠色（右上角）區域是我們這個UI使用的所有資源展示區域；

紫紅色（右下角）區域是上邊某一資源圖片被選中時候的預覽圖顯示區域。

有了對編輯器整體上的認識之后，我們就可以使用它了。如果沒有意境編輯好的UI文件供我們加載，那么我們首先需要創建一個項目，如下圖。

在彈出的對話框中，我們可以根據需要選擇項目名稱和項目存儲路徑。

這時我們會在編輯使用的主區域出現一個用黑框表示的編輯區域如下圖。

這個黑色編輯區域大小是與我們期待的分辨率一致的，那么肯定有人會問——編輯器怎么會知道我們期望的分辨率是多大呢，如果這個分辨率與我們期望的分辨率大小不一致怎么辦呢？

大家注意看編輯器左上角有一個文本標志“畫布”后面跟隨一個下拉列表框選項，我們可以通過這里來告知或修改我們正在編輯UI的分辨率大小。

設計者為我們提供了多種分辨率（包括：480X320、960X640、1024X768以及以上幾種分辨率的豎屏結構），隨著我們選擇的不同，前面提到的黑色編輯區域也隨之變化。特別需要提到的，在下拉列表最下方，為我們提供了自定義設置，大大方便了我們對不同分辨率的需求。

這個時候我們相當于有了自己一張畫布，不過僅有畫布還是不夠的，我們還需要畫筆。圖15中是我們的控件編輯欄，其中依次包括文本按鈕、輸入框、文本區、數字標簽、滑動條、按鈕、進度條、曾容器、圖片、復選框、文本框、滾動條等，相信后續還會有新的控件會被加入進來。

選中上面圖中的黑色畫布，開始添加控件。

如上圖中方式，我們可以通過現有控件拼接出自己需要UI布局來。如下圖就是筆者創建的一個UI布局。

這些控件具有一定的層級關系，我們可以在前面提到的對象結構這個View中看到，如下圖所示。

OK，保存項目，并打開之前設定的路徑，我們看到如下圖的結果。

這里需要說明的是，xml文件表示的是我們這個UI工程相關的信息，如上圖，這個xml文件中保存了包括項目名稱、UI布局結構文件、使用資源的路徑、以及工程使用的分辨率等等信息。

最后，根據xml文件中的記錄，我們打開Resource目錄、如下圖所示。

至此，我們的UI界面編輯工作就完成了。那么有了這個UI布局文件之后，我們應該在程序中如何使用它呢？難道我們要自己去實現解析、UI層級管理、事件響應？當然不是，我們Cocostudio開發者已經為我們提供了上述問題的解答方案——在Cocostudio官網上，可以找到對應解析器的代碼（CocoGUILIB.zip）。

首先我們創建一個新的工程——UIEditorDemo，將CocoGUILIB中有關UI解析相關的代碼導入我們上面創建的UIEditorDemo工程中（并按照編譯報告添加對應的頭文件路徑即可）。在程序需要解析加載UI的地方，添上如下代碼。

COCOUISYSTEM->resetSystem(scene); 
 
COCOUISYSTEM->replaceUISceneWithFile(this, "NewProject.json", 1, true, true, true); 

下面就是見證奇跡的時刻——

運行程序，我們看到如上圖的運行結果，這不就是我們前面編輯的UI界面嗎。不錯，加載就是這么簡單。

界面編輯器為開發者也提供了很大的方便，首先，工具集將界面的編輯工作可視化，從一定程度上也可以說做到了“所見即所得”。這使得編輯界面從抽象化到具體化，也將這一編輯工作簡單化，可以由非程序人員來完成界面的編輯工作，大大提高了開發效率。

其次，就如上面提到的一樣，界面的加載也十分簡單。比較重要的一點是，編輯出來界面的層級關系與點擊響應的層級關系一般來說是一致的，也就是說，我 們在編輯界面的時候添加的兩個界面在物理層級上如果存在父子關系，那么它們的點擊事件在邏輯傳遞的過程中總是誰在最上面誰就先獲取到這個事件。這就更方便 了我們的理解和操作。這樣，從很大程度上來說降低了我們開發的難度。

最后，界面編輯器的使用使得界面的布局和功能開發上獨立開來，凡是有游戲開發經驗的人應該能夠明白這一點給工作帶來的好處——當界面布局的某些屬性 （比如某個控件的坐標等）改變時，只要不修改控件的名字，我們并不需要修改代碼并且重新編譯程序，直接更新界面資源即可。這就在一定程度上降低了界面相關 代碼返工的可能，縮短了開發周期。

總結

總體來說，Cocostudio工具集的確為游戲開發者提供了很大的方便，其中的一些原因上面也講到了，不過，CocoStudio目前還并不完善，在使用過程中出現過一些Bug，這些是亟待解決的問題。不過官方更新的速度也很快，對于用戶反饋的反應也很及時，可見官方對這款工具集也傾注了很多的心血，它的未來值得期待，在此之前，我們對這款工具也要好好熟悉并且善加利用。