四 手游开发神器 cocos2d-x editor 游戏框架介绍

cocos2d-x editor 新建工程时会自动生成游戏框架，如下图

 

 红色边框共有五个区域 

1. idea 是自动生成的目录，读者不需要操作
2. Source是主工程目录，所有的设计和编码都在该目录下完成；
3. Resource是项目的资源存放处，包括贴图，字体，粒子，声音等等
4. main.js,是程序的主函数入口，里面代码主要用来根据游戏平台处理不同的事件；也控制游戏场景的切换，比如游戏场景一般都包括（选关场景，道具场景，主游戏场景，得分场景等），主函数可以选择你第一进入的场景。main.xml 主要包括游戏的配置，包括游戏运行平台的分辨率，调试模拟器的分辨率。
5. MainLayer.ccbx是游戏主场景的设计区域，MainLayer.js是编码区域，一个.ccbx对应一个.js,命名必须保持一致。比如，如果你要做选关界面，可以新建 SelectLayer.ccbx 和SelectLayer.js

 

 

 

下面具体分析

     

             Main.js  游戏主函数 ：代码里有注解，里面的函数 replaceScene,loadAsScene,loadAsSceneFrom,loadAsNodeFrom, 都是场景切换函数，以后编程时可以直接拿过来用。runScene是运行场景，通过cc.BuilderReader.runScene("", "MainLayer"); 这句代码可以进入主函数

[javascript]  view plain copy

 

1.   

 

[javascript]  view plain copy

 

1. if (sys.platform == 'browser') {  
2.     var require = function (file) {  
3.         var d = document;  
4.         var s = d.createElement('script');  
5.         s.src = file;  
6.         d.body.appendChild(s);  
7.     }  
8. } else {  
9.     require("jsb.js");  
10. }  
11.   
12.   
13. cc.debug = function (msg) {  
14.     cc.log(msg);  
15. }  
16.   
17.   
18. cc.BuilderReader.replaceScene = function (path, ccbName) {   //场景替换  
19.     var scene = cc.BuilderReader.loadAsSceneFrom(path, ccbName);  
20.     cc.Director.getInstance().replaceScene(scene);  
21.     return scene;  
22. }  
23.   
24.   
25. cc.BuilderReader.loadAsScene = function (file, owner, parentSize) {  //从owner获取场景  
26.     var node = cc.BuilderReader.load(file, owner, parentSize);  
27.     var scene = cc.Scene.create();  
28.     scene.addChild(node);  
29.     return scene;  
30. };  
31.   
32.   
33. cc.BuilderReader.loadAsSceneFrom = function (path, ccbName) {  //从ccb获取场景  
34.     cc.BuilderReader.setResourcePath(path + "/");  
35.     return cc.BuilderReader.loadAsScene(path + "/" + ccbName);  
36. }  
37.   
38.   
39. cc.BuilderReader.loadAsNodeFrom = function (path, ccbName, owner) {    
40.     cc.BuilderReader.setResourcePath(path + "/");  
41.     return cc.BuilderReader.load(path + "/" + ccbName, owner);  
42. }  
43.   
44.   
45. cc.BuilderReader.runScene = function (module, name) {       //运行场景  
46.     var director = cc.Director.getInstance();  
47.     var scene = cc.BuilderReader.loadAsSceneFrom(module, name);  
48.     var runningScene = director.getRunningScene();  
49.     if (runningScene === null) {  
50.         cc.log("runWithScene");  
51.         director.runWithScene(scene);  
52.     }  
53.     else {  
54.         cc.log("replaceScene");  
55.         director.replaceScene(scene);  
56.     }  
57. }  
58.   
59.   
60. var ccb_resources = [  //公共资源  
61.     {type: 'image', src: "Resources/HelloWorld.png"},  
62.     {type: 'image', src: "Resources/CloseNormal.png"},  
63.     {type: 'image', src: "Resources/CloseSelected.png"}  
64. ];  
65.   
66.   
67. require("MainLayer.js");   //包括哪些场景都需要require  
68.   
69.   
70. if (sys.platform == 'browser') {   //如果平台是浏览器  
71.   
72.   
73.     var Cocos2dXApplication = cc.Application.extend({  
74.         config: document['ccConfig'],  
75.         ctor: function () {  
76.             this._super();  
77.             cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];  
78.             cc.initDebugSetting();  
79.             cc.setup(this.config['tag']);  
80.             cc.AppController.shareAppController().didFinishLaunchingWithOptions();  
81.         },  
82.         applicationDidFinishLaunching: function () {  
83.             var director = cc.Director.getInstance();  
84.             // director->enableRetinaDisplay(true);  
85.             // director.setDisplayStats(this.config['showFPS']);  
86.             // set FPS. the default value is 1.0/60 if you don't call this  
87.             director.setAnimationInterval(1.0 / this.config['frameRate']);  
88.             var glView= director.getOpenGLView();  
89.             glView.setDesignResolutionSize(1280,720,cc.RESOLUTION_POLICY.SHOW_ALL);  
90.             cc.Loader.preload(ccb_resources, function () {  
91.                 cc.BuilderReader.runScene("", "MainLayer");  
92.             }, this);  
93.             return true;  
94.         }  
95.     });  
96.     var myApp = new Cocos2dXApplication();  
97. } else {       //如果是android ios window32等  
98.     cc.BuilderReader.runScene("", "MainLayer");   //直接进入主场景  
99. }  

 

          main.xml 游戏项目的配置 , language我们选用javascript，也可以选择lua。

平台分辨率 designWidth*designHeight  比如苹果iphone5s是640*1136 ，ipad是1024*768 ，meizu mx3 1200*1920，主流我们推荐720*1280。

模拟器分辨率  viewWidth*viewHeight 是模拟器大小， 最好根据designWidth*designHeight 等比例缩放，主流我们推荐360*640 根据自己的需求调节，看下面的模拟器，不同数值不同的界面

 

[html]  view plain copy

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2.         <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"  
3.                 "http://www.apple.com/DTDs/PropertyList-1.0.dtd">  
4. <plist version="1.0">  
5. <dict>  
6.     <key>name</key>  
7.     <string>Game</string>  
8.     <key>language</key>  
9.     <string>Javascript</string>  
10.     <key>main</key>  
11.     <string>main.js</string>  
12.     <key>designWidth</key>  
13.     <string>720</string>  
14.     <key>designHeight</key>  
15.     <string>1280</string>  
16.     <key>designPolicy</key>  
17.     <string>NO_BORDER</string>  
18.     <key>viewWidth</key>  
19.     <integer>360</integer>  
20.     <key>viewHeight</key>  
21.     <integer>640</integer>  
22. </dict>  
23. </plist>  

扫描二维码关注公众号，回复： 602622 查看本文章

 

        

 

        MainLayer.ccbx 场景设计 ：一切都是可见即可得，如下图

1. 工程目录结构
2. 你可以添加精灵，层，节点，字体，菜单，粒子等
3. 通过拖动摆放位置，也可以选中精灵后右击，操作复制，剪切，移动等操作
4. 整个场景的结构图
5. 在4结构图里选中一个元素，会列出对应的参数，可以通过修改参数控制精灵
6. 不仅可以视觉直观操作，也可以通过xml代码控制，读者可以点击试一下，这里我就不贴图了；
7. 在4中右击，可以操作元素

  

 

  

      注意：在4 区域里点击Document ,  jsController是MainLayer，以后每次新建一个ccbx，一定要对应jsController，否则无效控制；可以选择不同的分辨率（resolution），笔者选择了default 即是width*height=720*1280

 

 

          MainLayer.js 代码编写，本工具不仅支持调试，也支持代码提示。不过必须先设置一下，如下图，先点击工程结构设置按钮，打开，选择javascript包，因为本工具是基于cocos2dx-html5  所以读者必须先下载 cocos2dx-html5，然后选择该包的位置添加完成。为了让cocos2dx-html5生效，必须关闭idea重启

   

 

 

 

        然后打开MainLayer.js, 右击，选择 Use Javascript Library----cocos2d-html5-v2.1.4.min , ok完成。然后ctrl+鼠标单击，可以看到代码的提示,也可以跳转过去；编写过程中也自动提示；

 

 

 

 

     在MainLayer.js,已经有了简单的代码框架：代码很简单无需解释；

 

[javascript]  view plain copy

 

1. //  
2. // CleanerScoreScene class  
3. //  
4. var MainLayer = function () {  
5.     cc.log("MainLayer")  
6. };  
7.   
8. MainLayer.prototype.onDidLoadFromCCB = function () {  
9.     if (sys.platform == 'browser') {  
10.         this.onEnter();  
11.     }  
12.     else {  
13.         this.rootNode.onEnter = function () {  
14.             this.controller.onEnter();  
15.         };  
16.     }  
17.   
18.     this.rootNode.onExit = function () {  
19.         this.controller.onExit();  
20.     };  
21. };  
22.   
23. MainLayer.prototype.onEnter = function () {  
24. }  
25.   
26. MainLayer.prototype.onUpdate = function () {  
27.   
28. }  
29.   
30. MainLayer.prototype.onExitClicked = function () {  
31.     cc.log("onExitClicked");  
32. }  
33.   
34.   
35. MainLayer.prototype.onExit = function () {  
36.     cc.log("onExit");  
37. }  

    

 

下面我来写一个例子，首先场景背景更换成有颜色的，一进入界面让图片不停的缩放，点击下面小图片，图片动画停止，代码如下：

 

[javascript]  view plain copy

 

1. //  
2. // CleanerScoreScene class  
3. //  
4. var MainLayer = function () {  
5.     cc.log("MainLayer")  
6.     this.cocos2d = this.cocos2d || {};  
7. };  
8.   
9. MainLayer.prototype.onDidLoadFromCCB = function () {  
10.     if (sys.platform == 'browser') {  
11.         this.onEnter();  
12.     }  
13.     else {  
14.         this.rootNode.onEnter = function () {  
15.             this.controller.onEnter();  
16.         };  
17.     }  
18.   
19.     this.rootNode.onExit = function () {  
20.         this.controller.onExit();  
21.     };  
22. };  
23.   
24. MainLayer.prototype.onEnter = function () {    //循环播放动画  
25.     var action = cc.Sequence.create(cc.ScaleTo.create(1, 0.6), cc.ScaleTo.create(1, 1));  
26.     this.cocos2d.runAction(cc.RepeatForever.create(action));  
27. }  
28.   
29. MainLayer.prototype.onUpdate = function () {  
30.   
31. }  
32.   
33. MainLayer.prototype.onExitClicked = function () {    
34.     cc.log("onExitClicked");  
35.     this.cocos2d.stopAllActions();  
36. }  
37.   
38.   
39. MainLayer.prototype.onExit = function () {  
40.     cc.log("onExit");  
41. }  

 

为什么onExitClicked会有效，因为在ccbx设置过，如下图；

         

 

——————————————————————————————————————————————————————————————————    

      运行效果图  一切ok

 

hello代码下载地址：http://www.kuaipan.cn/file/id_25348935635744347.htm

 

 

下一篇文章 我会介绍cocos2d-x  editor的其他特性        笔者（李元友）

资料来源：cocos2d-x  editor

 

ps 楼下问题反馈：运行的时候要编辑edit configurations，新建一个Coco2dx-JS的配置,自己命名。可参考  二 手游开发神器 cocos2d-x editor工具下载和安装配置

ps 楼下问题反馈：TypeError: this.cocos2d.runAction is not a function,请确认图片精灵var=cocos2d target=doc：如下图