搭建Cocos2d-JS開發環境

搭建Cocos2d-JS開發環境
使用Cocos2d-JS引擎開發遊戲，主要的程式碼是JavaScript語言，因此，凡是能夠開發JavaScript語言工具都適用於Cocos2d-JS遊戲開發。本書我們推薦WebStorm和Cocos Code IDE工具。


搭建WebStorm開發環境
我們在以往使用了WebStorm開發工具，它是非常優秀的JavaScript開發工具，WebStorm工具可以開發和調試基於Cocos2d-JS引擎的JavaScript程式碼，但是測試和調試時候只能運行在Web瀏覽器上。
WebStorm安裝過程我們已經介紹了，但是要想開發基於Cocos2d-JS引擎的JavaScript程式，我們還需要安裝Google Chrome瀏覽器和JetBrains IDE Support外掛程式，Google Chrome瀏覽器安裝我們不再介紹，我們重點介紹JetBrains IDE Support外掛程式，
JetBrains IDE Support是安裝在Google Chrome瀏覽器上的外掛程式，它是為了配合WebStorm工具調試使用的。JetBrains IDE Support外掛程式安裝過程是在Google Chrome瀏覽器的網址中輸入https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomchmhgeddb內容，安裝頁面如所示，在該頁面中可以點擊“已添加至CHROME”按鈕，安裝外掛程式。

安裝JetBrains IDE Support外掛程式

安裝成功後會在瀏覽器的地址欄後面出現“JB”表徵圖，具體使用如何我們下面章節再介紹。


搭建Cocos Code IDE開發環境
Cocos Code IDE是Cocos2d-x團隊開發的，用於開發Cocos2d-JS和Cocos2d-x Lua綁定的遊戲工具，它是基於Eclipse[ Eclipse 是一個開放原始碼的、基於Java的可擴充開發平台。就其本身而言，它只是一個架構和一組服務，用於通過外掛程式組件構建開發環境。幸運的是，Eclipse 附帶了一個標準的外掛程式集，包括Java開發工具（Java Development Kit，JDK）。——引自於百度百科 http://baike.baidu.com/subview/23576/9374802.htm]平台的開發工具，Eclipse基於Java的要想運行Cocos Code IDE工具，我們需要安裝JDK或JRE，JDK是Java開發套件，JRE是Java運行環境。
1、JDK下載和安裝
我們介紹一下JDK下載和安裝，如所示是JDK 7 下載介面，它的是http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html,其中有很多版本，注意選擇對應的作業系統，以及32位還是64位安裝的檔案。

下載JDK

下載完成預設安裝完成之後，JDK安裝完成後需要設定系統內容變數，主要是設定JAVA_HOME環境變數。開啟環境變數設定對話方塊，3-6所示，我們可以在使用者變數（上半部分，隻影響目前使用者）或系統變數（下半部分，影響所有使用者）添加環境變數，一般情況下我們在使用者變數中設定環境變數。

環境變數設定對話方塊我們使用者變數部分點擊“建立”按鈕，然後彈出對話方塊，3-7所示，變數名：JAVA_HOME，變數值：C:Program FilesJavajdk1.7.0_21，注意變數值的路徑。

設定JAVA_HOME

為了防止安裝了多個JDK版本對於環境的影響，我們還可以在環境變數PATH追加C:Program FilesJavajdk1.7.0_21in路徑，如所示，在使用者變數中找到PATH。雙擊開啟PATH修改對話方塊，如所示，追加C:Program FilesJavajdk1.7.0_21in，注意PATH之間用分號分隔。

環境變數PATH設定對話方塊
PATH修改對話方塊

2、Cocos Code IDE下載和安裝
Cocos Code IDE是http://www.cocos2d-x.org/download，在瀏覽器中頁面。選擇合適的檔案下載，目前包括了Mac OS X版本和Windows版本，注意Windows分為32位和64位之分，還有安裝（Setup）版本和壓縮（zip）版本之分。

下載Cocos Code IDE我們下載的是cocos-code-ide-win64-1.0.0-rc1.zip解壓版本，解壓之後找到Cocos Code IDE.exe檔案運行可以啟動Cocos Code IDE工具，在啟動過程中需要選擇Workspace目錄，如所示，Workspace目錄是工程的管理目錄，選擇好之後點擊OK按鈕，如果該目錄不存在則建立。



選擇WorkspaceCocos Code IDE具體使用如何我們下面章節再介紹。


下載和使用Cocos2d-JS官方案例
首先到Cocos2d-JS官方網站下載Cocos2d-JS開發包，到本書成書之日為止Cocos2d-JS 3.0最終版已經發布了。Cocos2d-JS 3.0下載解壓後的目錄結構，如所示。

Cocos2d-JS開發包內容

如果我們想要運行官方的案例可以進入到build目錄，build目錄中的內容，如所示，這裡包含了各個平台編譯和運行案例的工程等檔案，其中cocos2d_jsb_samples.xcodeproj檔案是Cocos2d-JS案例的Xcode工程檔案，cocos2d_jsb_samples.vc2012.sln檔案是Cocos2d-JS案例Win32平台下Visual Studio 2012解決方案檔案，android-build.py是在Android平台下編譯和運行案例時候使用的。

Cocos2d-JS開發包build目錄內容我們如果在Window下學習和開發，一般運行cocos2d_jsb_samples.vc2012.sln解決方案就可以了。如果我們啟動cocos2d_jsb_samples.vc2012.sln解決方案進入，如所示的Visual Studio 2012介面，其中的js-tests工程是Cocos2d-JS官方提供的案例工程，我們需要選中js-tests工程在右鍵菜單中，選擇“設定啟動項目”，然後運行上方工具列中的運行調試按鈕，運行js-tests工程。



Cocos2d-JS案例 首次運行需要編譯Cocos2d-JS時間會長一些，運行起來之後會看一個Windows的視窗（如所示），點擊其中的一個功能表項目可以運行相應的樣本（如所示）。

運行案例如果想查看js-tests原始碼不能通過Visual Studio 2012查看，需要到samplesjs-testssrc目錄下，使用文本編輯工具或者是WebStorm工具。
事實上uild目錄工程檔案，只是編譯Cocos2d-x庫並使案例基於JSB方式運行，我們不能夠通過這些工程修改案例中的JavaScript代碼。為了能夠查看、修改和運行案例中的JavaScript代碼，我們可以在WebStorm工具中配置案例工程，管理案例。具體過程是啟動WebStorm，在菜單中File→New Project from Existing Files...，這樣選擇是為了從已經存在的檔案建立WebStorm工程，彈出對話方塊，我們選擇最後一個選項，這個選項意思是我們檔案在本地，還沒有配置Web伺服器。
提示 JavaScript和HTML等Web檔案，運行需要部署到一個Web伺服器下的。



選擇配置方案

在介面選擇好後，點擊Next按鈕進入設定工程根目錄對話方塊，下所示，選擇，然後按下Project Root按鈕，設定無誤後，點擊Finish按鈕完成設定過程，設定成功介面如後圖所示。


設定工程的根目錄
設定成功

我們在導航面板中選擇Samples→js-tests→index.html，右鍵菜單中選擇Debug ‘index.html’，然後WebStorm會啟動Google Chrome瀏覽器，，我們發現在瀏覽器中啟動js-tests官方案例。

啟動Google Chrome瀏覽器

使用API文檔
從Cocos2d-JS官方下載開發包中沒有API文檔，我們使用Cocos2d-JS官的線上API文檔，可以通過http://www.cocos2d-x.org/wiki/Reference選擇Cocos2d-JS Online API Documentation進入線上API文檔，。我們可以左邊的文字框中輸入查詢條件，找到我們感興趣的內容，如所示。

Cocos2d-JS線上API文檔