【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能大大提高我們工作的效率,而且這類工具可以提交給策劃,美術使用,不需要寫代碼。
所見即說得的可視化編輯介面,只需要實現我們的介面布局就能完成我們以前大量的代碼工作!
源碼下載:
(百度雲端硬碟)
源碼使用方法:
自己建立新工程,解壓下載的檔案,將所有檔案拷貝到你新工程的目錄下全部覆蓋既可以運行!