六 手游开发神器 cocos2d-x editor 之场景切换

接着上一节，我们已经创建了一个主游戏场景MainLayer，现在我们需要创建一个开始场景StartLayer，包括StartLayer.ccbx和StartLayer.js两个文件，点击StartLayer上的开始按钮，游戏切换到主游戏场景。

先看运行效果；

代码下载地址：http://www.kuaipan.cn/file/id_25348935635744469.htm?source=1

   首先创建StartLayer.ccbx和StartLayer.js文件，如下图操作（sources右击----new---layer）（sources右击---new---controller）

   创建成功后，指定控制器；

     我们设计开始场景，一个颜色背景层，一个MenuItem按钮；

   场景设计完毕，我们开始编程StartLayer.js ，只需要加入一个函数onPlayClicked(),点击player后跳转到MainLayer.js;

[javascript] view plaincopy

 

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

   然后再去设置Main.js,让主函数先启动StartLayer; 也别忘记加入这行代码require("StartLayer.js");

[javascript] view plaincopy

 

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. cc.debug = function (msg) {  
13.     cc.log(msg);  
14. }  
15.   
16. cc.BuilderReader.replaceScene = function (path, ccbName) {  
17.     var scene = cc.BuilderReader.loadAsSceneFrom(path, ccbName);  
18.     cc.Director.getInstance().replaceScene(scene);  
19.     return scene;  
20. }  
21.   
22. cc.BuilderReader.loadAsScene = function (file, owner, parentSize) {  
23.     var node = cc.BuilderReader.load(file, owner, parentSize);  
24.     var scene = cc.Scene.create();  
25.     scene.addChild(node);  
26.     return scene;  
27. };  
28.   
29. cc.BuilderReader.loadAsSceneFrom = function (path, ccbName) {  
30.     cc.BuilderReader.setResourcePath(path + "/");  
31.     return cc.BuilderReader.loadAsScene(path + "/" + ccbName);  
32. }  
33.   
34. cc.BuilderReader.loadAsNodeFrom = function (path, ccbName, owner) {  
35.     cc.BuilderReader.setResourcePath(path + "/");  
36.     return cc.BuilderReader.load(path + "/" + ccbName, owner);  
37. }  
38.   
39. cc.BuilderReader.runScene = function (module, name) {  
40.     var director = cc.Director.getInstance();  
41.     var scene = cc.BuilderReader.loadAsSceneFrom(module, name);  
42.     var runningScene = director.getRunningScene();  
43.     if (runningScene === null) {  
44.         cc.log("runWithScene");  
45.         director.runWithScene(scene);  
46.     }  
47.     else {  
48.         cc.log("replaceScene");  
49.         director.replaceScene(scene);  
50.     }  
51. }  
52.   
53. var ccb_resources = [  
54.     {type: 'image', src: "Resources/HelloWorld.png"},  
55.     {type: 'image', src: "Resources/CloseNormal.png"},  
56.     {type: 'image', src: "Resources/CloseSelected.png"}  
57. ];  
58.   
59. require("MainLayer.js");  
60. require("StartLayer.js");  
61.   
62. if (sys.platform == 'browser') {  
63.   
64.     var Cocos2dXApplication = cc.Application.extend({  
65.         config: document['ccConfig'],  
66.         ctor: function () {  
67.             this._super();  
68.             cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];  
69.             cc.initDebugSetting();  
70.             cc.setup(this.config['tag']);  
71.             cc.AppController.shareAppController().didFinishLaunchingWithOptions();  
72.         },  
73.         applicationDidFinishLaunching: function () {  
74.             var director = cc.Director.getInstance();  
75.             // director->enableRetinaDisplay(true);  
76.             // director.setDisplayStats(this.config['showFPS']);  
77.             // set FPS. the default value is 1.0/60 if you don't call this  
78.             director.setAnimationInterval(1.0 / this.config['frameRate']);  
79.             var glView = director.getOpenGLView();  
80.             glView.setDesignResolutionSize(1280, 720, cc.RESOLUTION_POLICY.SHOW_ALL);  
81.             cc.Loader.preload(ccb_resources, function () {  
82.                 cc.BuilderReader.runScene("", "StartLayer");  
83.             }, this);  
84.             return true;  
85.         }  
86.     });  
87.     var myApp = new Cocos2dXApplication();  
88. } else {  
89.     cc.BuilderReader.runScene("", "StartLayer");  
90. }  

    一切都好了，点击运行；先进入开始界面，点击play跳入游戏主界面

下一篇文章 我会介绍cocos2d-x  editor的字体设计       笔者（李元友）

资料来源：cocos2d-x  editor