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

桃扇骨 2022-08-02 14:33 150阅读 0赞

用新版本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 ![在CODE上查看代码片][CODE] ![派生到我的代码片][ico_fork.svg]

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

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

\[javascript\] view plaincopy ![在CODE上查看代码片][CODE] ![派生到我的代码片][ico_fork.svg]

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 ![在CODE上查看代码片][CODE] ![派生到我的代码片][ico_fork.svg]

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 ![在CODE上查看代码片][CODE] ![派生到我的代码片][ico_fork.svg]

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

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

源引：http://yvdedu.com/news/423.html

[CODE]: https://code.csdn.net/assets/CODE_ico.png
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg