【Cocos2d-Js基礎教學(4)cocostudio在cocos2dx-Js中的使用】,cocos2dxcocostudio

來源:互聯網
上載者:User

【Cocos2d-Js基礎教學(4)cocostudio在cocos2dx-Js中的使用】,cocos2dxcocostudio

首先我們開啟官方網站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能大大提高我們工作的效率,而且這類工具可以提交給策劃,美術使用,不需要寫代碼。

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

源碼下載:

(百度雲端硬碟)

源碼使用方法:

自己建立新工程,解壓下載的檔案,將所有檔案拷貝到你新工程的目錄下全部覆蓋既可以運行!    

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.