十二 手游开发神器 cocos2d-x editor 之游戏暂停悬浮层

进入游戏主场景，游戏需要临时暂停、重新选关、重新玩等等，所以玩家点击暂停按钮，弹出一个选择悬浮层，这一节我们来实现；

 

效果如下：

 

点击右上角游戏暂停；

 

返回回到开始界面；

 

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

 

 

 

首先创建一个PauseLayer.ccbx,设计如下图，包括一个精灵和三个按钮，一个返回按钮、重新开始按钮、选关按钮；

 

给每一个MenuItem安排点击事件，指定target,图片资源；

 

打开MainLayer.ccbx,添加暂停按钮；

 

 

打开MainLayer.js,首先给暂停按钮事件；

 

[javascript]  view plain copy

 

1. MainLayer.prototype.onPauseClicked = function () {   //点击暂停游戏  
2.     this.pausedLayer = cc.BuilderReader.loadAsNodeFrom("", "PauseLayer", this);  
3.     this.pausedLayer.setPosition(cc.p(0, 0));  
4.     this.pausedLayer.setZOrder(200);  
5.     this.rootNode.addChild(this.pausedLayer);  
6.     this.paused = true;  
7.     cc.AudioEngine.getInstance().stopMusic();  
8.     cc.Director.getInstance().pause();  
9. }  

 

 

然后给返回和重新开始安排点击事件；

 

[javascript]  view plain copy

 

1. MainLayer.prototype.onRenewClicked = function () {  //返回到开始界面  
2.     cc.Director.getInstance().resume();  
3.     cc.log("onRenewClicked");  
4.     cc.BuilderReader.runScene("", "StartLayer");  
5. }  
6.   
7. MainLayer.prototype.onReplayClicked = function () {  //新游戏  
8.     cc.Director.getInstance().resume();  
9.     cc.log("onReplayClicked");  
10.     cc.BuilderReader.runScene("", "MainLayer");  
11. }  

 

 

MainLayer,js全部代码；

 

[javascript]  view plain copy

 

1. //  
2. // CleanerScoreScene class  
3. //  
4.   
5. var MainLayer = function () {  
6.     cc.log("MainLayer")  
7.     this.scoreLabel = this.scoreLabel || {};  
8.     this.monster = this.monster || {};  
9.     this.score = 123;  
10. };  
11.   
12. MainLayer.prototype.onDidLoadFromCCB = function () {  
13.     if (sys.platform == 'browser') {  
14.         this.onEnter();  
15.     }  
16.     else {  
17.         this.rootNode.onEnter = function () {  
18.             this.controller.onEnter();  
19.         };  
20.     }  
21.   
22.     this.rootNode.schedule(function (dt) {  
23.         this.controller.onUpdate(dt);  
24.     });  
25.   
26.     this.rootNode.onExit = function () {  
27.         this.controller.onExit();  
28.     };  
29.   
30.     this.rootNode.onTouchesBegan = function (touches, event) {  
31.         this.controller.onTouchesBegan(touches, event);  
32.         return true;  
33.     };  
34.   
35.     this.rootNode.onTouchesMoved = function (touches, event) {  
36.         this.controller.onTouchesMoved(touches, event);  
37.         return true;  
38.     };  
39.     this.rootNode.onTouchesEnded = function (touches, event) {  
40.         this.controller.onTouchesEnded(touches, event);  
41.         return true;  
42.     };  
43.     this.rootNode.setTouchEnabled(true);  
44. };  
45.   
46. MainLayer.prototype.onEnter = function () {  
47.     var flowerParticle = cc.ParticleSystem.create("Resources/particles/flower.plist");  
48.     flowerParticle.setAnchorPoint(cc.p(0.5, 0.5));  
49.     flowerParticle.setPosition(cc.p(60, 160));  
50.     flowerParticle.setPositionType(1);  
51.     this.monster.addChild(flowerParticle);  
52.   
53.     cc.AudioEngine.getInstance().playMusic("Resources/sounds/bg_music.mp3", true);  
54. }  
55.   
56. MainLayer.prototype.monsterMove = function (x, y) {  
57.     this.monster.stopAllActions();  
58.     cc.AnimationCache.getInstance().addAnimations("Resources/snow_frame.plist");//添加帧动画文件  
59.     var action0 = cc.Sequence.create(cc.MoveTo.create(5, cc.p(x, y)));  //向前移动  
60.     var actionFrame = cc.Animate.create(cc.AnimationCache.getInstance().getAnimation("monster"));   //获取帧动画  
61.     var action1 = cc.Repeat.create(actionFrame, 90000);  
62.     var action2 = cc.Spawn.create(action0, action1); //同步动画  
63.     this.monster.runAction(action2);  
64. }  
65.   
66. MainLayer.prototype.createParticle = function (name, x, y) {  
67.     var particle = cc.ParticleSystem.create("Resources/particles/" + name + ".plist");  
68.     particle.setAnchorPoint(cc.p(0.5, 0.5));  
69.     particle.setPosition(cc.p(x, y));  
70.     particle.setPositionType(1);  
71.     particle.setDuration(3);  
72.     this.rootNode.addChild(particle);  
73. }  
74.   
75.   
76. MainLayer.prototype.onUpdate = function (dt) {  
77.     this.score += dt;  
78.     this.scoreLabel.setString(Math.floor(this.score));  
79. }  
80.   
81. MainLayer.prototype.onExitClicked = function () {  
82.     cc.log("onExitClicked");  
83. }  
84.   
85.   
86. MainLayer.prototype.onExit = function () {  
87.     cc.log("onExit");  
88. }  
89.   
90. MainLayer.prototype.onRenewClicked = function () {  //返回到开始界面  
91.     cc.Director.getInstance().resume();  
92.     cc.log("onRenewClicked");  
93.     cc.BuilderReader.runScene("", "StartLayer");  
94. }  
95.   
96. MainLayer.prototype.onReplayClicked = function () {  //新游戏  
97.     cc.Director.getInstance().resume();  
98.     cc.log("onReplayClicked");  
99.     cc.BuilderReader.runScene("", "MainLayer");  
100. }  
101.   
102. /*MainLayer.prototype.onReturnClicked = function () {  //返回游戏 
103.  cc.log("onReturnClicked"); 
104.  if (this.paused) { 
105.  if (this.pausedLayer) { 
106.  this.pausedLayer.removeFromParent(); 
107.  this.pausedLayer = null; 
108.  } 
109.  cc.Director.getInstance().resume(); 
110.  this.paused = false; 
111.  } 
112.  }*/  
113.   
114. MainLayer.prototype.onPauseClicked = function () {   //点击暂停游戏  
115.     this.pausedLayer = cc.BuilderReader.loadAsNodeFrom("", "PauseLayer", this);  
116.     this.pausedLayer.setPosition(cc.p(0, 0));  
117.     this.pausedLayer.setZOrder(200);  
118.     this.rootNode.addChild(this.pausedLayer);  
119.     this.paused = true;  
120.     cc.AudioEngine.getInstance().stopMusic();  
121.     cc.Director.getInstance().pause();  
122. }  
123.   
124. MainLayer.prototype.onTouchesBegan = function (touches, event) {  
125.     var loc = touches[0].getLocation();  
126. }  
127.   
128. MainLayer.prototype.onTouchesMoved = function (touches, event) {  
129.     cc.log("onTouchesMoved");  
130. }  
131.   
132. MainLayer.prototype.onTouchesEnded = function (touches, event) {  
133.     cc.log("onTouchesEnded");  
134.     var loc = touches[0].getLocation();  
135.     cc.AudioEngine.getInstance().playEffect("Resources/sounds/bomb.mp3", false);  
136.     this.monsterMove(loc.x, loc.y);  
137.     this.createParticle("around", loc.x, loc.y);  
138. }  

点击运行，效果图在最上面；

 

 

 

下一篇文章 我会介绍cocos2d-x  editor的选关界面    笔者（李元友）

资料来源：cocos2d-x  editor