Cocos2d-js學習--helloword

一、引擎包目錄結構介紹

1410225791335943.png

目錄結構可以分爲3個部分來介紹:

第一部分: 引擎相關文件

  • frameworks 目錄包含了 Cocos2d-html5 引擎和 Cocos2d-x JavaScript 代碼的彙集.

  • Cocos2d-html5 目錄包含了所有 Cocos2d-html5 的引擎模塊,例如引擎核心模塊、音頻模塊、外部物理引擎庫,CocosBuilder Reader, CocoStudio Reader 和其他的模塊。所有的模塊都用JS實現並且可以在WEB環境中運行。

  • js-bindings 目錄包含了 Cocos2d-x 引擎, 綁定的和外部預置 SpiderMonkey 庫的項目文件。外部接口採用 JS 編寫,但是基礎模塊使用 Cpp 實現,可以在許多不同的本地平臺上運行,例如iOS,Android,Mac,Win32等平臺。


第二部分: 測試文件,遊戲樣本和模板

  • template 目錄是被用來創建一個新的Cocos2d-JS 工程。它包括了 HTML5 工程和默認的本地工程。cocos 控制檯使用它來創建一個新的工程。

  • samples   包含全部的測試工程和一個示例遊戲,他們都可以從 cocos 控制檯執行,也可以通過 javascript 的接口綁定機制在WEB或者本地平臺運行。

  • js-tests全部的測試工程,簡單的說,就是一本活字典。

  • js-moonwarriors 一個可以運行的遊戲樣本。麻雀雖小,五臟俱全,強烈推薦初學者自己去重構一下這個遊戲。


第三部分: 其他

  • AUTHORS  引擎相關作者介紹。官方的人將低調做到極致,所以,這個文件木有介紹。被我發現了。囧…

  • README 包含一些對 Cocos2d-JS 的介紹。

  • LICENSE 正如我們之前提到的,Cocos2d-JS 的許可證是 MIT,你可以查閱在引擎根目錄下的 the license 文件夾來獲得更多關於 Cocos2d-html5 and Cocos2d-x 的許可證細節。

  • tools 目錄包括 cocos 控制檯工具和 綁定生成工具(bingings-generator)。template 文件夾下包含一個 build.xml 文件,裏面存放着閉包編譯器的控制信息,通過 ANT 這個命令,你可以將你的遊戲打包成爲一個單個文件。

  • build 目錄包含着內置的工程樣本文件。

  • docs 目錄包含 JavaScript 編碼風格指導和 release 的信息。

  • CHANGELOG 包含所有版本的修改信息。

  • setup.py 是一個環境搭建的 python 腳本。

1
2
3
4
for(var i = 0; i < 32; i++){ 
cc.log(“強烈建議:”);
cc.log(“在羣裏面,很經常看到同學們問的問題實際上在Tests裏面都有。所以,一定要去認認真真的看一下這個項目裏面都有什麼功能實例”);
}

1410225872670818.png

二、HelloWord 操作

1. 這個時候,我們對Cocos2d-JS以及她的目錄結構是比較清晰的認識了,並且,我們也在上一個教程中學會了開發環境的搭建。那麼,接下來,我們就開始創建基於Cocos2d-JS的HelloWord。走起。。。。

2. Cocos 

3. 創建工程

首先,你需要打開你的終端工具(Windows 系統打開Dos系統),運行下列命令(自選一種)

1
2
3
4
5
6
//創建一個同時包含Cocos2d-html5和Cocos2d-x JSB的項目
cocos new -l js           
//創建一個僅包含Cocos2d-html5的項目, --no-native 表示不需要支持Native平臺(IOS,Android,Mac,Windows等),只支持瀏覽器就可以了。
cocos new -l js --no-native  
//創建一個置頂工程名字指定目標的項目
cocos new projectName -l js -d ./Projects

例如,我想在桌面創建一個叫HelloWord 的項目。那麼有兩種做法。

第一種:

1
2
cd ./Desktop
cocos new HelloWord –l js

第二種:

1
 cocos new HelloWord -l js -d ./Desktop


4. 運行項目

瀏覽器上:

1
2
cd ./Desktop/HelloWord
cocos run -p web

編譯並運行Cocos2d-x JSB項目在iOS,android,mac上(即:native平臺上)

1
2
3
cd ./Desktop/HelloWord
cocos compile -p ios|android|mac
cocos run -p ios|android|mac

例如:我要運行在IOS上,那就運行:cocos run -p ios。編譯好之後,對應的工程目錄在HelloWord/frameworks/runtime-src/


Android項目導入Eclipse: 

導入 HelloWord/frameworks/runtime-src/proj.android 到 Eclipse, 這個時候,Eclipse會報錯,完成下面一步就好了。

導入 HelloWord/frameworks/js-bindings/cocos2d-x/cocos/platform/android/java 到 Eclipse 中即可


打包項目:()

1
2
cd ./Desktop/HelloWord
cocos compile –p web| android|IOS –m release

命令運行成功之後,在HelloWord工程文件夾下多出了一個publish文件夾,這個就是發佈包。


例如我想把HelloWord跑在微信上,那三個步驟搞定:

1
2
cd ./Desktop/HelloWord
cocos compile –p web –m release

拷貝HelloWord/publish/html5到你的服務器下,然後微信瀏覽器訪問這個地址,就搞定了。PC瀏覽器也是一樣一樣滴。 

 1410226041744151.png


三、HelloWord 分析

先上圖:

1410226080874697.png

1. 上面的張圖,就是我們的HelloWord項目。藍色高亮的是我們開發中最經常接觸的文件,我們來一個一個的解釋下他們的作用:

  • frameworks 中包含了兩個引擎模塊,還有一個包含各個平臺上的工程文件夾runtime-src,你只需要進入到這個文件夾看一下就能明白他的功能了。

  • res 目錄.它包含了工程中所有被需要的資源文件。現在它僅僅包含一些圖片樣本。 但是如果你想要增加一些遊戲的元素或者一些極好的遊戲音樂,你應該將它們放在這個文件夾下並給爲每個文件取一個合適的名字。

  • src 文件夾. 它包含你真實遊戲的所有邏輯代碼。如果這裏有成千上百個 javascript 源文件,你最好將它們用子文件夾分成許多小部分。現在,我們的HelloWord工程擁有2個 javascript 源文件。 app.js 包含我們模板的第一個場景代碼。在resource.js 定義了許多資源的全局變量。

  • index.html 文件是 HTML5 基於web應用程序的入口點。它是一種 HTML5 兼容的格式。它定義了許多元數據,例如設置視角和全屏參數等。

  • project.json 文件是我們工程的配置文件。請參考網站project.json獲得更多詳情 。

  • main.js 是一個創建你的第一個遊戲場景和在瀏覽器顯示這個場景的一個文件。 在這個文件裏,你也可以定義你的分辨率策略和預加載你的資源。


2. 運行流程

瀏覽器上:

我們都知道,在瀏覽器上,首先會運行index.html文件,在這個文件中,我們可以看到下圖:

1410226119698713.png

可以看到,首先,瀏覽器會裝載 frameworks/Cocos2d-html5/CCBoot.js, 它將會嘗試從 project.json 文件中裝載工程的設置信息。然後才繼續裝載main.js。我們來看下project.json,如下圖:

1410226174702468.png

  • project_type : 工程類型

  • debugMode : debug模式

  • showFPS : 是否顯示FPS,就是左下角的那三行數據,第一個是渲染的調用次數,第二個是每幀的時間開銷,第三個是幀率

  • frameRate : 幀率

  • id : 

  • renderMode : 渲染模式。

  • engineDir : 引擎路徑

  • modules : 加載模塊,默認只加載["cocos2d"],那比如你想用chipmunk物理引擎,就需要再加載external模塊。也就是modules : ["cocos2d","external"],最後項目打包的時候,只打包有加載進來的模塊,所以,沒用到的不要加載進來哈。

  • jsList : 自定義JS源文件的一個集合,類似Java、OC中的#import或者C、C++中的#include。


Native上

在Native平臺上就簡單啦。看下HelloWord/frameworks/runtime-src/Classes/AppDelegate.cpp中的applicationDidFinishLaunching()方法就知道啦。

1410226221293899.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章