Cocos2d-JS連載之Cocos Code IDE和helloworld項目分析

官網對于<em>Cocos Code IDE</em>已經不提供下載地址和維護了创千,<em>Cocos Code IDE</em>是基于<em>eclipse</em>做的一個封裝淀散。可能大家一致覺得不好用的緣故吧瘩欺,找到了知乎包含王哲的回答

首先是Code IDE 1.x版本用Eclipse就是個坑蜘腌,被谷歌帶進去的∧牛現在谷歌自己棄坑了。接著我們嘗試了基于IntelliJ開發(fā)了Code IDE 2.0撮珠,出到2.0 beta版沮脖。結論是,在IntelliJ上做到最終想要的效果芯急,要和場景編輯器勺届、UI編輯器無縫集成,是非常困難的娶耍。特別是要「無縫集成」這件事情非常難達到免姿。目前采用第三套方案,在Cocos Studio的框架體系內用C#開發(fā)代碼編輯器榕酒,希望這第三次嘗試的這條路能夠走順吧胚膊。

不過我對于新出的這個<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>對于項目文件列的不全还栓。
對比一下


sublime打開后的文件顯示
Cocos Code IDE打開后的文件顯示
  • 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 就是編譯后發(fā)布的東西
  • 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();埠帕。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末垢揩,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子敛瓷,更是在濱河造成了極大的恐慌叁巨,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,252評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呐籽,死亡現場離奇詭異锋勺,居然都是意外死亡,警方通過查閱死者的電腦和手機狡蝶,發(fā)現死者居然都...
    沈念sama閱讀 94,886評論 3 399
  • 文/潘曉璐 我一進店門庶橱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人贪惹,你說我怎么就攤上這事苏章。” “怎么了?”我有些...
    開封第一講書人閱讀 168,814評論 0 361
  • 文/不壞的土叔 我叫張陵枫绅,是天一觀的道長泉孩。 經常有香客問我,道長撑瞧,這世上最難降的妖魔是什么棵譬? 我笑而不...
    開封第一講書人閱讀 59,869評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮预伺,結果婚禮上,老公的妹妹穿的比我還像新娘曼尊。我一直安慰自己酬诀,他們只是感情好,可當我...
    茶點故事閱讀 68,888評論 6 398
  • 文/花漫 我一把揭開白布骆撇。 她就那樣靜靜地躺著瞒御,像睡著了一般。 火紅的嫁衣襯著肌膚如雪神郊。 梳的紋絲不亂的頭發(fā)上肴裙,一...
    開封第一講書人閱讀 52,475評論 1 312
  • 那天,我揣著相機與錄音涌乳,去河邊找鬼蜻懦。 笑死,一個胖子當著我的面吹牛夕晓,可吹牛的內容都是我干的宛乃。 我是一名探鬼主播,決...
    沈念sama閱讀 41,010評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼蒸辆,長吁一口氣:“原來是場噩夢啊……” “哼征炼!你這毒婦竟也來了?” 一聲冷哼從身側響起躬贡,我...
    開封第一講書人閱讀 39,924評論 0 277
  • 序言:老撾萬榮一對情侶失蹤谆奥,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后拂玻,有當地人在樹林里發(fā)現了一具尸體酸些,經...
    沈念sama閱讀 46,469評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,552評論 3 342
  • 正文 我和宋清朗相戀三年纺讲,在試婚紗的時候發(fā)現自己被綠了擂仍。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,680評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡熬甚,死狀恐怖逢渔,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情乡括,我是刑警寧澤肃廓,帶...
    沈念sama閱讀 36,362評論 5 351
  • 正文 年R本政府宣布智厌,位于F島的核電站,受9級特大地震影響盲赊,放射性物質發(fā)生泄漏铣鹏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,037評論 3 335
  • 文/蒙蒙 一哀蘑、第九天 我趴在偏房一處隱蔽的房頂上張望诚卸。 院中可真熱鬧,春花似錦绘迁、人聲如沸合溺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽棠赛。三九已至,卻和暖如春膛腐,著一層夾襖步出監(jiān)牢的瞬間睛约,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1 274
  • 我被黑心中介騙來泰國打工哲身, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留辩涝,地道東北人。 一個月前我還...
    沈念sama閱讀 49,099評論 3 378
  • 正文 我出身青樓律罢,卻偏偏與公主長得像膀值,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子误辑,可洞房花燭夜當晚...
    茶點故事閱讀 45,691評論 2 361

推薦閱讀更多精彩內容