`
makeapp628
  • 浏览: 43177 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

四 手游开发神器 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 plaincopy在CODE上查看代码片派生到我的代码片
 
  1.   
 
[javascript] view plaincopy在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.   
  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 plaincopy在CODE上查看代码片派生到我的代码片
 
  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>  

 

 

        

 

        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 plaincopy在CODE上查看代码片派生到我的代码片
 
  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 plaincopy在CODE上查看代码片派生到我的代码片
 
  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:如下图

 

分享到:
评论

相关推荐

    Cocos2d-x实战:JS卷——Cocos2d-JS开发

    资源名称:Cocos2d-x实战:JS卷——Cocos2d-JS开发内容简介:本书是介绍Cocos2d-x游戏编程和开发技术书籍,介绍了使用Cocos2d-JS中核心类、瓦片地图、物理引擎、音乐音效、数据持久化、网络通信、性能优化、多平台...

    大富翁手机游戏开发实战基于Cocos2d-x3.2引擎

    资源名称:大富翁手机游戏开发实战基于Cocos2d-x3.2引擎内容简介:李德国编著的《大富翁手机游戏开发实战(基于 Cocos2d-x3.2引擎)》使用Cocos2d-x游戏引擎技术,带领读者一步一步从零开始进行大富翁移动游戏的开发...

    精通COCOS2D-X游戏开发 基础卷_2016.4-P399-13961841.pdf

    精通COCOS2D-X游戏开发 精通COCOS2D-X游戏开发 精通COCOS2D-X游戏开发 精通COCOS2D-X游戏开发 精通COCOS2D-X游戏开发

    Cocos2D-X游戏开发技术精解

     《Cocos2D-X游戏开发技术精解》详细介绍如何使用Cocos2D-X引擎开发自己的移动平台游戏。全书共15章,主要内容包括:Cocos2D-X引擎简介;如 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    Cocos2d-x高级开发教程

    书中汇聚了热门手机游戏《捕鱼达人》开发的实战经验,作者从最基础的内容开始,逐步深入地介绍了Cocos2d-x的相关知识点。此外,书中的教学资源获得《捕鱼达人》手机游戏的授权,读者可以从一流游戏开发中高起点地...

    Cocos2D-X游戏开发技术精解.pdf

    《Cocos2D-X游戏开发技术精解》详细介绍如何使用Cocos2D-X引擎开发自己的移动平台游戏。全书共15章,主要内容包括:Cocos2D-X引擎简介;如何建立跨平台的开发环境;引擎的核心模块——渲染框架;如何实现动态画面和...

    Cocos2d-x-3.x游戏开发之旅

    Cocos2d-x-3.x游戏开发之旅-钟迪龙著 全新pdf版和附书代码(代码为工程文件,可复制) 附带目录标签

    cocos2d-x-2.1.5

    cocos2d-x-2.1.5

    cocos2d-x事件类

    在使用cocos2d-x开发游戏的过程中,为了实现逻辑和显示相分离。 在下通宵了一个晚上,写出了该事件类。 谨记,该事件只能用于cocos2d-x中。 事件发送者需要继承EventDispatcher类 事件接收者需要继承EventHandle类...

    cocos2d-x游戏开发实战精解

    本光盘是《Cocos2d-x游戏开发实战精解》一书的配书光盘,内容介绍如下。 (1)本书教学视频:该文件夹收录了本书的配套多媒体教学视频,可用暴风影音等视频播放器播放。 (2)本书源文件:该文件夹收录了本书涉及...

    精通Cocos2d-x游戏开发(进阶卷)源代码

    精通Cocos2d-x游戏开发(进阶卷)源代码 精通Cocos2d-x游戏开发(进阶卷)源代码 精通Cocos2d-x游戏开发(进阶卷)源代码

    实例妙解Cocos2D-X游戏开发

    一线资深游戏开发工程师根据Cocos2D-X 最新版本撰写,Cocos2D-X创始人王哲、CSDN创始人蒋涛联袂推荐 完全通过真实游戏案例驱动,不仅将Cocos2D-X的各种功能、原理、技巧融入其中,而且还详细讲解了空战类、塔防类、...

    Cocos2d-x 3.x游戏开发实战pdf含目录

    Cocos2d-x 3.x游戏开发实战pdf含目录,内容详细,强烈推荐给大家。

    Cocos2d-x游戏编程——C++篇 .iso

    Cocos2d-x游戏编程——C++篇(电子工业出版社,徐飞 著)书本配套的光盘代码,

    Cocos2d-x 3.x游戏开发之旅

    本书是《Cocos2d-x 游戏开发之旅》的升级版,修改了2.0版进阶到3.0版后的一些内容,新增了对CocoStudio、UI编辑器、Cocos2d-x 3.0新特性以及网络方面的知识点。主要介绍常用的API使用方式;介绍如何通过官方Demo获取...

    大富翁手机游戏开发实战 基于Cocos2d-x3.2引擎

    李德国编著的《大富翁手机游戏开发实战(基于 Cocos2d-x3.2引擎)》使用Cocos2d-x游戏引擎技术,带领读者一步一步从零开始进行大富翁移动游戏的开发。本书根据大富翁项目一一展开讲解游戏开发过程中涉及的各方面内容...

    cocos2d-x实战项目

    cocos2d-x实战项目 01.cocos2d-x原理及环境配置.rar 03.cocostudio使用方法及UI控制.rar 04.XML文件读取与骨骼动画.rarcocos2d-x实战项目 01.cocos2d-x原理及环境配置.rar 03.cocostudio使用方法及UI控制.rar 04.XML...

    cocos2d-x-3.2旧版引擎下载

    cocos2d-x-3.2下载,不多说。或者可以下载另一个资源 cocos引擎老版本集合(cocos2d-x-2.2.1 - 3.5) http://download.csdn.net/download/crazymagicdc/9982656

    cocos2d-x 3.x游戏开发实战光盘

    cocos2d-x 3.x游戏开发实战光盘

    【cocos2d-x IOS游戏开发-捕鱼达人4-8】章节代码

    4、【cocos2d-x IOS游戏开发-捕鱼达人4】基本游戏框架 资源引用页: 5、【cocos2d-x IOS游戏开发-捕鱼达人5】C++中函数代理与信号插槽机制 资源引用页: 6、【cocos2d-x IOS游戏开发-捕鱼达人6】实现开始菜单 资源...

Global site tag (gtag.js) - Google Analytics