1. 程式人生 > >搭建Cocos2d-JS開發環境

搭建Cocos2d-JS開發環境

ont 新建 order -m amp 推出 android text 實戰

使用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,假設該文件夾不存在則創建。


技術分享
選擇WorkspaceCocos 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官方案例。



技術分享啟動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文檔中搜索內容很多其它內容請關註最新Cocos圖書《Cocos2d-x實戰:JS卷——Cocos2d-JS開發本書交流討論站點:http://www.cocoagame.net
歡迎加入Cocos2d-x技術討論群:257760386
很多其它精彩視頻課程請關註智捷課堂Cocos課程:http://v.51work6.com
智捷課堂現推出Cocos會員,敬請關註:http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&amp;categoryId=0

《Cocos2d-x實戰 JS卷》現已上線。各大商店均已開售:

京東:http://item.jd.com/11659698.html

歡迎關註智捷iOS課堂微信公共平臺。了解最新技術文章、圖書、教程信息
技術分享

搭建Cocos2d-JS開發環境