在cocos2d-js-v3.0 中使用cocostudio UI的正确方式

 用新版本cocos2d-js开发jsb的时候,发现cocos2dx js 找不到cocostudio json 中的图,无法加载cocostudio的UI,debug提示找不到图片。花了我两个多小时,才发现新api的bug。果断决定写个如何在cocos2d-js-v3.0 jsb 中使用cocostudio UI的博客,分享出来!

    bug原因:cocostudio的ExportJson中并没有对导出文件的plist和png进行描述,也没有在解析加载中提供处理及异常处理。

    方案:手动添加plist的预加载,不需要预加载png,因为plist中有对png的描述。

    建议:引擎对该错误提供正确信息,应该提示”没有加载cocostudio项目文件“,或者干脆智能的加载了。

 

下面是代码:

1、在新项目的根文件夹下打开project.json文件,修改:

 

[javascript] view plaincopy
  1. "modules" : ["cocos2d""extensions""external"]//作用是增加需要用的的模块  

2、加载,范例demo和helloworld都写在resource.js里面:

 

 

[javascript] view plaincopy
  1. var CocosUI = "res/CocosUI.ExportJson";//网上很多帖子这个地方写的文件后缀依然是json,不谨慎啊!   
  2. var CocosUI_plist  =  "res/CocosUI.plist"//最重要的一句,错误的根源,其他版本教程都没有写这句,都是坑人的,事实上没有这是运行不了解的。  
  3.    
  4. var res = {   
  5.     HelloWorld_png : "res/HelloWorld.png",   
  6.     CloseNormal_png : "res/CloseNormal.png",   
  7.     CloseSelected_png : "res/CloseSelected.png",   
  8. };   
  9. var g_resources = [   
  10.     //image   
  11.     res.HelloWorld_png,   
  12.     res.CloseNormal_png,   
  13.     res.CloseSelected_png,   
  14.     //json   
  15.     CocosUI_plist,//重要:在预加载中加载ui,根据经验将plist加载放在json前面  
  16.     CocosUI  
  17. ];  


 

3、main.js

 

[javascript] view plaincopy
  1. cc.game.onStart = function(){   
  2.     cc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL);   
  3. cc.view.resizeWithBrowserSize(true);   
  4.     //load resources   
  5.     cc.LoaderScene.preload(g_resources, function () {   
  6.         cc.director.runScene(new HelloWorldScene());   
  7.     }, this);   
  8. };   
  9. cc.game.run();  

4、业务程序中使用,一般在layer的初始化中:

 

 

[html] view plaincopy
  1. var ui = ccs.uiReader.widgetFromJsonFile(CocosUI);  
  2. this.addChild(ui, 100);//100是z轴,表示放在最上面  

大功告成,可以使用cocostudio了。  

你可能感兴趣的:(在cocos2d-js-v3.0 中使用cocostudio UI的正确方式)