官网对于<em>Cocos Code IDE</em>已经不提供下载地址和维护了，<em>Cocos Code IDE</em>是基于<em>eclipse</em>做的一个封装。可能大家一致觉得不好用的缘故吧，找到了知乎包含王哲的回答
首先是Code IDE 1.x版本用Eclipse就是个坑，被谷歌带进去的。现在谷歌自己弃坑了。接着我们尝试了基于IntelliJ开发了Code IDE 2.0，出到2.0 beta版。结论是，在IntelliJ上做到最终想要的效果，要和场景编辑器、UI编辑器无缝集成，是非常困难的。特别是要「无缝集成」这件事情非常难达到。目前采用第三套方案，在Cocos Studio的框架体系内用C#开发代码编辑器，希望这第三次尝试的这条路能够走顺吧。
不过我对于新出的这个<em>Cocos Creator</em> 完全不知道怎么使用，感觉不是写代码的人用的，所以折腾这寻找到了<em>Cocos Code IDE</em> 的以前下载地址。
windows版本的直接下载双击安装即可。
<em>Cocos Code IDE</em> 就是一个eclipse 很好使用，debug，打包之类的功能都非常好使用。接下来看一下<em>helloworld</em>项目。
这个时候用sublime打开项目，因为<em>Cocos Code IDE</em>对于项目文件列的不全。
对比一下
- framworks
包含两个引擎 里面会有<em>cocos2d-html5</em>和<em>js-bingings</em>，还有个<em>runtime-src</em>，这个是项目编译完成后在各个平台生成的项目，有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中做了引入
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
- 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
<!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, 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 cocos src="main.js"></script>
</body>
</html>
其中先加载<script src="frameworks/cocos2d-html5/CCBoot.js"></script> 这个js就是去加载project.json还有其他一些的配置。然后再去加载<script cocos src="main.js"></script> ,这个类就是一些图片音频等资源的预先加载。然后启动游戏cc.game.run();。
