使用這些工具，大大縮短了用cocos2dx開(kāi)發(fā)周期。但總的來(lái)說(shuō)，操作并不是很方便，但是有總比沒(méi)有強(qiáng)！
下載地址：http://cn.cocos2d-x.org/download/ 現(xiàn)在MAC的版本也出來(lái)了。
下圖是界面
然后啟動(dòng)，新建一個(gè)項(xiàng)目
這樣就完成項(xiàng)目的創(chuàng)建。
在編輯之前，需要先給項(xiàng)目提供資源，一種是把資源拖到右邊的資源列表或都在資源列表打開(kāi)選擇資源對(duì)話框。
插入結(jié)果
其它資源依此類(lèi)推。
項(xiàng)目創(chuàng)建會(huì)默認(rèn)創(chuàng)建一個(gè)畫(huà)布和一個(gè)容器panel
在正式編輯UI之前，需要先設(shè)置畫(huà)面大小，這個(gè)跟據(jù)你項(xiàng)目的要求設(shè)置。
下面在畫(huà)面中，填加一個(gè)圖片。很不幸，你不能從資源列表直接拖到中間的畫(huà)布上只，只能在畫(huà)布或?qū)ο罅斜硎褂糜益I，彈出右鍵菜單，添加圖片對(duì)象。
然后，用鼠標(biāo)選這個(gè)對(duì)象。在畫(huà)面的右邊，會(huì)有一個(gè)對(duì)象的屬性面板。
屬性面版有尺寸和模式、常規(guī)、控件布局、特性。大家可以嘗試設(shè)置，就知道他的作用了。添加完成后，把具體的圖片資源拖到屬性面版->特性->文件框內(nèi)，就可以了。
結(jié)果
這樣就OK了
在屬性面板有一個(gè)Tag屬性和名子屬性要注意一下，我面在加載UI后，可以通過(guò)這兩個(gè)屬性取得UI中的這個(gè)對(duì)象。
可能調(diào)整渲染層級(jí)達(dá)到調(diào)整顯示次序的效果。
按照上面的步驟，就可以很快的做出UI了。
做完后，就需要導(dǎo)出UI了，cocos2dx是不能直接使用UI工程的，需要使用導(dǎo)出的。
在導(dǎo)出資源這塊，要注意一下，使用大圖，會(huì)把用到的資源拼成一個(gè)大圖，可以提高效率。使用小圖，則把資源的圖原樣復(fù)制過(guò)去。這個(gè)看你的取舍了。
導(dǎo)出完成后，把導(dǎo)出的目錄復(fù)制到cocos2dx工程的Resource這個(gè)目錄下面，就可以在項(xiàng)目中使用了。
最后在需要使用這個(gè)UI的場(chǎng)景，增加下面代碼
gui::TouchGroup* ul = gui::TouchGroup::create();
ul->addWidget(GUIReader::shareReader()->widgetFromJsonFile("NewUi_1/NewUi_1.ExportJson"));
this->addChild(ul, 2);
如果要訪問(wèn)這個(gè)資源，就可以通過(guò)tag來(lái)操作。
ul->getWidgetByTag(42)。注意不是ui->getChildByTag(42)，這個(gè)不會(huì)遍歷所有的子節(jié)點(diǎn)。
！這樣就完成一個(gè)完全的UI操作！