背景介紹

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

作為一個(gè)Cocos2dx的游戲開發(fā)者，無論你是策劃、程序還是設(shè)計(jì)人員都應(yīng)該在一定程度去了解或掌握它。

安裝

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

使用說明

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

如上圖所示，藍(lán)色圈中區(qū)域和紅色圈中區(qū)域就是我今天和大家分享的兩個(gè)編輯器使用體驗(yàn)。

數(shù)據(jù)編輯器

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

選擇Data Editor，我們首先進(jìn)入數(shù)據(jù)編輯器中開始學(xué)習(xí)。

如下圖，是我們的原始數(shù)據(jù)

我們將該數(shù)據(jù)表導(dǎo)入到數(shù)據(jù)編輯器中，如下圖所示

如上圖所示，左上角的紅色框區(qū)域表示我們打開的原始數(shù)據(jù)表名稱，中間紅色區(qū)域表示Excel每個(gè)Sheet中數(shù)據(jù)項(xiàng)，而最右側(cè)的紅色區(qū)域則是用來顯示我們在第二紅色區(qū)域選中數(shù)據(jù)項(xiàng)的具體數(shù)據(jù)。

好的，導(dǎo)入數(shù)據(jù)是第一步，接下來我們就可以在選定數(shù)據(jù)項(xiàng)區(qū)域去查看或者編輯我們的數(shù)據(jù)了。

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

選擇“文件”下來列表中選擇“導(dǎo)出Json文件”選項(xiàng)，可以在如下圖的對話框中選擇我們的需要的格式進(jìn)行導(dǎo)出。

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

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

當(dāng)然這兩種格式的存儲(chǔ)并無優(yōu)劣之差，需要按照我們的需要去是當(dāng)選擇即可。

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

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

首先將整個(gè)Json文件加載進(jìn)來，然后按照自定義的關(guān)鍵字去逐一解析即可，如下。

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

運(yùn)行程序，我們可以看到數(shù)據(jù)已經(jīng)正常被解析加載了。（下圖是筆者項(xiàng)目中對數(shù)據(jù)編輯器解析的截圖，運(yùn)行結(jié)果無誤）

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

#p#

UI界面編輯器

接下來我們進(jìn)行界面編輯器的學(xué)習(xí)，如圖1中選擇藍(lán)色圈區(qū)域進(jìn)入界面編輯器。和第一部分一樣，首先我們對界面編輯器整體做一個(gè)認(rèn)識(shí)，見下圖。

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

藍(lán)色區(qū)域是我們編輯過程中使用的主區(qū)域，即所有主要的操作結(jié)果都是在這個(gè)區(qū)域中完成的；

黃色區(qū)域是我們編輯之后物理層級(jí)結(jié)構(gòu)展示區(qū)域；

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

藍(lán)綠色（右上角）區(qū)域是我們這個(gè)UI使用的所有資源展示區(qū)域；

紫紅色（右下角）區(qū)域是上邊某一資源圖片被選中時(shí)候的預(yù)覽圖顯示區(qū)域。

有了對編輯器整體上的認(rèn)識(shí)之后，我們就可以使用它了。如果沒有意境編輯好的UI文件供我們加載，那么我們首先需要?jiǎng)?chuàng)建一個(gè)項(xiàng)目，如下圖。

在彈出的對話框中，我們可以根據(jù)需要選擇項(xiàng)目名稱和項(xiàng)目存儲(chǔ)路徑。

這時(shí)我們會(huì)在編輯使用的主區(qū)域出現(xiàn)一個(gè)用黑框表示的編輯區(qū)域如下圖。

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

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

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

這個(gè)時(shí)候我們相當(dāng)于有了自己一張畫布，不過僅有畫布還是不夠的，我們還需要畫筆。圖15中是我們的控件編輯欄，其中依次包括文本按鈕、輸入框、文本區(qū)、數(shù)字標(biāo)簽、滑動(dòng)條、按鈕、進(jìn)度條、曾容器、圖片、復(fù)選框、文本框、滾動(dòng)條等，相信后續(xù)還會(huì)有新的控件會(huì)被加入進(jìn)來。

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

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

這些控件具有一定的層級(jí)關(guān)系，我們可以在前面提到的對象結(jié)構(gòu)這個(gè)View中看到，如下圖所示。

OK，保存項(xiàng)目，并打開之前設(shè)定的路徑，我們看到如下圖的結(jié)果。

這里需要說明的是，xml文件表示的是我們這個(gè)UI工程相關(guān)的信息，如上圖，這個(gè)xml文件中保存了包括項(xiàng)目名稱、UI布局結(jié)構(gòu)文件、使用資源的路徑、以及工程使用的分辨率等等信息。

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

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

首先我們創(chuàng)建一個(gè)新的工程——UIEditorDemo，將CocoGUILIB中有關(guān)UI解析相關(guān)的代碼導(dǎo)入我們上面創(chuàng)建的UIEditorDemo工程中（并按照編譯報(bào)告添加對應(yīng)的頭文件路徑即可）。在程序需要解析加載UI的地方，添上如下代碼。

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

下面就是見證奇跡的時(shí)刻——

運(yùn)行程序，我們看到如上圖的運(yùn)行結(jié)果，這不就是我們前面編輯的UI界面嗎。不錯(cuò)，加載就是這么簡單。

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

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

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

總結(jié)

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