一、引擎包目錄結構介紹

目錄結構可以分為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(“在群里面，很經?？吹酵瑢W們問的問題實際上在Tests里面都有。所以，一定要去認認真真的看一下這個項目里面都有什么功能實例”); }

二、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瀏覽器也是一樣一樣滴。?

?

三、HelloWord 分析

先上圖：

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

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

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

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

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

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

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

2. 運行流程

瀏覽器上：

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

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

• 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平臺上就簡單啦?？聪翲elloWord/frameworks/runtime-src/Classes/AppDelegate.cpp中的applicationDidFinishLaunching()方法就知道啦。

轉載于:https://www.cnblogs.com/mcdnf/p/5158276.html

總結

以上是生活随笔為你收集整理的Cocos2d-js学习--helloword的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。