12 mobile game development artifact cocos2d-x editor game pause floating layer

In the main game scenario, the game needs to be temporarily suspended, re-checked, re-played, and so on. Therefore, the player clicks the pause button to bring up a selection of the floating layer, which we will implement in this section;

 

The effect is as follows:

 

Click pause in the upper-right corner;

 

Return to the start page;

 

 

 

 

First, create a PauseLayer. ccbx. Design Example: contains one Genie and three buttons, one return button, one start button, and one check button;

 

Arrange click events for each MenuItem and specify target and image resources;

 

Open MainLayer. ccbx and add the pause button;

 

 

Open MainLayer. js and first pause the button event;

 

MainLayer. prototype. onPauseClicked = function () {// click Pause game this. pausedLayer = cc. builderReader. loadAsNodeFrom (, PauseLayer, this); this. pausedLayer. setPosition (cc. p (0, 0); this. pausedLayer. setZOrder (200); this. rootNode. addChild (this. pausedLayer); this. paused = true; cc. audioEngine. getInstance (). stopMusic (); cc. director. getInstance (). pause ();}

 

 

Then, return and reschedule click events;

 

MainLayer. prototype. onRenewClicked = function () {// return to the start interface cc. director. getInstance (). resume (); cc. log (onRenewClicked); cc. builderReader. runScene (, StartLayer);} MainLayer. prototype. onReplayClicked = function () {// New Game cc. director. getInstance (). resume (); cc. log (onReplayClicked); cc. builderReader. runScene (, MainLayer );}

 

 

All MainLayer and js Code;

 

//// CleanerScoreScene class // var MainLayer = function () {cc. log (MainLayer) this. scoreLabel = this. scoreLabel | {}; this. monster = this. monster | {}; this. score = 123 ;}; MainLayer. prototype. onDidLoadFromCCB = function () {if (sys. platform = 'browser ') {this. onEnter ();} else {this. rootNode. onEnter = function () {this. controller. onEnter () ;};} this. rootNode. schedule (function (dt) {this. controller. onUpdate (dt) ;}); this. rootNode. onExit = function () {this. controller. onExit () ;}; this. rootNode. onTouchesBegan = function (touches, event) {this. controller. onTouchesBegan (touches, event); return true ;}; this. rootNode. onTouchesMoved = function (touches, event) {this. controller. onTouchesMoved (touches, event); return true ;}; this. rootNode. onTouchesEnded = function (touches, event) {this. controller. onTouchesEnded (touches, event); return true ;}; this. rootNode. setTouchEnabled (true) ;}; MainLayer. prototype. onEnter = function () {var flowerParticle = cc. particle System. create (Resources/Participant/flower. plist); flowerParticle. setAnchorPoint (cc. p (0.5, 0.5); flowerParticle. setPosition (cc. p (60,160); flowerParticle. setPositionType (1); this. monster. addChild (flowerParticle); cc. audioEngine. getInstance (). playMusic (Resources/sounds/bg_musicloud, true);} MainLayer. prototype. monsterMove = function (x, y) {this. monster. stopAllActions (); cc. animationCache. getInstance (). addAnimations (Resources/snow_frame.plist); // Add the Frame Animation file var action0 = cc. sequence. create (cc. moveTo. create (5, cc. p (x, y); // move var actionFrame = cc forward. animate. create (cc. animationCache. getInstance (). getAnimation (monster); // get the Frame Animation var action1 = cc. repeat. create (actionFrame, 90000); var action2 = cc. spawn. create (action0, action1); // synchronize the animation this. monster. runAction (action2);} MainLayer. prototype. createParticle = function (name, x, y) {var particle = cc. particle System. create (Resources/Participant/+ name +. plist); particle. setAnchorPoint (cc. p (0.5, 0.5); particle. setPosition (cc. p (x, y); particle. setPositionType (1); particle. setDuration (3); this. rootNode. addChild (particle);} MainLayer. prototype. onUpdate = function (dt) {this. score + = dt; this. scoreLabel. setString (Math. floor (this. score);} MainLayer. prototype. onExitClicked = function () {cc. log (onExitClicked);} MainLayer. prototype. onExit = function () {cc. log (onExit);} MainLayer. prototype. onRenewClicked = function () {// return to the start interface cc. director. getInstance (). resume (); cc. log (onRenewClicked); cc. builderReader. runScene (, StartLayer);} MainLayer. prototype. onReplayClicked = function () {// New Game cc. director. getInstance (). resume (); cc. log (onReplayClicked); cc. builderReader. runScene (, MainLayer);}/* MainLayer. prototype. onReturnClicked = function () {// return to game cc. log (onReturnClicked); if (this. paused) {if (this. pausedLayer) {this. pausedLayer. removeFromParent (); this. pausedLayer = null;} cc. director. getInstance (). resume (); this. paused = false ;}} */MainLayer. prototype. onPauseClicked = function () {// click Pause game this. pausedLayer = cc. builderReader. loadAsNodeFrom (, PauseLayer, this); this. pausedLayer. setPosition (cc. p (0, 0); this. pausedLayer. setZOrder (200); this. rootNode. addChild (this. pausedLayer); this. paused = true; cc. audioEngine. getInstance (). stopMusic (); cc. director. getInstance (). pause ();} MainLayer. prototype. onTouchesBegan = function (touches, event) {var loc = touches [0]. getLocation ();} MainLayer. prototype. onTouchesMoved = function (touches, event) {cc. log (onTouchesMoved);} MainLayer. prototype. onTouchesEnded = function (touches, event) {cc. log (onTouchesEnded); var loc = touches [0]. getLocation (); cc. audioEngine. getInstance (). playEffect (Resources/sounds/bombloud, false); this. monsterMove (loc. x, loc. y); this. createParticle (around, loc. x, loc. y );}

Click Run at the top of the page;