完美搭建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查看，须要到\samples\js-tests\src文件夹下，使用文本编辑工具或者是WebStorm工具。其实\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根文件夹对话框，如图下所看到的，选择。然后按下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开发环境（全）标签：系统变量   tar   window下   页面   src   结构   js开发   创建   一个   原文地址：http://www.cnblogs.com/yhwangpu/p/7363906.html