【cocos2d-js官方文件】一、搭建 Cocos2d-JS 開發環境
在本文中,我將展示如何在 Mac os 10.9(Maverics) 上搭建 Cocos2d-JS 開發環境。
下載必備的軟體包
-
下載並安裝WebStorm7。WebStorm7目前的穩定版本是7.0.3。為什麼我們選擇WebStorm?因為它提供了許多功能,如JavaScript程式碼的語法完成,除錯,語法高亮,版本系統整合等,你可以去WebStorm的更多資訊的官方網站。
-
從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
分支。
好吧,讓我們來看看如何配置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開發。
-
開啟已經建立好的專案 MyJSGame
正如我們可以從上面的圖片中看到,你應該選擇
Create New Project from Exisiting Files
(從已存在的檔案建立新專案)然後,它會提示你以下選項:
圖2
-
選擇
Source files are in a local directory, no Web server is yet configured
(原始檔在本地目錄,沒有配置web server) 並點選Next
(下一步)繼續 -
在這一步,你應該展開目錄樹來指定你的MyJSGame原始碼放的位置。當你指定了正確的目錄,注意Finish按鈕仍然是灰色的。
-
現在,我們應該設定該目錄為專案的
Project Root
(根目錄)。單擊專案根目錄按鈕,Finish
(完成)按鈕將啟用。 -
恭喜你,你已經成功配置了webstorm 開發 Cocos2d-JS 專案。
體驗 Cocos2d-JS
當你已經添加了整個的Cocos2D-JS專案目錄到WebStorm7。WebStorm將解析所有的Cocos2D-JS原始碼。如果你開啟MyJSGame/src/myApp.js
,你可以得到的準確的語法自動補全的能力。
如果你有一個第三方JavaScript庫在你的Cocos2d-JS遊戲應用程式,你也可以把它新增到WebStorm庫來解析並啟用實時語法自動補全。
下面是說明:
(可選) 新增第三方庫進行解析
-
點選
Settings
(設定)按鈕啟動你工程的設定對話方塊: -
在點選
Settings
(設定)選單後,它將彈出如下的對話方塊:圖7:
-
現在你可以點選
Add...
按鈕,然後會提示你指定你的javascript庫的路徑。
在WebStorm中除錯Cocos2d-JS javascript
是時候學習除錯Cocos2d-JS程式碼了。
使用JB chrome 擴充套件連線WebStorm 到 Chrome
-
右鍵點選
~/work/MyJSGame
下的index.html檔案,並選擇Debug 'index.html'
圖9
-
現在,它會自動開啟你的Chrome瀏覽器。如果你把你的滑鼠chrome上面的JB外掛, 它會告訴你,它已經連線上WebStrom7.0.3:
注意:
這一步很簡單,一旦你已經安裝了外掛 - “JetBrains IDE support”
。當你單擊WebStorm除錯選單,它會自動連線到瀏覽器。它是相當的方便啊!你也可以點選右側Chrome瀏覽器的側邊欄的JB圖示,它會立即把你帶到WebStorm的IDE介面。
在WebStorm中除錯javascript程式碼
返回到WebStorm介面,並雙擊 MyJSGame/src/myApp.js
在程式碼區展示。
-
設定斷點。用滑鼠右鍵單擊myApp.js原始碼視窗左邊的側欄。
圖11
-
開始除錯。 WebStorm會自動啟動你的chrome瀏覽器,並執行示例專案。然後通過點選JB圖示回到你的WebStorm。程式將停止在我們剛才設定的斷點處。且編輯器將切換到Debug檢視:
圖12
-
現在你可以做除錯之類的事情,單步跳出,單步進入入,單步跳過,繼續執行等。
總結
在本教程中,向你展示了基本的步驟來配置WebStorm7進行Cocos2d-HTML5的開發工作,包括配置語法感知自動補全和除錯。過程是相當簡單明瞭。如果你對這個教程有任何疑問或建議,請告訴我們。我們將非常感謝你的貢獻。
何去何從
在接下來的教程中,我們將通過內建的Cocos2d-JS測試和示例遊戲,告訴你如何設定一個新的Cocos2d-JS專案。