十四 手游开发神器 cocos2d-x editor 之串联游戏流程

一般游戏都包括几个流程,加载界面,开始界面,选关界面,主界面,暂停界面等等;这节我将这些流程都串联起来;

 

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

 

loading界面;

十四 手游开发神器 cocos2d-x editor 之串联游戏流程_第1张图片

LoadingLayer.ccbx

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <Document  
  4.         jsControlled="true"  
  5.         jsController=""  
  6.         resolution="default"  
  7.         >  
  8.   
  9.     <Resolutions>  
  10.         <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>  
  11.         <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>  
  12.     </Resolutions>  
  13.   
  14.     <Animations>  
  15.         <Animation autoPlay="true"  
  16.                    id="0"  
  17.                    name="Default Timeline"  
  18.                    length="10"  
  19.                    chainedId="0"  
  20.                    offset="0.0"  
  21.                    position="0.0"  
  22.                    resolution="30"  
  23.                    scale="128">  
  24.             <CallbackChannel>  
  25.             </CallbackChannel>  
  26.             <SoundChannel>  
  27.             </SoundChannel>  
  28.         </Animation>  
  29.   
  30.     </Animations>  
  31.   
  32.     <Layer  
  33.             positionX="0" positionY="0"  
  34.             width="100" height="100" sizeType="Percent"  
  35.             anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"  
  36.             scaleX="1" scaleY="1"  
  37.             touchEnabled="true" positionType="LeftBottom" target="Owner">  
  38.         <LayerColor positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0" anchorPointX="0"  
  39.                     anchorPointY="0" color="#ffff40b8" target="Doc"/>  
  40.         <Sprite positionType="LeftBottom" width="245.0" height="72.0" positionX="381.0" positionY="661.0" anchorPointX="0.5"  
  41.                                          anchorPointY="0.5" src="Resources/snow_packer.plist/sa_loading_0001.png"  
  42.                                          target="Owner"/>  
  43.     </Layer>  
  44.   
  45.   
  46. </Document>  

 

 

开始界面;

十四 手游开发神器 cocos2d-x editor 之串联游戏流程_第2张图片

StartLayer.ccbx

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <Document  
  4.         jsControlled="true"  
  5.         jsController="StartLayer"  
  6.         resolution="default"  
  7.         >  
  8.   
  9.     <Resolutions>  
  10.         <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>  
  11.         <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>  
  12.     </Resolutions>  
  13.   
  14.     <Animations>  
  15.         <Animation autoPlay="true"  
  16.                    id="0"  
  17.                    name="Default Timeline"  
  18.                    length="10"  
  19.                    chainedId="0"  
  20.                    offset="0.0"  
  21.                    position="0.0"  
  22.                    resolution="30"  
  23.                    scale="128">  
  24.             <CallbackChannel>  
  25.             </CallbackChannel>  
  26.             <SoundChannel>  
  27.             </SoundChannel>  
  28.         </Animation>  
  29.   
  30.     </Animations>  
  31.   
  32.     <Layer  
  33.             positionX="0" positionY="0"  
  34.             width="100" height="100" sizeType="Percent"  
  35.             anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"  
  36.             scaleX="1" scaleY="1"  
  37.             touchEnabled="true" positionType="LeftBottom" visible="true">  
  38.         <LayerColor positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0" anchorPointX="0"  
  39.                     anchorPointY="0" color="#ff10ff9e"/>  
  40.         <Menu positionType="LeftBottom" width="40" height="40" positionX="354.0" positionY="712.0" anchorPointX="0.5"  
  41.               anchorPointY="0.5">  
  42.             <MenuItem positionType="LeftBottom" width="203" height="129" positionX="0" positionY="0" anchorPointX="0.5"  
  43.                       anchorPointY="0.5" onClick="onPlayClicked" normalImage="Resources/snow_packer.plist/m_play.png"  
  44.                       target="Doc" selectedImage="Resources/snow_packer.plist/m_play.png"/>  
  45.         </Menu>  
  46.     </Layer>  
  47.   
  48.   
  49. </Document>  


StartLayer.js

 

 

[javascript]  view plain copy 在CODE上查看代码片
 
  1. //  
  2. // CleanerScoreScene class  
  3. //  
  4. var StartLayer = function () {  
  5.     cc.log("StartLayer")  
  6.     this.LoadingLayer = this.LoadingLayer || {};  
  7.     this.passTime = 0;  
  8.     this.goStart = false;  
  9. };  
  10.   
  11. StartLayer.prototype.onDidLoadFromCCB = function () {  
  12. //    this.rootNode.onUpdate = function (dt)  
  13. //    {  
  14. //        this.controller.onUpdate();  
  15. //    };  
  16. //    this.rootNode.schedule(this.rootNode.onUpdate);  
  17.   
  18.     if (sys.platform == 'browser') {  
  19.         this.onEnter();  
  20.     }  
  21.     else {  
  22.         this.rootNode.onEnter = function () {  
  23.             this.controller.onEnter();  
  24.         };  
  25.     }  
  26.   
  27.     this.rootNode.onExit = function () {  
  28.         this.controller.onExit();  
  29.     };  
  30.   
  31.     this.rootNode.schedule(function (dt) {  
  32.         this.controller.onUpdate(dt);  
  33.     });  
  34. };  
  35.   
  36. StartLayer.prototype.onEnter = function () {  
  37.     this.LoadingLayer = cc.BuilderReader.loadAsNodeFrom("""LoadingLayer"this);  
  38.     this.LoadingLayer.setPosition(cc.p(0, 0));  
  39.     this.LoadingLayer.setZOrder(200);  
  40.     this.rootNode.addChild(this.LoadingLayer);  
  41.     //  cc.Director.getInstance().pause();  
  42.     /*this.LoadingLayer.scheduleOnce(this.removeLoading, 1);*/  
  43.     this.goStart = true;  
  44.     this.startTime = this.passTime;  
  45.   
  46. }  
  47.   
  48. StartLayer.prototype.removeLoading = function () {  
  49.     // if (this.LoadingLayer) {  
  50.     cc.log("removeLoading");  
  51.     // cc.Director.getInstance().resume();  
  52.     this.LoadingLayer.removeFromParent();  
  53. }  
  54.   
  55. StartLayer.prototype.onUpdate = function (dt) {  
  56.     this.passTime += dt;  
  57.     if (this.passTime - this.startTime > 3 && this.goStart) {  
  58.         this.removeLoading();  
  59.         this.goStart = false;  
  60.     }  
  61. }  
  62.   
  63. StartLayer.prototype.onPlayClicked = function () {  
  64.     cc.BuilderReader.runScene("""GameSelectLayer");  
  65. }  
  66.   
  67. StartLayer.prototype.onExit = function () {  
  68.   
  69. }  

 

 

选关界面

十四 手游开发神器 cocos2d-x editor 之串联游戏流程_第3张图片

GameSelectLayer.ccbx

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <Document  
  4.         jsControlled="true"  
  5.         jsController="GameSelectLayer"  
  6.         resolution="default"  
  7.         >  
  8.   
  9.   <Resolutions>  
  10.     <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>  
  11.     <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>  
  12.   </Resolutions>  
  13.   
  14.   <Animations>  
  15.     <Animation autoPlay="true"  
  16.                id="0"  
  17.                name="Default Timeline"  
  18.                length="10"  
  19.                chainedId="0"  
  20.                offset="0.0"  
  21.                position="0.0"  
  22.                resolution="30"  
  23.                scale="128">  
  24.       <CallbackChannel>  
  25.       </CallbackChannel>  
  26.       <SoundChannel>  
  27.       </SoundChannel>  
  28.     </Animation>  
  29.   
  30.   </Animations>  
  31.   
  32.   <Layer  
  33.           positionX="0" positionY="0"  
  34.           width="100" height="100" sizeType="Percent"  
  35.           anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"  
  36.           scaleX="1" scaleY="1"  
  37.           touchEnabled="true" positionType="LeftBottom">  
  38.   
  39.     <LayerColor positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0" anchorPointX="0"  
  40.                   anchorPointY="0" color="#ff20b4ff"/>  
  41.       <Sprite name="bg_g" var="b1" target="Doc" positionX="360" positionY="641"  
  42.             positionType="LeftBottom" anchorPointX="0.5" anchorPointY="0.5"  
  43.             scaleX="1" scaleY="1" scaleType="Absolute" ignoreAnchorPoint="false"  
  44.             src="Resources/s_bg_grade.png" visible="false" color="#ffffffff"/>  
  45.     <Sprite positionType="LeftBottom" width="587.0" height="834" positionX="361.0" positionY="689.0" anchorPointX="0.5"  
  46.             anchorPointY="0.5" src="Resources/s_bg_grade.png">  
  47.         <Node positionType="LeftBottom" width="40" height="100" positionX="42.0" positionY="42.0" anchorPointX="0"  
  48.             anchorPointY="0" target="Doc" var="listTop">  
  49.       <ScrollView name="levelScrollPanel"  
  50.                   var="levelScrollPanel" target="Doc" positionX="0" positionY="100"  
  51.                   positionType="LeftBottom" width="510" height="500"  
  52.                   sizeType="Absolute" anchorPointX="0" anchorPointY="0"  
  53.                   scaleX="1" scaleY="1"  
  54.                   clipsToBounds="true"  
  55.                   direction="Horizontal"  
  56.                   bounces="true"  
  57.                   ignoreAnchorPoint="true" visible="true" touchEnabled="true" mouseEnabled="true">  
  58.       </ScrollView></Node>  
  59.         <Node positionType="LeftBottom" width="40" height="40" positionX="268.0" positionY="73.0" anchorPointX="0.5"  
  60.               anchorPointY="0.5" var="dotNode" target="Doc"/>  
  61.   
  62.     </Sprite>  
  63.   </Layer>  
  64.   
  65.   
  66. </Document>  


GameSelectLayer.js

 

 

[javascript]  view plain copy 在CODE上查看代码片
 
  1. GAME_LEVEL = 0;  
  2. var GameSelectLayer = function () {  
  3.     cc.log("GameSelectLayer");  
  4.     this.levelScrollPanel = this.levelScrollPanel || {};  
  5.     this.pageIndex = 0;  
  6.     this.pageMax = 4;  
  7.     this.dotNode = this.dotNode || {};  
  8.     this.start = false;  
  9.   
  10. };  
  11.   
  12. GameSelectLayer.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.onExit = function () {  
  23.         this.controller.onExit();  
  24.     };  
  25.   
  26.   
  27.     this.rootNode.onTouchesBegan = function (touches, event) {  
  28.         this.controller.onTouchesBegan(touches, event);  
  29.         return true;  
  30.     };  
  31.   
  32.     this.rootNode.onTouchesMoved = function (touches, event) {  
  33.         this.controller.onTouchesMoved(touches, event);  
  34.         return true;  
  35.     };  
  36.     this.rootNode.onTouchesEnded = function (touches, event) {  
  37.         this.controller.onTouchesEnded(touches, event);  
  38.         return true;  
  39.     };  
  40.     this.rootNode.setTouchEnabled(true);  
  41. };  
  42.   
  43. GameSelectLayer.prototype.onEnter = function () {  
  44.     this.maxColumns = 3;  
  45.     this.columnSize = 177;  
  46.     this.maxRows = 5;  
  47.     this.rowSize = 104;  
  48.     cc.log("GameSelectLayer");  
  49.   
  50.     this.itemDatas = [];  
  51.     var itemName = "";  
  52.     var levelPan = cc.Layer.create();  
  53.     var currentLevel = sys.localStorage.getItem("pb_level");  
  54.     if (currentLevel == null) {  
  55.         currentLevel = 0;  
  56.     }  
  57.   
  58.     sys.localStorage.setItem("pb_level_score_1""S");  
  59.     currentLevel = 3;  
  60.   
  61.     for (var i = 0; i < 50; i++) {  
  62.         var xIndex = Math.floor(i % 3) + Math.floor(i / 15) * 3;  
  63.         var yIndex = Math.floor(i / 3 % 5);  
  64.         var levelScore = "A"  
  65.         if (i < currentLevel) {  
  66.             levelScore = sys.localStorage.getItem("pb_level_score_" + i);  
  67.             if (levelScore == null || levelScore == '') {  
  68.                 levelScore = "A";  
  69.             }  
  70.             if ("S" == levelScore) {  
  71.                 itemName = "GameSelectItemScoreS";  
  72.             }  
  73.             else {  
  74.                 itemName = "GameSelectItemScore";  
  75.             }  
  76.         }  
  77.         else if (i == currentLevel) {  
  78.             itemName = "GameSelectItemLevel";  
  79.         }  
  80.         else {  
  81.             itemName = "GameSelectItemLocked";  
  82.         }  
  83.         var itemData = {  
  84.             xIndex: xIndex,  
  85.             yIndex: yIndex,  
  86.             index: i,  
  87.             type: itemName,  
  88.             onItemAction: function () {  
  89.                 cc.log("onItemAction");  
  90.                 var action = cc.ScaleBy.create(0.5, 0.8);  
  91.                 this.rootNode.runAction(cc.Sequence.create(  
  92.                     action, action.reverse(), cc.DelayTime.create(2)  
  93.                     //  cc.CallFunc.create(this.onItemClicked())  
  94.                 ));  
  95.             },  
  96.             onItemClicked: function () {  
  97.                 cc.log("onItemClicked");  
  98.                 GAME_LEVEL = (this.index + 1);  
  99.                 require("MainLayer.js");  
  100.                 cc.BuilderReader.runScene("""MainLayer");  
  101.             },  
  102.             onLockOpened: function () {  
  103.             }  
  104.         };  
  105.         var item = cc.BuilderReader.loadAsNodeFrom("""GameSelectItemSprite", itemData);  
  106.         if (item == null) {  
  107.             continue;  
  108.         }  
  109.         item.setPosition(cc.p(this.columnSize * xIndex, this.rowSize * (4 - yIndex)));  
  110.         item.setZOrder(11);  
  111.         itemData.rootNode = item;  
  112.         itemData.controller = this;  
  113.         this.itemDatas.push(itemData);  
  114.         itemData.levelNum.setString("" + (i + 1));  
  115.         levelPan.addChild(item);  
  116.     }  
  117.     levelPan.setContentSize(cc.size(this.columnSize * 12, this.rowSize * 5));  
  118.     this.levelScrollPanel.setTouchEnabled(false);  
  119.     this.levelScrollPanel.setBounceable(true);  
  120.     this.levelScrollPanel.setContainer(levelPan);  
  121.     this.levelScrollPanel.setTouchPriority(-99999);  
  122.   
  123.     this.pageDots(0);  
  124. }  
  125.   
  126. GameSelectLayer.prototype.onUpdate = function () {  
  127.   
  128. }  
  129.   
  130. GameSelectLayer.prototype.onExit = function () {  
  131.   
  132. }  
  133.   
  134. GameSelectLayer.prototype.onTouchesBegan = function (touches, event) {  
  135.     cc.log("onTouchesBegan");  
  136.     this.beganPosition = touches[0].getLocation();  
  137. }  
  138.   
  139. GameSelectLayer.prototype.onTouchesMoved = function (touches, event) {  
  140.     this.movePosition = touches[0].getLocation();  
  141. }  
  142.   
  143. GameSelectLayer.prototype.onTouchesEnded = function (touches, event) {  
  144.     cc.log("onTouchesEnded");  
  145.     var loc = touches[0].getLocation();  
  146.     var distanceX = this.beganPosition.x - loc.x;  
  147.   
  148.     var x = this.levelScrollPanel.getContentOffset().x;  
  149.     var y = this.levelScrollPanel.getContentOffset().y;  
  150.     this.levelScrollPanel.unscheduleAllCallbacks();  
  151.   
  152.     if (distanceX > 50) {  
  153.         if (this.pageIndex < 4) {  
  154.             this.pageIndex += 1;  
  155.         }  
  156.         this.pageDots(this.pageIndex);  
  157.     }  
  158.     else if (distanceX < -50) {  
  159.         if (this.pageIndex > 0) {  
  160.             this.pageIndex -= 1;  
  161.         }  
  162.         this.pageDots(this.pageIndex);  
  163.     }  
  164.     else {  
  165.         this.onItemClicked(loc);  
  166.     }  
  167.     this.levelScrollPanel.setContentOffsetInDuration(cc.p(-this.columnSize * 3 * this.pageIndex, y), 0.5);  
  168. }  
  169.   
  170. GameSelectLayer.prototype.onItemClicked = function (location) {  
  171.     var x = location.x;  
  172.     var y = location.y;  
  173.   
  174.     if (!isInScroll(location)) {  
  175.         cc.log("out");  
  176.         return;  
  177.     }  
  178.   
  179.     var scrollPanelRect = this.levelScrollPanel.getBoundingBox();  
  180.     var xIndex = Math.floor((x - 110) / this.columnSize) + this.pageIndex * 3;  
  181.     var yIndex = 4 - Math.floor((y - 385) / this.rowSize);  
  182.     cc.log("scrollX==" + scrollPanelRect.x + ",scrollY==" + scrollPanelRect.y);  
  183.     cc.log("xIndex==" + xIndex + ",yIndex==" + yIndex);  
  184.   
  185.     for (var i = 0; i < this.itemDatas.length; i++) {  
  186.         if (this.itemDatas[i].xIndex == xIndex && this.itemDatas[i].yIndex == yIndex) {  
  187.             cc.log("click i=" + i);  
  188.             this.itemDatas[i].onItemClicked();  
  189.             break;  
  190.         }  
  191.     }  
  192. }  
  193.   
  194. GameSelectLayer.prototype.pageDots = function (position) {  
  195.     this.dotNode.removeAllChildren();  
  196.     for (var i = 0; i < 4; i++) {  
  197.         var dots = ["s_point.png""s_point_s.png"];  
  198.         var type = 0;  
  199.         if (position == i) {  
  200.             type = 1;  
  201.         }  
  202.         var dotSprite = cc.Sprite.createWithSpriteFrameName(dots[type]);  
  203.         dotSprite.setAnchorPoint(cc.p(0, 1));  
  204.         dotSprite.setPosition(cc.p(30 * i, 60));  
  205.         dotSprite.setZOrder(100);  
  206.         this.dotNode.addChild(dotSprite);  
  207.     }  
  208. }  
  209.   
  210. function isInScroll(location) {  
  211.     var x = location.x;  
  212.     var y = location.y;  
  213.     if (x > 110 && x < (110 + 510) && y > 385 && y < (385 + 500)) {  
  214.         return true;  
  215.     }  
  216.     return false  
  217. }  


GameSelectItemSprite.ccbx

 

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <Document  
  4.         jsControlled="true"  
  5.         jsController=""  
  6.         resolution="default"  
  7.         >  
  8.   
  9.   <Resolutions>  
  10.     <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>  
  11.     <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>  
  12.   </Resolutions>  
  13.   
  14.   <Animations>  
  15.     <Animation autoPlay="true"  
  16.                id="0"  
  17.                name="Default Timeline"  
  18.                length="10"  
  19.                chainedId="0"  
  20.                offset="0.0"  
  21.                position="0.0"  
  22.                resolution="30"  
  23.                scale="128">  
  24.       <CallbackChannel>  
  25.       </CallbackChannel>  
  26.       <SoundChannel>  
  27.       </SoundChannel>  
  28.     </Animation>  
  29.   
  30.   </Animations>  
  31.   <Sprite  
  32.           positionX="0" positionY="0"  
  33.           sizeType="Absolute"  
  34.           anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"  
  35.           scaleX="1.0" scaleY="1.0"  
  36.           positionType="LeftBottom" src="Resources/snow_packer.plist/s_bun_red_normal.png" target="Owner" var="bgSprite" width="156" height="83"  
  37.           color="#ff15ffa0">  
  38.     <LayerColor positionType="LeftBottom" width="156" height="83" positionX="0" positionY="0" anchorPointX="0"  
  39.                   anchorPointY="0" color="#ff0cffa2" visible="true"/>  
  40.       <Sprite positionType="LeftBottom" width="77.0" height="77.0" positionX="113.0" positionY="40.0" anchorPointX="0.5"  
  41.                                          anchorPointY="0.5" src="Resources/snow_packer.plist/m_star_s.png"  
  42.                                          scaleX="0.6" scaleY="0.6"/>  
  43.     <LabelBMFont positionType="LeftBottom" width="40" height="40" positionX="39.0" positionY="56.0" anchorPointX="0.5"  
  44.                  anchorPointY="0.5" text="2" src="Resources/fonts/s_number_gold.fnt" var="levelNum" target="Owner" name="levelNum"  
  45.                  scaleX="1.5" scaleY="1.5"/>  
  46.       </Sprite>  
  47.   
  48.   
  49. </Document>  



 

 

主游戏场景;

十四 手游开发神器 cocos2d-x editor 之串联游戏流程_第4张图片

MainLayer.ccbx

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <Document  
  4.         jsControlled="true"  
  5.         jsController="MainLayer"  
  6.         resolution="default"  
  7.         >  
  8.   
  9.     <Resolutions>  
  10.         <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>  
  11.         <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>  
  12.     </Resolutions>  
  13.   
  14.     <Animations>  
  15.         <Animation autoPlay="true"  
  16.                    id="0"  
  17.                    name="Default Timeline"  
  18.                    length="10"  
  19.                    chainedId="0"  
  20.                    offset="0.0"  
  21.                    position="0.0"  
  22.                    resolution="30"  
  23.                    scale="128">  
  24.             <CallbackChannel>  
  25.             </CallbackChannel>  
  26.             <SoundChannel>  
  27.             </SoundChannel>  
  28.         </Animation>  
  29.   
  30.     </Animations>  
  31.     <Layer  
  32.             positionX="0" positionY="0.0"  
  33.             sizeType="Percent"  
  34.             width="100" height="100"  
  35.             anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"  
  36.             scaleX="1" scaleY="1"  
  37.             >  
  38.   
  39.         <Sprite positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0"  
  40.                 anchorPointX="0"  
  41.                 anchorPointY="0" src="Resources/m_bg_main.jpg">  
  42.         <Sprite positionType="LeftBottom" width="182.0" height="238.0" positionX="117.0" positionY="1133.0" anchorPointX="0.5"  
  43.                                          anchorPointY="0.5" src="Resources/snow_packer.plist/m_indicator2.png"/>  
  44.             <LabelTTF positionType="LeftBottom" width="200" height="50" positionX="303.0" positionY="1177.0" anchorPointX="0.5"  
  45.                       anchorPointY="0.5" text="分数:" fontSize="30" vAlign="Center" hAlign="Top" color="#ffff3219"  
  46.                       visible="false"/>  
  47.             <LabelBMFont positionType="LeftBottom" width="40" height="40" positionX="241.0" positionY="1068.0" anchorPointX="0.5"  
  48.                          anchorPointY="0.5" src="Resources/fonts/score.fnt" text="123" scaleX="1" scaleY="1"  
  49.                          var="scoreLabel" target="Doc" visible="false"/>  
  50.             <Sprite positionType="LeftBottom" width="113.0" height="120.0" positionX="350.0" positionY="747.0" anchorPointX="0.5"  
  51.                                          anchorPointY="0.5" src="Resources/snow_packer.plist/m_monster_g_0001.png"  
  52.                                          var="monster" target="Doc"/>  
  53.             <Menu positionType="LeftBottom" width="100" height="100" positionX="608.0" positionY="1166.0" anchorPointX="0.5"  
  54.                   anchorPointY="0.5">  
  55.                 <MenuItem positionType="LeftBottom" width="107" height="112" positionX="13.0" positionY="18.0"  
  56.                           anchorPointX="0.5"  
  57.                           anchorPointY="0.5" normalImage="Resources/snow_packer.plist/m_bun_pause_s.png"  
  58.                           onClick="onPauseClicked" target="Doc"/>  
  59.             </Menu>  
  60.         </Sprite>  
  61.         <Menu positionType="LeftBottom" width="40" height="40" positionX="371.0" positionY="299.0" anchorPointX="0.5"  
  62.               anchorPointY="0.5" scaleX="2.4" scaleY="1.725" visible="false">  
  63.             <MenuItem positionType="LeftBottom" width="40" height="40" positionX="0" positionY="0"  
  64.                       anchorPointX="0"  
  65.                       anchorPointY="0"  
  66.                       normalImage="Resources/CloseNormal.png"  
  67.                       selectedImage="Resources/CloseSelected.png" disabledImage="Resources/CloseSelected.png"  
  68.                       target="Doc" onClick="onExitClicked"/>  
  69.         </Menu>  
  70.     </Layer>  
  71.   
  72.   
  73. </Document>  


MainLayer.js

 

 

[javascript]  view plain copy 在CODE上查看代码片
 
  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.onSelectClicked = function () {  //选关  
  97.     cc.Director.getInstance().resume();  
  98.     cc.log("onListClicked");  
  99.     cc.BuilderReader.runScene("""GameSelectLayer");  
  100. }  
  101.   
  102. MainLayer.prototype.onReplayClicked = function () {  //新游戏  
  103.     cc.Director.getInstance().resume();  
  104.     cc.log("onReplayClicked");  
  105.     cc.BuilderReader.runScene("""MainLayer");  
  106. }  
  107.   
  108. /*MainLayer.prototype.onReturnClicked = function () {  //返回游戏 
  109.  cc.log("onReturnClicked"); 
  110.  if (this.paused) { 
  111.  if (this.pausedLayer) { 
  112.  this.pausedLayer.removeFromParent(); 
  113.  this.pausedLayer = null; 
  114.  } 
  115.  cc.Director.getInstance().resume(); 
  116.  this.paused = false; 
  117.  } 
  118.  }*/  
  119.   
  120. MainLayer.prototype.onPauseClicked = function () {   //点击暂停游戏  
  121.     this.pausedLayer = cc.BuilderReader.loadAsNodeFrom("""PauseLayer"this);  
  122.     this.pausedLayer.setPosition(cc.p(0, 0));  
  123.     this.pausedLayer.setZOrder(200);  
  124.     this.rootNode.addChild(this.pausedLayer);  
  125.     this.paused = true;  
  126.     cc.AudioEngine.getInstance().stopMusic();  
  127.     cc.Director.getInstance().pause();  
  128. }  
  129.   
  130. MainLayer.prototype.onTouchesBegan = function (touches, event) {  
  131.     var loc = touches[0].getLocation();  
  132. }  
  133.   
  134. MainLayer.prototype.onTouchesMoved = function (touches, event) {  
  135.     cc.log("onTouchesMoved");  
  136. }  
  137.   
  138. MainLayer.prototype.onTouchesEnded = function (touches, event) {  
  139.     cc.log("onTouchesEnded");  
  140.     var loc = touches[0].getLocation();  
  141.     cc.AudioEngine.getInstance().playEffect("Resources/sounds/bomb.mp3"false);  
  142.     this.monsterMove(loc.x, loc.y);  
  143.     this.createParticle("around", loc.x, loc.y);  
  144. }  



 

 

暂停界面;

十四 手游开发神器 cocos2d-x editor 之串联游戏流程_第5张图片

PauseLayer.ccbx

 

[javascript]  view plain copy 在CODE上查看代码片
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <Document  
  4.         jsControlled="true"  
  5.         jsController=""  
  6.         resolution="default"  
  7.         >  
  8.   
  9.     <Resolutions>  
  10.         <Resolution centeredOrigin="false" ext="iphone" height="1280" width="720" name="default" scale="1"/>  
  11.         <Resolution centeredOrigin="false" ext="iphone" height="720" width="1280" name="default1" scale="1"/>  
  12.     </Resolutions>  
  13.   
  14.     <Animations>  
  15.         <Animation autoPlay="true"  
  16.                    id="0"  
  17.                    name="Default Timeline"  
  18.                    length="10"  
  19.                    chainedId="0"  
  20.                    offset="0.0"  
  21.                    position="0.0"  
  22.                    resolution="30"  
  23.                    scale="128">  
  24.             <CallbackChannel>  
  25.             </CallbackChannel>  
  26.             <SoundChannel>  
  27.             </SoundChannel>  
  28.         </Animation>  
  29.   
  30.     </Animations>  
  31.   
  32.     <Layer  
  33.             positionX="0" positionY="0"  
  34.             width="100" height="100" sizeType="Percent"  
  35.             anchorPointX="0.5" anchorPointY="0.5" ignoreAnchorPoint="true"  
  36.             scaleX="1" scaleY="1"  
  37.             touchEnabled="true" positionType="LeftBottom" target="Owner" mouseEnabled="true" keyboardEnabled="true">  
  38.         <LayerColor positionType="LeftBottom" width="720" height="1280" positionX="0" positionY="0" anchorPointX="0"  
  39.                     anchorPointY="0" color="#5757565a" touchEnabled="true" mouseEnabled="true" keyboardEnabled="true"/>  
  40.         <Sprite positionType="LeftBottom" width="587.0" height="834.0" positionX="362.0" positionY="645.0"  
  41.                 anchorPointX="0.5"  
  42.                 anchorPointY="0.5" src="Resources/s_bg_grade.png">  
  43.         <!--<LayerColor positionType="LeftBottom" width="600" height="800" positionX="66.0" positionY="234.0"  
  44.                     anchorPointX="0"  
  45.                     anchorPointY="0" color="#ffff55fd" touchEnabled="true" mouseEnabled="true" keyboardEnabled="true"  
  46.                     accelerometerEnabled="true">-->  
  47.             <Sprite positionType="LeftBottom" width="113.0" height="120.0" positionX="307.0" positionY="588.0"  
  48.                     anchorPointX="0.5"  
  49.                     anchorPointY="0.5" src="Resources/snow_packer.plist/m_monster_g_0002.png"  
  50.                     scaleX="2" scaleY="2"/>  
  51.             <Menu positionType="LeftBottom" width="40" height="40" positionX="281.0" positionY="259.0"  
  52.                   anchorPointX="0.5"  
  53.                   anchorPointY="0.5">  
  54.                 <MenuItem positionType="LeftBottom" width="99" height="94" positionX="-136.0" positionY="-4.0"  
  55.                           anchorPointX="0.5" anchorPointY="0.5" normalImage="Resources/snow_packer.plist/m_bun_back.png"  
  56.                           target="Owner" onClick="onRenewClicked"  
  57.                           selectedImage="Resources/snow_packer.plist/m_bun_back.png"/>  
  58.                 <MenuItem positionType="LeftBottom" width="99" height="94" positionX="30.0" positionY="-3.0"  
  59.                           anchorPointX="0.5"  
  60.                           anchorPointY="0.5" normalImage="Resources/snow_packer.plist/m_bun_again.png" target="Owner"  
  61.                           onClick="onReplayClicked" selectedImage="Resources/snow_packer.plist/m_bun_again.png"/>  
  62.                 <MenuItem positionType="LeftBottom" width="99" height="94" positionX="201.0" positionY="-1.0"  
  63.                           anchorPointX="0.5" anchorPointY="0.5" normalImage="Resources/snow_packer.plist/m_bun_list.png"  
  64.                           target="Owner" onClick="onSelectClicked"  
  65.                           selectedImage="Resources/snow_packer.plist/m_bun_list.png"/>  
  66.             </Menu>  
  67.         <!--</LayerColor>-->  
  68.         </Sprite>  
  69.   
  70.     </Layer>  
  71.   
  72.   
  73. </Document>  


最后主函数Main,js,Main.xml;

 

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">  
  3. <plist version="1.0">  
  4. <dict>  
  5.     <key>name</key>  
  6.     <string>Game</string>  
  7.     <key>language</key>  
  8.     <string>Javascript</string>  
  9.     <key>main</key>  
  10.     <string>main.js</string>  
  11.     <key>designWidth</key>  
  12.     <string>720</string>  
  13.     <key>designHeight</key>  
  14.     <string>1280</string>  
  15.     <key>designPolicy</key>  
  16.     <string>NO_BORDER</string>  
  17.     <key>viewWidth</key>  
  18.     <string>360</string>  
  19.     <key>viewHeight</key>  
  20.     <string>640</string>  
  21.     <key>debug</key>  
  22.     <string>false</string>  
  23. </dict>  
  24. </plist>  

 

[javascript]  view plain copy 在CODE上查看代码片
 
  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. require("GameSelectLayer.js");  
  62.   
  63. if (sys.platform == 'browser') {  
  64.   
  65.     var Cocos2dXApplication = cc.Application.extend({  
  66.         config: document['ccConfig'],  
  67.         ctor: function () {  
  68.             this._super();  
  69.             cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];  
  70.             cc.initDebugSetting();  
  71.             cc.setup(this.config['tag']);  
  72.             cc.AppController.shareAppController().didFinishLaunchingWithOptions();  
  73.         },  
  74.         applicationDidFinishLaunching: function () {  
  75.             var director = cc.Director.getInstance();  
  76.             // director->enableRetinaDisplay(true);  
  77.             // director.setDisplayStats(this.config['showFPS']);  
  78.             // set FPS. the default value is 1.0/60 if you don't call this  
  79.             director.setAnimationInterval(1.0 / this.config['frameRate']);  
  80.             var glView = director.getOpenGLView();  
  81.             glView.setDesignResolutionSize(1280, 720, cc.RESOLUTION_POLICY.SHOW_ALL);  
  82.             cc.Loader.preload(ccb_resources, function () {  
  83.                 cc.BuilderReader.runScene("""StartLayer");  
  84.             }, this);  
  85.             return true;  
  86.         }  
  87.     });  
  88.     var myApp = new Cocos2dXApplication();  
  89. else {  
  90.     cc.BuilderReader.runScene("""StartLayer");  
  91. }  



 

 

 

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

你可能感兴趣的:(editor,Cocos2D-x游戏引擎,cocos2d场景切换,cocos2d-x游戏源码)