Cocos2d-JS连载之Cocos Code IDE和helloworld项目分析

官网对于Cocos Code IDE已经不提供下载地址和维护了，Cocos Code IDE是基于eclipse做的一个封装。可能大家一致觉得不好用的缘故吧，找到了知乎包含王哲的回答

首先是Code IDE 1.x版本用Eclipse就是个坑，被谷歌带进去的。现在谷歌自己弃坑了。接着我们尝试了基于IntelliJ开发了Code IDE 2.0，出到2.0 beta版。结论是，在IntelliJ上做到最终想要的效果，要和场景编辑器、UI编辑器无缝集成，是非常困难的。特别是要「无缝集成」这件事情非常难达到。目前采用第三套方案，在Cocos Studio的框架体系内用C#开发代码编辑器，希望这第三次尝试的这条路能够走顺吧。

不过我对于新出的这个Cocos Creator 完全不知道怎么使用，感觉不是写代码的人用的，所以折腾这寻找到了Cocos Code IDE 的以前下载地址。

• Cocos Code IDE 1.2.0 Win32 下载地址
• Cocos Code IDE 1.2.0 Win64 下载地址
• Cocos Code IDE 1.2.0 Mac 下载地址

windows版本的直接下载双击安装即可。
Cocos Code IDE 就是一个eclipse 很好使用，debug，打包之类的功能都非常好使用。接下来看一下helloworld项目。
这个时候用sublime打开项目，因为Cocos Code IDE对于项目文件列的不全。
对比一下

sublime打开后的文件显示

Cocos Code IDE打开后的文件显示

• framworks
  包含两个引擎 里面会有cocos2d-html5和js-bingings，还有个runtime-src，这个是项目编译完成后在各个平台生成的项目，有android、ios_mac、win2。在对应的平台打开项目也是一样的。
• index.html
  web的首页入口兼容html5格式的。
• 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();

• project.json定义了一些配置的东西

{
    "project_type": "javascript",//语言的设置 js

    "debugMode" : 1, //日志级别的控制
    "showFPS" : true,
    "frameRate" : 60,//帧率
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5", //引擎设置

    "modules" : ["cocos2d"],//需要的模块

    "jsList" : [//需要的js文件导入，引擎会加载
        "src/resource.js",
        "src/app.js"
    ]
}

在index.html中做了引入

• public 就是编译后发布的东西
• res 就是存放资源的地方 图片之类的
• runtime 是编译完成所产生的包
• src 就是源代码存放的地方 其中有resource.js 就是加载res目录下面的图片资源

var res = {
    HelloWorld_png : "res/HelloWorld.png",
    CloseNormal_png : "res/CloseNormal.png",
    CloseSelected_png : "res/CloseSelected.png"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

• tools 就是一些工具东西。

接着说一下程序的运行流程

浏览器上第一步肯定是加载index.html

其中先加载 这个js就是去加载project.json还有其他一些的配置。然后再去加载 ,这个类就是一些图片音频等资源的预先加载。然后启动游戏cc.game.run();。