cocos2dxjs搭建开发环境
cocos2dxjs搭建开发环境
搭建 Cocos2d-JS 开发环境
本⽂将向⼤家演⽰如何在⾼⼤上的 MacOS 10.9 上搭建Cocos2d-JS v3.0的开发环境。
下载所需的软件包
1. 下载并安装 WebStorm 7。⽬前最稳定的发布版本是 7.0.3。我们为什么 WebStorm 呢？因为它提供了很多特性，例如Javascript
代码的语法实现、调试、语法⾼亮以及版本管理等等。你可以去WebStorm的官⽹获取更多的信息。
2. 从Cocos2d-x的官⽹下载。下载完成后解压到适当的路径。以我的为例，我将它解压在 ~/work/Cocos2d-js-v
3.0-alpha2 ⾥。这⾥
的 ~ 符号代表我们的 home ⽂件路径，于我⽽⾔就是 /Users/linshun。
注意：
你也可以从github上中获取Cocos2d-js的最新版本。master分⽀是最后⼀个稳定版本，develope分⽀是当前⼯作分⽀，有最新的features但是可能存在不稳定情况。
3. 下载并安装 Chrome 34 和。
OK，接下来我们将要介绍如何配置WebStorm 7 进⾏开发和调试我们的Cocos2d-JS应⽤程序。
创建新的⼯程
Cocos console是⼀个可以为Cocos2d-html5和Cocos2d-x JavaScript Binding（JSB）极⼤简化游戏创建和环境配置过程的⼯具，可以使⽤它来创建新项⽬，编译并发布游戏到android，iOS，Mac OS，iOS或者Web平台。
Cocos console安装
进⼊到已经下载完成的软件包，如~/work/Cocos2d-js-v3.0-alpha2
执⾏设置脚本 setup.py，安装的过程中需要你提供NDK，Android SDK和ANT的路径。该⼯具使⽤python开发，⽀持python 2.7.5或者2.7.6，暂时不⽀持python 3
根据提⽰执⾏ source ~/.bash_profile 指令，让环境设置⽴即⽣效
创建⼀个新项⽬
切换到⼯作⽬录，⽐如 cd ~/work
创建Cocos2d的游戏⼯程
//创建⼀个同时包含Cocos2d-html5和Cocos2d-x JSB的项⽬
cocos new -l js
//创建⼀个仅包含Cocos2d-html5的项⽬
cocos new -l js --no-native
//创建⼀个置顶⼯程名字指定⽬标的项⽬
cocos new projectName -l js -d ./Projects
本⽂采⽤默认的创建⽅式 cocos new -l js，默认在当前⼯作⽬录创建⼀个MyJSGame的项⽬
运⾏已创建的项⽬
使⽤浏览器运⾏web版项⽬
cd ~/work/MyJSGame
cocos run -p web
此时就可看到游戏项⽬运⾏在浏览器中，默认会启动⼀个http的服务器，并⾃动使⽤默认浏览器打开。
编译并运⾏Cocos2d-x JSB项⽬在iOS，android，mac上
cd ~/worl/MyJSGame
cocos compile -p ios|android|mac
cocos run -p ios|android|mac
选项说明
-p platform : The platform can be ios|mac|android|web.
-s source  : Your project directory, if not specified the current directory will be used.
-q          : Quiet mode, remove log messages.
-m mode    : Mode debug or relearnase, debug is default
--source-map: General source-map file. (Web platform only)
配置 WebStorm 调试Web项⽬
⾸先，你需要运⾏WebStorm 7。如果这是你第⼀次运⾏它，它将提⽰你选择个⼈偏好设置，例如选择快捷键。
这是我运⾏WebStorm的屏幕截图：
图 1
注意：如果这是你第⼀次运⾏WebStorm，那么近期项⽬部分应该是空的。
现在，我们在WebStorm中使⽤Cocos2d-JS游戏项⽬。
1. 选择已创建的MyJSGame项⽬
正如上图所⽰，你应该选择Create New Project from Exisiting Files
然后将会提⽰你下⾯这些选项
图 2
二手车买卖协议2. 选择 Source files are in a local directory, no Web server is yet configured 然后点击 Next 继续下⼀步.
图 3
3. 在这⼀步中，你需要展开⽬录树去指定MyJSGame源码的存放路径。在你指定了正确路径之后，注意到Finish 按钮任然是灰⾊。
开学第一课 作文4. 现在我们需要把⽬录设为 Project Root。点击 Project Root 按钮，随之 Finish 按钮将会被激活。
图 4
5. 祝贺你！到此你已经成功在WebStorm上配置好Cocos2d-JS项⽬。
使⽤Cocos2d-JS
因为你已经在WebStorm 7中添加了 Cocos2d-JS的⽂件路径。WebStrom 将会解析所有的 Cocos2d-J
S 源⽂件。打
开MyJSGame/src/myApp.js，你将能够进⾏语法实现。
图 5
如果在你的 Cocos2d-JS游戏应⽤中由第三⽅的 javascript库，你同样可以添加到WebStorm库进⾏解析，获取实时的语法提⽰。
说明如下:
（可选）添加第三⽅库进⾏解析
1. 点击 Settings 打开你的项⽬设置对话框:
图 6
2. 点击 Settings 按钮之后，将会弹出如下对话框:
图 7
3. 现在点击 按钮，将会提⽰你指定javascript库的存放路径。
为什么老人说冬天打雷不好
图 8
在 WebStorm 中调试 Cocos2d-JS javascript 代码
现在我们开始调试 Cocos2d-JS 代码.端午节画画教程简单又漂亮
通过 JB chrome 扩展将 WebStorm 连接到 Chrome
1. 右击 ~/work/MyJSGame 下的 index.html 然后选择 Debug 'index.html':
图 9
2. 现在将⾃动打开你的 Chrome 。如果你将你的⿏标放在 JB 插件上⾯，它将会显⽰你已经连接了 WebStrom 7.0.3:
孕妇护肤品什么牌子比较好图 10
注意: 如果你安装了插件"JetBrains IDE support"，这⼀步将会⾮常简单。当你点击 WebStrom ⾥的调试菜单，它将⾃动连接到chrome。太⽅便了！你也可以点击Chrome的⼯具栏右边的 JB 图标，它将⽴即跳转到 WebStorm IDE。
在 WebStorm 中调试 javascript 代码
回到 WebStorm 然后双击 MyJSGame/src/myApp.js 查看源代码。
1. 设置断点。右击 myApp.js 源码视窗左边的⼯具栏。
图 11
2. 开始调试。WebStorm会⾃动打开你的 Chrome 浏览器，运⾏你的⽰例项⽬。然后点击 JB 图标可返回你的 WebStorm 。程序将会
暂停在我们刚刚设置过断点的地⽅。编辑器将会转换到调试窗⼝：
图 12
3. 现在你可以进⾏步出、步⼊、单步执⾏和继续执⾏等调试操作。
总结
办信用卡的条件在本教程中，我给⼤家展⽰了配置 Cocos2d-JS使其与 WebStorm 7 相配合的基础步骤，包括配置语法⾃动提⽰和调试。这个过程⾮常的简单。如果你对教程有任何疑问或建议，请告诉我们，我们真诚
地感谢你对此做出的贡献！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。