现在的位置: 首页 > 综合 > 正文

Cocos2d-x-html5之HelloWorld深入分析与调试

2013年12月04日 ⁄ 综合 ⁄ 共 3387字 ⁄ 字号 小 中 大 ⁄ 评论关闭

另：本章所用Cocos2d-x版本为:

Cocos2d-html5-v2.1.1

http://cn.cocos2d-x.org/download


 

         html5的时代正在来临，其可以方便的运行在多平台上并调用OPENGL 进行图形渲染，大量使用html5开发的2D和3D游戏正在涌现,Cocos2d-x也顺应形势推出了相应的版本，今天我们来学习一下Cocos2d-x在Html5上怎么运行和开发及调试。

 

         打开HelloHTML5World，可以看到以下文件和目录：

res:资源图片目录：


src:当前程序的js文件目录：


main.js:主逻辑js代码文件

index.html:html5网页文件

cocos2d.js:加载Cocos2d-x库的文件

build.xml:编译cocos2d-x的html5平台版本生成的文件清单报告。

.DS_Store:系统目录显示属性存储文件，可以删除。

我们用浏览器直接打开index.html,可以看到：


     其源码为：

[html] view
plaincopy

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Cocos2d-html5 Hello World test</title>  
  6.     <link rel="icon" type="image/GIF" href="res/favicon.ico"/>  
  7. </head>  
  8. <body style="padding:0; margin: 0; background: #000;">  
  9. <div style="text-align: center; font-size: 0">  
  10.     <canvas id="gameCanvas" width="800" height="450"></canvas>  
  11. </div>  
  12. </body>  
  13. </html>  
  14. <script src="cocos2d.js"></script>  


可以看到，这里面关键的要点是两个地方：

1.  <canvas id="gameCanvas"width="800" height="450"></canvas>

在html5中创建了一个画布(canvas)，设定了名称和大小

2.  <scriptsrc="cocos2d.js"></script>

在网页中加载了cocos2d.js

打开cocos2d.js后，可以看到下面的代码：

[javascript] view
plaincopy

  1. (function () {  
  2.         //定义变量d为当前网页的文档对象  
  3.     var d = document;  
  4.         //定义变量c为一个结构，存储了一些配置属性和值。  
  5.     var c = {  
  6.         COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug  
  7.         box2d:false,//不使用box2d  
  8.         chipmunk:false,//不使用chipmunk  
  9.         showFPS:true,//显示FPS  
  10.         frameRate:60,//设定每秒60帧  
  11.         loadExtension:false,不载入扩展库  
  12.         tag:'gameCanvas', //运行cocos2d-x的画布  
  13.         engineDir:'../cocos2d/',//引擎的目录，这里指定为当前上级目录下的cocos2d目录中  
  14.         //SingleEngineFile:'',//这里注释掉了。  
  15.         appFiles:[//应用程序要使用到的两个js文件。  
  16.             'src/resource.js',//资源定义文件  
  17.             'src/myApp.js'//逻辑处理文件  
  18.         ]  
  19.     };  
  20.         //当前窗口加载一个事件响应处理，在DOM被加载时调用。  
  21.     window.addEventListener('DOMContentLoaded', function () {  
  22.         //当前文档创建一个脚本  
  23.         var s = d.createElement('script');  
  24.         //如果c结构中有SingleEngineFile变量并肯engineDir为空，则s中的脚本引用为SingleEngineFile指示的文件，当然，本例中这个变量注释掉了，这一段不成立。  
  25.         if (c.SingleEngineFile && !c.engineDir) {  
  26.             s.src = c.SingleEngineFile;  
  27.         }  
  28.             //如果engineDir有效，则s中的脚本引用为engineDir指定目录下的相应文件，本例中为“../cocos2d/platform/jsloader.js”。  
  29.         else if (c.engineDir && !c.SingleEngineFile) {  
  30.             s.src = c.engineDir + 'platform/jsloader.js';  
  31.         }  
  32.         else {  
  33.             //如果都不是，弹出对话框提示c结构成员变量设置错误。  
  34.             alert('You must specify either the single engine file OR the engine directory in "cocos2d.js"');  
  35.         }  
  36.             //将结构c做为一个成员变量存入到当前文档。  
  37.         document.ccConfig = c;  
  38.             //上面创建的‘script’的id设置为’cocos2d-html5’.  
  39.         s.id = 'cocos2d-html5';  
  40.             //将这个script加入到当前HTML文档的结尾。  
  41.         d.body.appendChild(s);  
  42.         //else if single file specified, load singlefile  
  43.     });  
  44. })();  


本页代码的作用是在html页面尾部中加入:

“<scriptsrc = ’../cocos2d/platform/jsloader.js’ id=’cocos2d-html5’></script>

下面我们来打开cocos2d目录下的’platform/jsloader.js’:

[javascript] view
plaincopy

  1. //脚本执行函数。  
  2. (function () {  
  3.         //定义变量engine为一个字符串数组，元素为运行当前版本cocos2d-x要加载的所有代码文件。  
  4.     var engine = [  
  5.         'platform/CCClass.js',  
  6.         'platform/miniFramework.js',  
  7.         'platform/CCCommon.js',  
  8.         'platform/ZipUtils.js',  
  9.         'platform/base64.js',  
  10.         'platform/gzip.js',  
  11.         'platform/CCMacro.js',  
  12.         'platform/CCFileUtils.js',  
  13.         'platform/CCTypes.js',  
  14.         
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞