Cocos2d-JS连载之Cocos Code IDE和hell

2016-09-13 本文已影响406人 holly_wang_王小飞

官网对于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 的以前下载地址。

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中做了引入

<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();。

Cocos2d-JS连载之Cocos Code IDE和hell

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

猜你喜欢

热点阅读