cocosjsb項目結構（cocos架構）

本文目錄一覽：

• 1、怎樣創建一個好的cocos目錄結構
• 2、cocos引擎有什麼特點？
• 3、如何使用 Cocos Studio 場景編輯器製作《魔卡幻想》主界面

怎樣創建一個好的cocos目錄結構

1.2目錄結構

從github下載Cocos2d-x repo資源包後，或解壓穩定版ZIP壓縮包後，就會看到如下的目錄結構：

目錄名稱

說明

CocosDenshion

音頻支持。注意：Android平台中背景音樂和短音效所使用的系統API不同。

cocos2dx

Cocos2d-x框架的主目錄。

document

你可以下載doxygen文檔系統，利用該系統打開本文檔文件夾內的doxygen.config文件，然後再生成離線API文檔。

extensions

如果需要更多圖形用戶界面的控制功能、網路訪問、CocosBuilder支持甚至2.5D功能，你可以使用using namespace cocos2d::extension。

external

包括box2d及Chipmunk庫。

licenses

cocos2d依賴很多其他開源項目。所有授權許可文件都在這個目錄。

samples

重要！這是你該開始用到的文件。從Cpp/HelloCpp開始學習，你會在TestCpp中發現所有類的用法。lua和js樣本也在這個目錄。

scripting

我知道你不喜歡C++，寫起來太複雜。沒問題，我們有Lua和Javascript。Scripting文件夾包括來自火狐的lua官方引擎和SpiderMonkey引擎。

template

該目錄包括在不同集成開發環境及不同平台中創建Cocos2d-x新項目的模板。這裡彙集了數量龐大覆蓋各種開發環境和平台的模板！

tools

包括將C++綁定至lua及javascript的腳本文件。

CHANGELOG

作者修訂記錄文檔。

cocos2d-win32.vc2010.sln

配套Visual Studio 2010打開。注意：VS 2008自Cocos2d-x v2.0版本以來就不再支持。

cocos2d-win32.vc2012.sln

配套Visual Studio 2012打開。

create-android-project.bat

在Windows平台運行。具體用法請參考如何用腳本創建Android項目。

create-android-project.sh

在Linux或OS X平台運行。具體用法請參考如何用腳本創建Android項目。

install-templates-msvc.bat

執行該文件安裝後，你可以在Visual Studio中創建空的Cocos2d-x項目。

install-templates-xcode.sh

執行該文件安裝後，你可以在Xcode中創建空的Cocos2d-x項目。

2. Cocos2d-html5

2.1 架構

2.2 目錄結構

目錄

說明

CocosDenshion

音頻支持。注意：你至少需要兩種音頻格式以支持所有瀏覽器。

cocos2d

主目錄，包括所有主目錄文件及與Cocos2d-x及Cocos2d-iPhone一樣的API。平台兼容性佳！

box2d

V2.1a版本的Box2dweb Physics引擎。

chipmunk

無版本號的Chipmunk Physic引擎

Demo

包括幾個demo程序，你可以從這些demo程序入手。

extensions

如果需要更多圖形用戶界面的控制功能、EditBox、CocosBuilder支持、Cocos Studio支持或任何第三方庫，都在這裡。

HelloHTML5Wrold

預備的一個Hello World程序，你可以從這入手。

lib

包括一個MIN版本的引擎，當你使用ant工具運行/cocos2d/build.xml文件時，會將所有引擎文件打包成一個文件。

licenses

cocos2d依賴很多其他開源項目。所有授權許可文件都在這個目錄。

samples

你可在Test文件中發現所有類的用法。該目錄還包括樣本遊戲。所有測試樣本和遊戲樣本均可以在JSB中運行。重要！這是你該開始用到的文件。

template

用於創建Cocos2d-html5新項目的模板。

tools

包括JSDoc及Closure Compiler編譯器。

index.html

Cocos2d-html5索引文件。

AUTHORS

作者列表

CHANGELOG

該文件記錄上述各位作者的修訂記錄。

3. Javascript綁定

跨平台雖然很好，但還不夠好。用C++語言編程不僅超級慢，C++代碼還無法在網路瀏覽器中運行。這就是為什麼我們選擇增加JavaScript綁定功能。通過JSB我們可以將javascript代碼打包至：

Cocos2d-x+SpiderMonkey上的本地應用，SpiderMonkey能將javascript代碼解析成C語言。

Cocos2d-html5上的網頁應用。

我們在Cocos2d-iphone、Cocos2d-x 和Cocos2d-HTML5框架中使用的API組合是一樣的。所以，我們可以百分之百在本地Cocos2d-x或Cocos2d-iphone中創建javascript遊戲。當你要在瀏覽器上運行時，你只需要將引擎切換至Cocos2d-html5，而無需修改源代碼。

優勢：

編碼速度要比C++快得多

無需處理野指針、引用計數及內存泄露的問題

跨越本地及網路平台

在線更新

cocos引擎有什麼特點？

cocos引擎主要是國人開發的一套引擎體系，其特點是簡單容易，上手快，支持到位。主要偏向2D產品的開發。

Cocos提供了全套的引擎和開發工具，涵蓋從前期設計、資源製作、開發調試、打包上線全套的解決方案。cocos重點優化了工作流，規範了整個遊戲開發流程，降低溝通成本，提高開發效率。

引擎功能

新建遊戲項目：一鍵立項，自動生成製作遊戲所需的基本目錄結構、資源、代碼、支持庫。

編輯遊戲界面：依託近20種基礎控制項和眾多自定義控制項，可以方便快捷的拼接各種各樣華麗的遊戲界面。

編輯遊戲動畫：支持骨骼動畫和幀動畫，可以根據用戶喜好快速實現遊戲中各種逼真動畫。

編輯遊戲場景：不必再為各式各樣的解析度所困擾，使用布局特性設計遊戲場景，全面適配各種解析度。

如何使用 Cocos Studio 場景編輯器製作《魔卡幻想》主界面

使用 CocoStudio 場景編輯器製作《魔卡幻想》主界面

1 CocoStudio 場景編輯器

使用 CocoStudio 場景編輯器來創建遊戲場景，其中包含遊戲 UI 與動畫，來定製一個遊戲主界面。

2 使用 CocoStudio 完成《魔卡幻想》場景編輯

對於環境的搭建使用，請參考之前的文章，或者實時關注 官方 最新版本的安裝使用方法。

2.1 UI 編輯器製作遊戲主界面

創建項目(項目名稱：MysticalCard)，並導入項目 UI 資源，添加 一圖片框設定背景圖片。注意在工具攔設置 「畫布」 的大小（如果需要），這將決定著你的設計解析度，在運行時還需要注意屏幕的適配問題，如放大縮小，位置偏移等，視具體情況而定。

為界面添加 UI 元素，圖片框等，請根據自己的需要定製

實踐過程中的注意事項

添加控制項時注意必要的屬性設置

控制項的命名規範，這有助於我們今後在後台編寫代碼獲取界面元素

可交互的控制項的 「可交互屬性」 開啟

2.2 建立關鍵幀動畫

除了主界面一些必要的 UI 控制項，我們還需要一個 「對話框指示」 的動畫效果。這是一個幀動畫。

準備工作。

打開 CocoStudio ,啟動 動畫編輯器

創建一個新的項目，後導入資源（在 「資源窗口」 中，點擊 「文件」 或者 「文件夾」 標示，添加需要的素材資源）

在 「資源窗口中」 點擊關鍵幀動畫的守幀圖片，拖動至 「渲染窗口」

將第一關鍵幀拖動至 「渲染窗口」 中心。 可以使用工具欄，快速定位至窗口中心，使圖片顯示在正中間，可以讓動畫更好的定位。

添加其它幀圖片，注意，我們需要選中剩餘圖片，然後 「拖動」 到 「對象結構」 視圖中的 「第一關鍵幀」 所在的對象，如下圖所示。

關鍵幀 與 骨骼動畫操作區別：在使用骨骼動畫的時候，我們將骨骼中的各部分元素，直接拖動添加到 「渲染窗口」，以擺放各骨骼的位置關係，而在 「對象結構」 視圖中則表現為，一個列表，標示著每一塊骨骼對象，不同幀所改變的是各個骨骼對象的位置，以達到骨骼動畫效果。

而在關鍵幀動畫中，它的對象結構只有一個，而在每一幀修改的不是其位置，而是其顯示內容。這是兩者之間的區別，那操作方式也有所不同。而對於它們所導出的 資源 則是相同，用法也是同樣。

剩餘幀添加之後，我們看見在 「關鍵幀」 視圖中，已經有了多幀動畫，可以播放動畫，查看效果，並可以通過修改 「速率」 來控制動畫的播放速度。

導齣動畫資源，導出的資源文件可以被我們在 Cocos2d-x 中以代碼的方式直接載入，然後播放其動畫，也可以作為 場景編輯器中的一個元素，被添加在場景編輯器里，後面的內容就是使用 場景編輯器來載入一個動畫的方式。

2.3 場景編輯器的 資源「整合」

使用 CocoStudio 可以很好的幫助遊戲開發過程中 分工合作。動畫編輯器 和 UI 編輯器可以由多個人進行編輯，最後再由一個人統合資源，這也就是場景編輯器的優點了，它除了能支持 CocoStudio 本身所自帶的動畫編輯器，UI 編輯器，它還能支持，Tmx 地圖資源，粒子編輯器的粒子效果資源，聲音資源等～並且不斷擴展中。以下將給出如何在 場景編輯器整合我們之前所創建的動畫與 UI 界面的資源，來實現我們一個場景的運行效果。它的步驟如下：

1.啟動場景編輯器，新建一個場景項目。並設置 「畫布」 大小。畫布大小要適量。

2.我們拖動一個 UI 控到畫布之上，它作為我們之前導出的 UI 資源的承載。