【Cocos2d-Js基礎教學（4）cocostudio在cocos2dx-Js中的使用】

首先我們打開官方網站www.cocos2d-x.org，下載我們安裝最新的cocostudio（cocos）。

簡介：

Cocos Studio升級為cocos。更優秀的產品、更優質的服務。游戲開發一站式解決方案， 低成本、高效率；高性能，一次制作，多終端平台共享；Windows與Mac同步發布更新，團隊協作更容易；豐富的插件素材庫，游戲開發更靈活更便捷。

下載並安裝好之后我們就可以進行一下步驟了：

1，准備我們所需要的素材資源

2，做一個背景地圖

3，做角色頭像面板

4，做一個音樂開關按鈕

5，在頭像面板上使用自定義美術字體和系統字體

 

 然后，我們到出.Json工程文件及資源文件。

接下來我們看在Cocos2dx-Js中是怎么來使用導出的工程文件的

首先看一下JS-test中，的一段基類的調用代碼：

_parseUIFile: function(file){
        if(cocoStudioOldApiFlag == 0){
            cc.log("ccs.load : %s", file);
            var json = ccs.load(file);
            return json.node;
        }else{
            cc.log("ccs.uiReader.widgetFromJsonFile : %s", file);
            return ccs.uiReader.widgetFromJsonFile(file)
        }
  },

OK，里面有一個判斷，cocoStudioOldApiFlag標識意思為，如果你用的是新版的Cocostudio那么必須使用新的AIP調用接口，

如果是老版本，那么使用以前的接口；

據我實驗了幾個版本之后得出以下結論，避免大家走彎路：

Cocostudio2.1.0 以上需要使用新的接口：

 var json = ccs.load(file);

而這邊json對象只是一個根節點，我們真正的root節點需要單獨取出來；

var root = json.node;

Cocostudio2.1.0 以下需要使用老的接口：

var root = ccs.uiReader.widgetFromJsonFile(file);

好了，剛才我們已經下載了Cocostudio2.2.5目前最新的版本，並且生成了.json

在我們自己的工程基類中添加以下代碼：

BaseLayer.js基類中添加：

setUIFile_File:function(file){
        var json = ccs.load(file);
        return json.node;
    },
setUIFile_JSON:function(file){
        return ccs.uiReader.widgetFromJsonFile(file);
},

添加了setUIFile_File和setUIFile_JSON兩個方法，很明確，新版本的用第一個，后半本的用第二個；

那么我們就繼續在MainLayer中實現我們的調用：

 var UIroot = this.setUIFile_File(resJSON.Main_JSON);
 UIroot.setAnchorPoint(cc.p(0.5,0.5));
 UIroot.setPosition(this.getContentSize().width/2,this.getContentSize().height/2);
 this.addChild(UIroot,1);

通過this.setUIFile_File(路徑)這樣就完成了我們cocostuido生成界面文件的綁定；

那么如何取得里面的自定義Node原件呢？

 var lv_100 = ccui.helper.seekWidgetByName(UIroot, "lv_100");
 lv_100.setString("等級:1");

通過ccui.helper.seekWidgetByName(根節點，自定義控件名);就能取得到該控件的對象了

然后就可以進行相應的賦值或者是綁定事件關系！

 

OK我們跑起來看一我們使用cocostudio制作出來的UI界面！

效果還是很不錯的！很贊！

cocostudio能大大提高我們工作的效率，而且這類工具可以提交給策划，美術使用，不需要寫代碼。

所見即說得的可視化編輯界面，只需要實現我們的界面布局就能完成我們以前大量的代碼工作！

源碼下載：

下載地址（百度雲盤）

源碼使用方法：

自己創建新工程，解壓下載的文件，將所有文件拷貝到你新工程的目錄下全部覆蓋既可以運行！