完美搭建Cocos2d-JS開發環境（全）

標籤：系統變數   tar   window下   頁面   src   結構   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”button，安裝外掛程式。

 

 

 安裝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所看到的。我們能夠在使用者變數（上半部分。僅僅影響目前使用者）或系統變數（下半部分。影響全部使用者）加入環境變數，普通情況下我們在使用者變數中設定環境變數。

設定環境變數對話方塊

我們使用者變數部分點擊“建立”button，然後彈出對話方塊，3-7所看到的，變數名：JAVA_HOME，變數值：C:\Program Files\Java\jdk1.7.0_21，注意變數值的路徑。

 

 

 

設定JAVA_HOME

為了防止安裝了多個JDK版本號碼對於環境的影響，我們還能夠在環境變數PATH追加C:\Program Files\Java\jdk1.7.0_21\bin路徑。如所看到的。在使用者變數中找到PATH。雙擊開啟PATH改動對話方塊，例如以所看到的，追加C:\Program Files\Java\jdk1.7.0_21\bin，注意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檔案夾是project的管理檔案夾。選擇好之後點擊OKbutton，假設該檔案夾不存在則建立。

 

選擇Workspace

Cocos Code IDE詳細使用怎樣我們以下章節再介紹。


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

 

Cocos2d-JS開發包內容

假設我們想要執行官方的案例能夠進入到build檔案夾。build檔案夾中的內容。例如以所看到的。這裡包含了各個平台編譯和執行案例的project等檔案，當中cocos2d_jsb_samples.xcodeproj檔案是Cocos2d-JS案例的Xcodeproject檔案，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-testsproject是Cocos2d-JS官方提供的案例project，我們須要選中js-testsproject在右鍵菜單中，選擇“設定啟動項目”，然後執行上方工具列中的執行調試button。執行js-testsproject。

Cocos2d-JS案例 

首次執行須要編譯Cocos2d-JS時間會長一些，執行起來之後會看一個Windows的表單（如所看到的），點擊當中的一個功能表項目能夠執行相應的示範範例（例如以所看到的）。

執行案例

假設想查看js-tests源碼不能通過Visual Studio 2012查看，須要到<Cocos2d-JS引擎檔案夾>\samples\js-tests\src檔案夾下，使用文本編輯工具或者是WebStorm工具。
其實<Cocos2d-JS引擎檔案夾>\build檔案夾project檔案，僅僅是編譯Cocos2d-x庫並使案例基於JSB方式執行，我們不能夠通過這些project改動案例中的JavaScript代碼。為了能夠查看、改動和執行案例中的JavaScript代碼。我們能夠在WebStorm工具中配置案例project，管理案例。 

詳細過程是啟動WebStorm，在菜單中File→New Project from Existing Files...，這樣選擇是為了從已經存在的檔案建立WebStormproject，彈出所看到的對話方塊，我們選擇最後一個選項，這個選項意思是我們檔案在本地。還沒有配置Webserver。
提示  JavaScript和HTML等Web檔案。執行須要部署到一個Webserver下的。

選擇配置方案

在介面選擇好後。點擊Nextbutton進入設定project根資料夾對話方塊，下所看到的，選擇<Cocos2d-JS引擎檔案夾>。然後按下Project Rootbutton，設定無誤後，點擊Finishbutton完畢設定過程，設定成功介面如後圖所看到的。

設定project的根資料夾設定成功

我們在導航面板中選擇Samples→js-tests→index.html，右鍵菜單中選擇Debug ‘index.html’。然後WebStorm會啟動Google Chrome瀏覽器，所看到的，我們發如今瀏覽器中啟動js-tests官方案例。（更多請登入，一號旺鋪http://www.yhwangpu.com/）

啟動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文檔

線上API文檔中搜尋內容

完美搭建Cocos2d-JS開發環境（全）