【cocos2d-js官方文檔】1、搭建 Cocos2d-JS 開發環境

在本文中，我將展現如何在 Mac os 10.9(Maverics) 上搭建 Cocos2d-JS 開發環境。

下載必備的軟件包

1. 下載並安裝WebStorm7。WebStorm7目前的穩定版本是7.0.3。爲何咱們選擇WebStorm？由於它提供了許多功能，如JavaScript代碼的語法完成，調試，語法高亮，版本系統集成等，你能夠去WebStorm的更多信息的官方網站。

2. 從Cocos2d-x的官方網站下載Cocos2D-JS 3.0alpha版本。點此處下載。當你下載了的Cocos2D-JS 3.0alpha版本。你應該把它解壓縮到一個合適的位置。在咱們的例子中，我把它解壓在~/work/cocos2d-js-v3.0-alpha2. ~表明你的主目錄路徑，這在咱們的例子中是 /Users/linshun。

注意：

你也能夠經過GitHub上獲得的Cocos2D-JS的前沿版本。這裏是的Cocos2D-JS GitHub的版本庫，最新的開發工做在develop分支。

1. 下載並安裝Chrome34和JetBrains-IDE-support擴展。

好吧，讓咱們來看看如何配置WebStorm7開發和調試咱們的Cocos2D-JS應用。

如何建立新工程

Cocos2d-JS 提供了一個控制檯工具，使CH5和JSB應用程序的開發更加簡單和方便得多。你可使用它來建立一個新的項目，其發佈到Android，iOS，Mac OS或web，它是很是容易使用。

安裝Console工具

第一步，在你使用該工具前須要先安裝。 請克隆 Cocos2d-JS倉庫並跟新全部子模塊。在Cocos2d-JS文件夾下打開控制檯工具(console)，而後在控制檯上運行./setup.py。在安裝期間你可能須要提供你的 NDK, Android SDK 和 ANT的路徑。 注意該工具是使用python開發的，因此你須要在你的機子上安裝python 2.7.5或之後的版本(可是不支持 python3)。

**注意： ** 請執行 source ~/.bash_profile，使環境設置當即生效。

建立新工程

// 建立一個包含 Cocos2d-x JSB 和 Cocos2d-html5 工程:
cocos new -l js

// 建立一個僅包含 Cocos2d-html5 的工程:
cocos new -l js --no-native

// 在指定的目錄建立一個指定名字的工程:
cocos new projectName -l js -d ./Projects

在這個教程中，咱們使用 cocos new -l js 在當前目錄建立一個MyJSGame工程。

運行該工程

• 使用Websever 運行 Cocos2d-JS 工程

  cd ~/work/MyJSGame
  cocos run -p web

• 使用Cocos2d-x JSB 編譯並運行項目

  cd ~/work/MyJSGame
  cocos compile -p ios|android|mac
  cocos run -p ios|android|mac

• 有用的參數

  -p platform : 平臺能夠是 ios|mac|android|web.
  -s source : 你的工程目錄, 若是不指定當前目錄會被使用.
  -q : 靜默模式, 移除日誌消息.
  -m mode : debug 或 release 模式, 默認是debug
  --source-map: 普通的 source-map 文件. (僅針對Web 平臺)

配置WebStorm 進行Cocos2d-JS開發

首先，你應該啓動WebStorm7。若是這是你第一次啓動WebStorm，它會要求你選擇你的我的偏好，好比選擇鍵盤映射。

這是個人WebStorm啓動截圖：

圖1

注意:

若是你是第一次啓動WebStorm，最近打開工程部分應該爲空。

如今，讓我嘗試用WebStorm進行Cocos2d-JS開發。

1. 打開已經建立好的項目 MyJSGame

   正如咱們能夠從上面的圖片中看到，你應該選擇Create New Project from Exisiting Files(從已存在的文件建立新項目)

   而後，它會提示你如下選項：

   圖2

2. 選擇Source files are in a local directory, no Web server is yet configured(源文件在本地目錄，沒有配置web server) 並點擊Next(下一步)繼續

   圖3 

3. 在這一步，你應該展開目錄樹來指定你的MyJSGame源代碼放的位置。當你指定了正確的目錄，注意Finish按鈕仍然是灰色的。

4. 如今，咱們應該設置該目錄爲項目的Project Root(根目錄)。單擊項目根目錄按鈕，Finish(完成)按鈕將激活。

   圖4 

5. 恭喜你，你已經成功配置了webstorm 開發 Cocos2d-JS 項目。

體驗 Cocos2d-JS

當你已經添加了整個的Cocos2D-JS項目目錄到WebStorm7。WebStorm將解析全部的Cocos2D-JS源代碼。若是你打開​​MyJSGame/src/myApp.js，你能夠獲得的準確的語法自動補全的能力。

圖5 

若是你有一個第三方JavaScript庫在你的Cocos2d-JS遊戲應用程序，你也能夠把它添加到WebStorm庫來解析並啓用實時語法自動補全。

下面是說明：

(可選) 添加第三方庫進行解析

1. 點擊Settings(設置)按鈕啓動你工程的設置對話框:

   圖6 

2. 在點擊Settings(設置)菜單後，它將彈出以下的對話框:

   圖7：

3. 如今你能夠點擊 Add... 按鈕，而後會提示你指定你的javascript庫的路徑。

   圖8 

在WebStorm中調試Cocos2d-JS javascript

是時候學習調試Cocos2d-JS代碼了。

使用JB chrome 擴展鏈接WebStorm 到 Chrome

1. 右鍵點擊 ~/work/MyJSGame下的index.html文件，並選擇 Debug 'index.html'

   圖9

2. 如今，它會自動打開你的Chrome瀏覽器。若是你把你的鼠標chrome上面的JB插件， 它會告訴你，它已經鏈接上WebStrom7.0.3：

   圖10 

注意：

這一步很簡單，一旦你已經安裝了插件 - 「JetBrains IDE support」。當你單擊WebStorm調試菜單，它會自動鏈接到瀏覽器。它是至關的方便啊！你也能夠點擊右側Chrome瀏覽器的側邊欄的JB圖標，它會當即把你帶到WebStorm的IDE界面。

在WebStorm中調試javascript代碼

返回到WebStorm界面，並雙擊 MyJSGame/src/myApp.js 在代碼區展現。

1. 設置斷點。用鼠標右鍵單擊myApp.js源代碼視窗左邊的側欄。

   圖11

2. 開始調試。 WebStorm會自動啓動你的chrome瀏覽器，並運行示例項目。而後經過點擊JB圖標回到你的WebStorm。程序將中止在咱們剛纔設置的斷點處。且編輯器將切換到Debug視圖：

   圖12

3. 如今你能夠作調試之類的事情，單步跳出，單步進入入，單步跳過，繼續執行等。

總結

在本教程中，向你展現了基本的步驟來配置WebStorm7進行Cocos2d-HTML5的開發工做，包括配置語法感知自動補全和調試。過程是至關簡單明瞭。若是你對這個教程有任何疑問或建議，請告訴咱們。咱們將很是感謝你的貢獻。

何去何從

在接下來的教程中，咱們將經過內置的Cocos2d-JS測試和示例遊戲，告訴你如何設置一個新的Cocos2d-JS項目。

 

轉載自：cocos2dx開發網由百牛信息技術bainiu.ltd整理髮佈於博客園