“Hello World”——多么熟悉的问候语。对于Cocos2d-Js来说，这个问候，来得太简单了，无论你是否熟悉Cocos2d-Js，只要你用过或者见过其他人使用过与Eclipse类似的IDE的话，简单几步，就可以创建一个可以运行项目，跑起你对世界的问候“Hello World”。
然而，对于大多数“新手”甚至是一部分“老手”来说，新建的一个项目，可能对各个目录或文件有个大概的了解，但，如果要深入每个文件来细致解释的话，可能就不行了，更不用说深入每一行代码了。我们今天，就来解决这个问题。
一、新建一个简单项目在这里呢，我们先新建一个项目，然后，根据这个新建的项目，我们深入地去解释一下。当然了，新建之后，你可以自己运行一下，用模拟器形式和Web形式。新建的项目大致情况如下：
二、总体分析如果一切顺利的话，你新建的项目的大概情况呢，就和上面的图示大致一样。
我们首先来大概分析一下项目的组成内容，自上而下顺序分析。
JavaScript Resources： 你使用的就是JavaScript，没有它，你怎么搞？
cocosstudio文件夹：主要用于存放Cocos Studio项目相关内容等。
res文件夹：主要存放资源文件，如Json文件，图片，音乐等。
script文件夹：主要存放游戏引擎的相关文件，主要是Jsb*.Js文件。
src文件夹：存放主要的程序代码。
——app.Js：实现游戏场景“Hello World”的Js文件。
——resource.Js：定义资源对应的变量。
config.Json：保存模拟器运行配置信息。
index.HTML： Web工程的首页。
main.Js：与首页index.HTML对应的Js文件。
project.Json：项目的配置信息。
下面，我们详细分析一下，其中一些比较让人困惑的部分。一些简单的文件和文件夹就不再分析了。
三、index.HTML——Web工程的首页代码如下：
<!DOCTYPE HTML><HTML><head> <Meta charset="utf-8"> <Title>Cocos2d-HTML5 Hello World test</Title> <link rel="icon" type="image/GIF" href="res/favicon.ico"/> <Meta name="apple-mobile-web-app-capable" content="yes"/> <Meta name="full-screen" content="yes"/> <Meta name="screen-orIEntation" content="portrait"/> <Meta name="x5-fullscreen" content="true"/> <Meta name="360-fullscreen" content="true"/> <style> body,canvas,div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -kHTML-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0); } </style></head><body style="padding:0; margin: 0; background: #000;"><canvas ID="gameCanvas" wIDth="800" height="450"></canvas><script src="frameworks/cocos2d-HTML5/CCBoot.Js"></script><script src="main.Js"></script></body></HTML>
代码分析：
四、main.Js——与首页对应的Js上面是一段很简单的HTML代码，并没有涉及什么高级用法。
网页头部（head）：主要简单设置了网页样式（style）以及Meta信息，其中Meta信息是网页的基本信息，主要作用是尽量使得网页能够在各种浏览器上优雅地显示出来。具体Meta的用法请自行Google或百度，这里就不赘述了。
canvas标签： canvas标签是HTML5提供的，通过JavaScript可以在Canvas上绘制2D图形，Cocos2d-Js在网页运行的游戏场景都是通过Canvas渲染出来的，但Cocos2d-Js在本地运行游戏场景时，是通过OpenGL渲染出来的。其实与OpenGL类似，HTML5有WebGL，但是不同浏览器对WebGL的支持程度不同。所以，Cocos2d-Js没有采用WebGL进行渲染，而是采用了Canvas。虽然后者在性能方面不如前者，但是，对于一般的网页游戏来说，Canvas已经足够满足要求了。但是，我觉得未来的发展趋势必然是对WebGL的全面支持，HTML5游戏（网页游戏）会越来越好，性能也越来越不是问题。另外，注意canvas标签的ID，后面的project.Json文件中会用到这个ID。
JavaScript导入：文件的末尾分别导入了CCBoot.Js和main.Js文件，其中CCBoot.Js可以查看源码，是游戏引擎文件。main.Js则是我们马上要讲的与首页对应的JavaScript文件。
代码如下：
cc.game.onStart = function(){ cc.vIEw.adjustVIEwPort(true); cc.vIEw.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL); cc.vIEw.resizeWithbrowserSize(true); //load resources cc.LoaderScene.preload(g_resources,function () { cc.director.runScene(new HelloWorldScene()); },this);};cc.game.run();
代码分析：
五、project.Json——项目配置文件main.Js主要负责启动游戏场景，无论是在Web浏览器上运行还是在本地运行，都是由它来负责启动游戏场景。
其中，cc.game.onStart是设置cc.game的onStart函数方法，在游戏启动时会自动调用这个函数。该函数的第一、二行代码，用于设置游戏视图的相关属性。其中，第二行是设置游戏视图的适配策略，这个我们后面再详细介绍，这里有个印象就好。接下来是加载游戏场景所需的资源，其中g_resources参数是加载资源的数组，该数组是在resource.Js文件中定义的。加载完资源之后，要通过cc.director对象来运行HelloWorldScene场景。
最后一句cc.game.run()。让游戏启动，这样才会在适当的时机自动运行我们刚刚定义好的onStart函数方法。
PS：有些方法没有细说，由于Cocos2d-Js是开源的，你可以自行查看源代码，其中一些深入的东西，我们后面会慢慢讲。
代码如下：
{ "project_type": @H_366_404@"JavaScript","deBUGMode" : 1,"showFPS" : true,"frameRate" : 60,"ID" : @H_366_404@"gameCanvas","renderMode" : 0,"engineDir":@H_366_404@"frameworks/cocos2d-HTML5","modules" : [@H_366_404@"cocos2d",@H_366_404@"cocostudio"],"JsList" : [ @H_366_404@"src/resource.Js",@H_366_404@"src/app.Js" ] } 代码分析：
其实这个文件主要是项目的一些配置信息。由于在mian.Js文件开头有一段对project.Json文件的简要介绍，介绍地很全面了。虽然是英文的，但是还是很简单的。看看就懂了。这里主要提一点，Cocos2d-Js游戏引擎有很多模块（modules），我们最好按需加载，而不是全部加载，至于游戏引擎都有哪些模块，各个模块到底都包含些什么内容，请自行查看frameworks\cocos2d-HTML5\moduleConfig.Json文件。
英文介绍如下：
/** * A brIEf explanation for @H_366_404@"project.Json": * Here is the content of project.Json file,this is the global configuration for your game,you can modify it to customize some behavior. * The detail of each fIEld is under it. { @H_366_404@"project_type": @H_366_404@"JavaScript",// @H_366_404@"project_type" indicate the program language of your project,you can ignore this fIEld @H_366_404@"deBUGMode" : 1,// @H_366_404@"deBUGMode" possible values : // 0 - No message will be printed. // 1 - cc.error,cc.assert,cc.warn,cc.log will print in console. // 2 - cc.error,cc.warn will print in console. // 3 - cc.error,cc.assert will print in console. // 4 - cc.error,cc.log will print on canvas,available only on web. // 5 - cc.error,cc.warn will print on canvas,available only on web. // 6 - cc.error,cc.assert will print on canvas,available only on web. @H_366_404@"showFPS" : true,// left bottom corner fps information will show when @H_366_404@"showFPS" equals true,otherwise it will be hIDe. @H_366_404@"frameRate" : 60,// @H_366_404@"frameRate" set the wanted frame rate for your game,but the real fps depends on your game implementation and the running environment. @H_366_404@"ID" : @H_366_404@"gameCanvas",// @H_366_404@"gameCanvas" sets the ID of your canvas element on the web page,it@H_366_404@'s useful only on web. "renderMode" : 0,// "renderMode" sets the renderer type,only useful on web : // 0 - automatically chosen by engine // 1 - Forced to use canvas renderer // 2 - Forced to use WebGL renderer,but this will be ignored on mobile browsers "engineDir" : "frameworks/cocos2d-HTML5/",// In deBUG mode,if you use the whole engine to develop your game,you should specify its relative path with "engineDir",// but if you are using a single engine file,you can ignore it. "modules" : ["cocos2d"],// "modules" defines which modules you will need in your game,it's useful only on web,// using this can greatly reduce your game@H_366_404@'s resource size,and the cocos console tool can package your game with only the modules you set. // For details about modules de@R_403_4654@ns,you can refer to "../../frameworks/cocos2d-HTML5/modulesConfig.Json". "JsList" : [ ] // "JsList" sets the List of Js files in your game. } * */六、config.Json——模拟器配置文件
代码如下：
{ "init_cfg": { "isLandscape": true,"isWindowtop": false,"name": @H_366_404@"Mynewstudy","wIDth": 960,"height": 640,"entry": @H_366_404@"main.Js","consolePort": 6050,"uploadPort": 6060,"deBUGPort": 5086,"forwardConsolePort": 10088,"forwardDeBUGPort": 10086,"forwardUploadPort": 10090 },"simulator_screen_size": [ { "Title": @H_366_404@"iPhone 3Gs (480x320)","wIDth": 480,"height": 320 },{ "Title": @H_366_404@"iPhone 4 (960x640)","height": 640 },{ "Title": @H_366_404@"iPhone 5 (1136x640)","wIDth": 1136,{ "Title": @H_366_404@"iPad (1024x768)","wIDth": 1024,"height": 768 },{ "Title": @H_366_404@"iPad Retina (2048x1536)","wIDth": 2048,"height": 1536 },{ "Title": @H_366_404@"AndroID (800x480)","wIDth": 800,"height": 480 },{ "Title": @H_366_404@"AndroID (854x480)","wIDth": 854,{ "Title": @H_366_404@"AndroID (1280x720)","wIDth": 1280,"height": 720 },{ "Title": @H_366_404@"AndroID (1920x1080)","wIDth": 1920,"height": 1080 } ] } 代码分析：
七、resource.Js——定义资源变量只有在Cocos Code IDE中运行才需要该文件，它是配置模拟器运行信息的。
在这里，简要介绍一下，第一行isLandscape主要用于设置是否横屏显示，第二行用于设置模拟器的标题，第三、四行用于设置屏幕的宽高，第五行用于设置入口文件，接下来几行用于设置端口信息。
代码如下：
var res = { HelloWorld_png : @H_366_404@"res/HelloWorld.png",MainScene_Json : @H_366_404@"res/MainScene.Json"};var g_resources = [];for (var i in res) { g_resources.push(res[i]);}
代码分析：
八、app.Js——“Hello World”场景文件这段代码比较简单，主要通过变量res来定义资源的别名，防止资源硬编码，这样更加灵活便捷。接着，就把定义好的资源都加入到g_resources变量中，在游戏启动的时候会自动加载g_resources变量中的资源（main.Js中进行相关设置）。
代码如下：
var HelloWorldLayer = cc.Layer.extend({ sprite:null,ctor:function () { ////////////////////////////// // 1. super init first this._super(); ///////////////////////////// // 2. add a menu item with "X" image,which is clicked to quit the program // you may modify it. // ask the window size var size = cc.winSize; var mainscene = ccs.load(res.MainScene_Json); this.addChild(mainscene.node); return true; }});var HelloWorldScene = cc.Scene.extend({ onEnter:function () { this._super(); var layer = new HelloWorldLayer(); this.addChild(layer); }});
代码分析：
这段代码呢，完成了我们看到的“Hello World”场景的展示。上面两段代码呢，主要声明了两个类，分别是继承自cc.Scene的HelloWorldScene和继承自cc.Layer的HelloWorldLayer。并且在HelloWorldScene中重写了父类的onEnter方法，该方法在进入场景时调用。重写父类方法时，通过this._super()调用父类的实现。然后，创建了一个HelloWorldLayer的实例，并添加到场景中。而HelloWorldLayer中主要重写了父类的ctor构造函数，并在构造函数中使用了Cocos Studio中导出的资源（ccs.load）。
小结：
关于整个项目的大概构造分析到这里就结束了，其中一些细节我们后面还会再提到，再细致分析。我们下一篇博客，将要来分析一下，游戏启动的过程到底是怎样的！
总结以上是内存溢出为你收集整理的细说Cocos2d-JS——从项目构造说起全部内容，希望文章能够帮你解决细说Cocos2d-JS——从项目构造说起所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）