Cocos2d-JS项目结构介绍

参考：Cocos2d-JS项目结构介绍

使用命令创建好工程后，使用WebStorm打开，结构如下：



一.下面讲解各个文件、目录的作用：

frameworks

：包含Web引擎以及Native引擎

1.

cocos2d-html5

: Web引擎

2.

runtime-src

: 项目的各平台工程文件，包含

iOS/MacOSX/Android/Windows

publish

: 该目录初始状态下不存在，当工程以发布模式打包后，会创建该文件夹并保存对应平台的发布包

res

: 项目资源文件夹，应该用来存储所有图片，音频，字体，动画等资源

src

: 项目脚本文件夹，应该用来存储游戏的所有JavaScript代码

index.html

: Web工程的主页面，通过本地服务器访问这个页面即可看到游戏效果

main.js

: 游戏入口文件，其中包含游戏初始化代码以及启动代码

project.json

: 工程配置文件，详细配置方法可参考main.js中的注释

二.游戏入口脚本和资源预加载

main.js

中包含

cc.game

的入口函数

onStart

逻辑，并调用

cc.game.run()

来启动游戏进程。

main.js

代码如下：

cc.game.onStart = function(){
if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
document.body.removeChild(document.getElementById("cocosLoading"));

// Pass true to enable retina display, disabled by default to improve performance
cc.view.enableRetina(false);
// Adjust viewport meta
cc.view.adjustViewPort(true);
// Setup the resolution policy and design resolution size
cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
// The game will be resized when browser size change
cc.view.resizeWithBrowserSize(true);
//load resources
cc.LoaderScene.preload(g_resources, function () {
cc.director.runScene(new HelloWorldScene());
}, this);
};
cc.game.run();

在入口函数中建议开发者利用

cc.LoaderScene.preload

函数对资源进行预加载，并在回调函数中进入游戏首个场景。

开始场景前对于场景依赖的资源预加载在Web引擎中是非常必要的步骤，它可以让你的资源在需要的时候处于可用的状态。

由于Web引擎中资源加载是异步的，举个例子，当开发者用一个贴图文件来创建一个Sprite的时候，若贴图未被预加载，Sprite的初始大小将为(0, 0)，这和很多开发者的预期效果是完全不同的；若成功预加载，则初始大小将等于贴图大小。这只是一个小问题，部分资源若在使用时未加载将会导致程序无法正常运行或中断。

开发者也不用担心JSB中的兼容问题，尽管JSB原生应用中，资源是位于本地的，并不需要预加载，不过

cc.LoaderScene

仍然可以正常运行。

三.存储游戏资源和脚本

在这个目录结构中，开发者最应该关心的是

res

文件夹和

src

文件夹，其中

res

文件夹用来存储资源，

src

文件夹用来存储游戏脚本。

当然，开发者可以新建其他文件夹来以自己喜好的方式保存任意文件，但是这样会破坏Cocos Console对工程编译和运行的控制。开发者可能不得不手动修改各个平台的工程并完成编译，这是因为Cocos Console编译时是按照默认文件夹配置来拷贝脚本和资源到目标中。

四.Web工程页面

index.html是Web工程的主页面，其主要内容和职责包含：

包含用于显示游戏场景的canvas元素

引入用于引擎初始化和加载的引擎脚本：

CCBoot.js

引入游戏启动的入口脚本：

main.js

包含一些适配移动端浏览器页面的

meta

元素

五.项目工程配置文件

project.json

的说明

刚创建工程时，文件内容如下：

{
"project_type": "javascript",

"debugMode" : 1,
"showFPS" : true,
"frameRate" : 60,
"id" : "gameCanvas",
"renderMode" : 0,
"engineDir":"frameworks/cocos2d-html5",

"modules" : ["cocos2d"],

"jsList" : [
"src/resource.js",
"src/app.js"
]

project.json

文件是Cocos2d-JS的主要项目配置文件，它包含以下配置选项：

debugMode

: 调试信息显示模式，可能的选值及其意义见官网

showFPS

: 若取值为真则会在游戏窗口左下角显示绘制函数调用次数，渲染时间和帧率，默认取值为真

frameRate

: 用来设置期望帧率，当然，实际帧率会取决于游戏每帧计算消耗时间和运行平台等条件，期望帧率会保证游戏运行帧率不会超过期望帧率，并尽力运行在期望帧率上

id

: Web引擎页面中canvas元素的id，仅服务于Web引擎

renderMode

: Web引擎绘制模式，仅服务于Web引擎，可能的取值见官网

engineDir

: 在debug模式下，如果使用完整引擎来开发你的游戏，你需要将Web引擎的相对地址设置在这个字段下，但是如果你使用单文件引擎，可以忽略这个字段

modules

: 模块配置，将你的游戏需要引入的模块添加到一个数组中，仅服务于Web引擎

jsList

: 用户JS脚本列表，游戏中依赖的JS脚本都应该列入这个列表中

六 .Web版本模块化的原理和使用方法

Web引擎支持模块化，引擎被划分为多个子模块，模块之间相互依赖并提供给游戏对应的功能。

每个模块具体所依赖的文件可以参考

frameworks/cocos2d-html5/modulesConfig.json

。

在project.json中配置modules字段可以为开发者的游戏选择依赖模块，好的模块配置可以帮助开发者显著降低游戏脚本的大小和游戏页面加载速度。当Cocos Console在调试模式下测试游戏的时候，仅会引入所需要的模块的脚本。在发布模式下编译生成的时候，将仅打包模块定义中定义包含的模块

具体的Web引擎的模块列表请看官网。