Cocos2d-HTML5 環境配置與項目創建

啊！萬年沒更新的博客終於又開始更新了。

以前配置並寫過Cocos2d-x的程序，但並無寫過Cocos2d-HTML5的程序。因此能夠說，我也是今天才剛開始學Cocos2d-HTML5的。在我嘗試了配置Cocos2d-HTML5開發環境後，我發現這相對Cocos2d-x的配置簡直是太容易了。因此各位不用怕，這個配置其實很是簡單。

1.Cocos2d-HTML5開發環境配置

首先，我用的開發包是從http://www.cocos2d-x.org/下載的Cocos2d-html5-v2.2.1。到官網下載完zip包後，將其解壓，這就是你的Cocos2d-HTML5開發環境了。（其中，windows用戶會看到「__MACOSX」這個文件夾，但其實對windows用戶來講沒什麼用，能夠刪除。）

至此，你已經完成了Cocos2d-HTML5的開發環境的配置了！！（是否是很簡單……）

2.運行例程

打開剛纔解壓的開發環境的文件夾，找到HelloHTML5World文件夾，點擊其中的index.html就能夠運行HelloWorld的例子了。

但不少瀏覽器出於安全問題，不能加載本地文件（網上說什麼Ajax機制，其實我不瞭解這方面），因此咱們極可能會看不到HelloWorld例程的效果。例如我用chrome直接打開就不行（不過我用IE是能夠直接運行的，網上說FireFox也能夠直接運行），屏幕一直是黑的。爲了解決這個問題，網上提供兩類解決方案，一類是在本機創建網站服務器，再以鏈接服務器的形式訪問咱們的頁面；另一類是爲瀏覽器設置參數，讓瀏覽器能夠加載本地文件。出於偷懶和方便，我更傾向於後一種（不過或許前一種「更好」，由於這樣的話，別的機器可以經過網絡來訪問你寫的Cocos2d-HTML5頁面了）。

這裏以Chrome爲例子。右擊Chrome的快捷方式，設置其屬性，在目標一欄的參數後面加上「 --allow-file-access-from-files」（這裏的兩個引號不用加，而且注意，在開頭有一個空格）。例如個人就是（"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files）。這樣，咱們經過這個快捷方式打開的chrome就設置了容許本地文件訪問的參數了。注意個人用詞，我是說經過這個快捷方式打開的chrome。（我我的理解）咱們的快捷方式其實相似一個命令行（腳本），咱們雙擊的時候，他就運行屬性中的目標的程序，而咱們剛纔的設置，其實至關於在命令行中指定了chrome的一個能夠訪問本地文件的設置參數。因此，咱們須要雙擊這個快捷方式，再在地址欄中輸入咱們Cocos2d-HTML5的HelloHTML5World中的index.html的絕對路徑來打開index.html，而不是直接雙擊index.html來打開它（由於它沒有設置容許本地文件訪問的參數）。例如，個人開發包安裝在E:\SoftwareFile\Cocos2d-html5-v2.2.1\。那麼，我打開設置了參數的chrome的快捷方式，再輸入E:/SoftwareFile/Cocos2d-html5-v2.2.1/HelloHTML5World/index.html便可運行開發包中的例程了，這也驗證了咱們的配置成功了。

3.項目創建

網上說的作法基本是直接複製開發包中的HelloHTML5World工程文件夾，而且要求存放到Cocos2d-html5開發包之下。這是一種可行方法。

不過，因爲本人有些許強迫症，不但願項目文件跟開發包混在一塊兒，因此想要使全部新創建的項目均可以隨便防止到某一個位置。若是你也有這種需求，能夠按以下操做來實現：

複製HelloHTML5World工程文件夾到你想要放置的地方，如我放置到了D:\CocosHTML5Project，而且我還將工程名字改爲了HelloWorld。

按照步驟二，在chrome地址欄輸入D:\CocosHTML5Project\HelloWorld\index.html。發現是不能運行的。咱們按F12（chrome中的調試窗口，未來寫程序的調試能夠用的它）看看發生什麼事。console中顯示說加載不了部分文件。這部分文件就是咱們開發包的文件了。咱們打開剛複製的工程中的cocos2d.js文件（用文本編輯工具打開，如記事本），找到「engineDir」變量，它這裏用了相對路徑，咱們須要作的只是把它改爲咱們開發包的絕對路徑便可，例如，個人改成了engineDir:'E:/SoftwareFile/Cocos2d-html5-v2.2.1/cocos2d/'。那麼，即便咱們新複製的工程放置到哪裏，它均可以找到開發包中的依賴文件了。咱們再按不走而，其實已經能夠成功運行index.html了。不過咱們再來看看工程中的文件，build.xml中也有一個地方指定了開發包的路徑，由basedir變量指定，我設置成了basedir="E:/SoftwareFile/Cocos2d-html5-v2.2.1/HelloHTML5World"來指定絕對路徑。

這樣，這個複製出來並修改後的工程文件，即可以做爲一個模板工程。

4.其餘

這裏，我簡單的看了一下HelloHTML5World的代碼，其實比較主要的是main.js跟myApp.js。它們對應爲Cocos2d-x版本中HelloWorld例程的AppDelegate文件跟HelloWorld文件。main.js指定一些程序的上下文，並在最後一句關鍵地指明加載HelloWorldScene，而HelloWorldScene的定義在myApp.js中。

由HelloWorld例程看來，HTML5版本的js代碼跟C++版本的代碼仍是很是相似的，沒我曾經想象的那麼恐怖。最後，但願你們多交流，並指正個人錯誤，畢竟我也是初學啊。