【Cocos2d-HTML5 開發之一】建立HTML5項目及簡單闡述與cocos2d/x引擎關系

廢話少扯，最近又研究了下Cocos2d-HTML5相關引擎，其實說起HTML5，3、4年前Himi就接觸過了，那時候的HTML5 Canvas  對我印象很深，但是不論當時還是現在對于HTML5絕大部分公司仍舊處于觀望狀态，我也不例外，無疑觀望期間也不斷的有引擎基于HTML5，例目前的Cocos2d-HTML5,還有以後基于Untiy3D的HTML5，這早晚的事情。總體來說，HTML5是個趨勢，隻是個時間的問題。

那麼本篇呢，簡單的叙述下Cocos2d-HTML5新建立一個項目過程以及與cocos2d/x之間的關系。

目前Himi下載下傳的是最新的2.1.5 version.

      第二步：解壓引擎包，然後目錄如下：

<a target="_blank" href="http://www.himigame.com/wp-content/uploads/2013/08/QQ20130821-2.png"></a>

         第三步：簡單以 HelloHTML5World 項目為例，我們可以直接使用浏覽器打開HelloHTML5World檔案夾中的 index.html，即可運作此示例項目。

運作到浏覽器中的效果如下:

<a target="_blank" href="http://www.himigame.com/wp-content/uploads/2013/08/QQ20130821-4.png"></a>

運作效果如上，其實這是個錯誤效果圖，先不要着急。（原因隻是資源準備失敗的原因，後續說明）

我們先不管這個問題，先看下整個的項目結構：(Himi使用的 TextMate 打開的)

<a target="_blank" href="http://www.himigame.com/wp-content/uploads/2013/08/1.jpg"></a>

簡單叙述：

1. res  資源存放目錄

2. src  js腳本存放目錄(我們自己的項目源碼目錄)

3. build.xml : 對cocos2d引擎進行編譯成js腳本形式所用檔案

4. cocos2d.js: 對cocos2d引擎進行參數設定的配置檔案

5. index.html: 對目前視圖的配置檔案

6. main.js : 主程式入口

                                                                  那麼很多讀者疑惑如何下手？  

其實很簡單，大家可以了解，cocos2d-html5 引擎隻是将cocos2d 引擎架構直接映射成應html5 api實作的過程，我們通過js語言書寫cocos2d引擎代碼的形式，完成cocos2d引擎形式代碼掌管整個HTML5項目。大家直接按照寫cocos2d/x的代碼形式進行書寫即可，但是語言要求js格式。

                                                             那麼如何建立一個新的HTML5項目:

      第一步：将cocos2d-html5 引擎目錄下的HelloHTML5World 檔案夾直接copy一份出來，然後檔案名可自定義。

第二步：将引擎目錄下的lib檔案夾下的 Cocos2d-html5-v2.1.5.min.js 檔案copy 到你第一步的項目檔案夾下即可。

Cocos2d-html5-v2.1.5.min.js 檔案的作用:将cocos2d引擎以HTML5 api形式映射的js庫，供我們項目使用，如果你不copy這個項目到你的項目中，你無法運作。

大家疑惑為什麼引擎下的 HelloHTML5World 項目下為什麼不需要 ？ 其實這個示例項目采用的是相對引擎目錄路徑下的每個引擎類映射js來使用。如下圖：

<a target="_blank" href="http://www.himigame.com/wp-content/uploads/2013/08/QQ20130821-6.png"></a>

而這個Cocos2d-html5-v2.1.5.min.js 檔案為什麼有個min? 這個其實就是以前的Cocos2d-html5-v2.1.5.jsb.js ，簡單了解就是将js代碼進行一個壓縮，将代碼中的table 空格等都去除，節省其檔案大小的一種形式。

      第三步：直接使用浏覽器運作項目下的index.html 即可。

當然這時候運作的效果如 HelloHTML5World 項目運作效果相同，此原因主要是由于資源加載收到浏覽器限制，是以導緻項目無法正常啟動。

這個問題其實是浏覽器防止被釣魚、對AJAX的一種防護，而cocos2d-html5 引擎請求圖檔的方式則采用的就是AJAX.

                   是以我們解決此問題可以有兩種方式：

1.  本地安裝web伺服器， apache 等，将項目釋出在web伺服器上即可。

2.  直接使用火狐浏覽器進行調試，火狐浏覽器是沒有限制的。

                 如下是火狐浏覽器運作的結果：

<a target="_blank" href="http://www.himigame.com/wp-content/uploads/2013/08/QQ20130821-9.png"></a>

ok，一切正常，剩餘的就交給大家了。

本文轉自 xiaominghimi 51CTO部落格，原文連結：http://blog.51cto.com/xiaominghimi/1279847，如需轉載請自行聯系原作者