[cocos2dx-html5]手把手，快速搭建 Cocos2d-HTML5 開發調試環境

在這篇文章中，你將學會如何快速搭建 Cocos2d-HTML5 的開發和運行環境，對于腳本來說，大多編輯器提供語法高亮顯示，而沒有語義補全，雖然有些開發環境提供了自動補全功能，但都不大好用。這里推薦使用 WebStorm，作為一個 IDE（集成開發環境），它有非常強大的代碼補全，而且其補全相當智能，提高了開發效率。還能與 Google Chrome 瀏覽器配合，完成實時編輯和調試功能。當然你可以有其它選擇。下面詳細介紹它的詳細配置步驟。

環境準備

在開始之前，首先下載需要的文件，依賴等，對于 Cocos2d-HTML5 使用當前的最新穩定版本，2.1.5 。你可以在 這里 下載。WebStorm 請訪問官網，根據自己的系統環境選擇下載，這里使用的是 6.0.2 版本。 為了能夠使得 IDE 與瀏覽器協同編輯調試，需要安裝 Chrome jetbrains-ide-support 插件。有了以上三者，就可以進行配置。這里以 Mac OS X 作為系統環境。

配置 WebStorm 項目，代碼補全功能

在開始開發之前，第一步需要將 Cocos2d-html5 導入 WebStorm 項目工程。

• 首先解壓縮 Cocos2d-html5-v2.1.5.zip 壓縮包。

• 打開 WebStorm 進入歡迎界面，選擇又側 Create New Project from Existing Files 項

  

• Select scenario 選擇最后一項一項“Source files are in a local directory …”，點擊下一步

• 瀏覽文件夾到 Cocos2d-html5-v2.1.5 目錄，然后點擊 Project Root 設定跟目錄

• 點擊 “Finish” 完成項目導入。

完成以上步驟，便已經能夠在 WebStorm 里面打開所有內容，編輯 HelloHTML5World/src/myApp.js 已經能夠完成自動補全功能，這是因為當前整個項目包含了所有 js 源碼。

如果是其它位置的項目沒有包含 js 庫完成自動補全的需要手動添加庫（根據實際需要）。完成對 Cocos2d-html5 的補全，使用以下方式添加 js 庫：

• 點擊菜單 WebStorm Preferences 進入 Settings 界面
• 定位到 Project Settings 中 JavaScript 的 Libraries 選購項

• 點擊 Add 按鈕，進入 庫 添加配置界面

• 如圖所示，填寫庫名稱，然后 Attach 瀏覽添加目錄，其中根據需要包含庫目錄，OK！

以上是在其它獨立的項目，使用 Cocos2d-html5 庫時的環境配置。能夠以如此的方式在任何項目添加 Cocos2d-html5 的庫，可以在項目的 “External Libraries” 看到所有的依賴庫。

瀏覽器同步編寫實時刷新，單步調試

以上是使用 WebStorm 開發環境的步驟，但同樣需要瀏覽運行，查看效果。

右擊項目主目錄的 index.html 選擇 調試 index.html 后，將以 Chrome 打開此頁面（系統默認瀏覽器），而打開的方式，我們看到是系統文件路徑，如 ：

url = “file:///Users/leafsoar/Cocos2d-html5-v2.1.5/index.html”

需要注意的是，以此方式所打開的頁面，靜態頁面正常瀏覽，但選擇 Hello World 運行，會加載不了，這是由于 cocos2d-html5 的處理機制與瀏覽器的兼容問題造成的（在其它瀏覽器會有不同的結果），官方推薦以服務的方式運行，如http://localhost 的方式。

在這里我們在瀏覽器中輸入 http://localhost:63342/Cocos2d-html5-v2.1.5/ 來訪問當前項目，在 Chrome 我們也同樣安裝了 JetBrains 插件，以此協同工作。這樣在修改項目中靜態頁面的時候，將會自動更新至頁面，看到實時效果。http://localhost:63342 是由 WebStorm 提供了服務，后面跟項目名稱，以服務的方式訪問頁面，查看效果。

調試步驟，我們需要修改 右擊 調試 index.html 的 url 地址。點擊工具條，調試配置，index.html 右側下拉 Edit Configurations，將默認的 Path 地址由：

“/Users/leafsoar/Cocos2d-html5-v2.1.5/index.html” 修改為 “http://localhost:63342/Cocos2d-html5-v2.1.5/” 如圖：

完成以上配置后，我們在如 “HelloHTML5World/src/myApp.js” 中的代碼設置以斷點，后調試運行項目，測試 Hello World 便可以單步調試了：

我們可以修改 HelloHTML5World 來快速學習它們，其中 template 提供了一個項目模板，如果需要建立自己的項目，可以將它拷貝，然后基于它編寫自己的代碼程序。

轉載自：http://www.ityran.com/archives/4857

附加：

WebStorm注冊碼

User Name:

EMBRACE

License Key:

===== LICENSE BEGIN =====

24718-12042010

00001h7wzKLpfo3gmjJ8xoTPw5mQvY

YA8vwka9tH!vibaUKS4FIDIkUfy!!f

3C"rQCIRbShpSlDcFT1xmJi5h0yQS6

===== LICENSE END =====