1. 程式人生 > >【cocos2d-js官方文件】一、搭建 Cocos2d-JS 開發環境

【cocos2d-js官方文件】一、搭建 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分支。

好吧,讓我們來看看如何配置WebStorm7開發和除錯我們的Cocos2D-JS應用。

如何建立新工程

Cocos2d-JS 提供了一個控制檯工具,使CH5JSB應用程式的開發更加簡單和方便得多。你可以使用它來建立一個新的專案,其釋出到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

img

注意:

如果你是第一次啟動WebStorm,最近開啟工程部分應該為空。

現在,讓我嘗試用WebStorm進行Cocos2d-JS開發。

  1. 開啟已經建立好的專案 MyJSGame

    正如我們可以從上面的圖片中看到,你應該選擇Create New Project from Exisiting Files(從已存在的檔案建立新專案)

    然後,它會提示你以下選項:

    圖2

    img

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

    圖3 img

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

  4. 現在,我們應該設定該目錄為專案的Project Root(根目錄)。單擊專案根目錄按鈕,Finish(完成)按鈕將啟用。

    圖4 img

  5. 恭喜你,你已經成功配置了webstorm 開發 Cocos2d-JS 專案。

體驗 Cocos2d-JS

當你已經添加了整個的Cocos2D-JS專案目錄到WebStorm7。WebStorm將解析所有的Cocos2D-JS原始碼。如果你開啟​​MyJSGame/src/myApp.js,你可以得到的準確的語法自動補全的能力。

圖5 img

如果你有一個第三方JavaScript庫在你的Cocos2d-JS遊戲應用程式,你也可以把它新增到WebStorm庫來解析並啟用實時語法自動補全。

下面是說明:

(可選) 新增第三方庫進行解析

  1. 點選Settings(設定)按鈕啟動你工程的設定對話方塊:

    圖6 img

  2. 在點選Settings(設定)選單後,它將彈出如下的對話方塊:

    圖7:

    img

  3. 現在你可以點選 Add... 按鈕,然後會提示你指定你的javascript庫的路徑。

    圖8 img

在WebStorm中除錯Cocos2d-JS javascript

是時候學習除錯Cocos2d-JS程式碼了。

使用JB chrome 擴充套件連線WebStorm 到 Chrome

  1. 右鍵點選 ~/work/MyJSGame下的index.html檔案,並選擇 Debug 'index.html'

    圖9

    img

  2. 現在,它會自動開啟你的Chrome瀏覽器。如果你把你的滑鼠chrome上面的JB外掛, 它會告訴你,它已經連線上WebStrom7.0.3:

    圖10 img

注意:

這一步很簡單,一旦你已經安裝了外掛 - “JetBrains IDE support”。當你單擊WebStorm除錯選單,它會自動連線到瀏覽器。它是相當的方便啊!你也可以點選右側Chrome瀏覽器的側邊欄的JB圖示,它會立即把你帶到WebStorm的IDE介面。

在WebStorm中除錯javascript程式碼

返回到WebStorm介面,並雙擊 MyJSGame/src/myApp.js 在程式碼區展示。

  1. 設定斷點。用滑鼠右鍵單擊myApp.js原始碼視窗左邊的側欄。

    圖11

    img

  2. 開始除錯。 WebStorm會自動啟動你的chrome瀏覽器,並執行示例專案。然後通過點選JB圖示回到你的WebStorm。程式將停止在我們剛才設定的斷點處。且編輯器將切換到Debug檢視:

    圖12

    img

  3. 現在你可以做除錯之類的事情,單步跳出,單步進入入,單步跳過,繼續執行等。

總結

在本教程中,向你展示了基本的步驟來配置WebStorm7進行Cocos2d-HTML5的開發工作,包括配置語法感知自動補全和除錯。過程是相當簡單明瞭。如果你對這個教程有任何疑問或建議,請告訴我們。我們將非常感謝你的貢獻。

何去何從

在接下來的教程中,我們將通過內建的Cocos2d-JS測試和示例遊戲,告訴你如何設定一個新的Cocos2d-JS專案。