【cocos2d-js官⽅⽂档】⼀、搭建Cocos2d-JS开发环境
在本⽂中，我将展⽰如何在 Mac os 10.9(Maverics) 上搭建 Cocos2d-JS 开发环境。
下载必备的软件包
1. 下载并安装WebStorm7。⽬前的稳定版本是7.0.3。为什么我们选择WebStorm？因为它提供了许多功能，如JavaScript代码的语
法完成，调试，语法⾼亮，版本系统集成等，你可以去WebStorm的更多信息的官⽅⽹站。
2. 从Cocos2d-x的官⽅⽹站下载Cocos2D-JS
3.0alpha版本。。当你下载了的Cocos2D-JS 3.0alpha版本。你应该把它解压缩到⼀个
合适的位置。在我们的例⼦中，我把它解压在~/work/cocos2d-js-v3.0-alpha2. ~代表你的主⽬录路径，这在我们的例⼦中
是/Users/linshun。
注意：
你也可以通过GitHub上得到的Cocos2D-JS的前沿版本。这⾥是的，最新的开发⼯作在develop分⽀。
1. 下载并安装Chrome34和扩展。
好吧，让我们来看看如何配置WebStorm7开发和调试我们的Cocos2D-JS应⽤。
如何创建新⼯程
Cocos2d-JS 提供了⼀个控制台⼯具，使CH5和JSB应⽤程序的开发更加简单和⽅便得多。你可以使⽤它来创建⼀个新的项⽬，其发布到Android，iOS，Mac OS或web，它是⾮常容易使⽤。
安装Console⼯具
第⼀步，在你使⽤该⼯具前需要先安装。请克隆 Cocos2d-JS仓库并跟新所有⼦模块。在Cocos2d-JS⽂件夹下打开控制台⼯具(console)，然后在控制台上运⾏./setup.py。在安装期间你可能需要提供你的 NDK, Android SDK 和 ANT的路径。注意该⼯具是使⽤python开发的，所以你需要在你的机⼦上安装python 2.7.5或以后的版本(但是不⽀持 python3)。
**注意： ** 请执⾏source ~/.bash_profile，使环境设置⽴即⽣效。
创建新⼯程
// 创建⼀个包含 Cocos2d-x JSB 和 Cocos2d-html5 ⼯程:
cocos new -l js
// 创建⼀个仅包含 Cocos2d-html5 的⼯程:
cocos new -l js --no-native
// 在指定的⽬录创建⼀个指定名字的⼯程:
cocos new projectName -l js -d ./Projects
在这个教程中，我们使⽤cocos new -l js在当前⽬录创建⼀个MyJSGame⼯程。
运⾏该⼯程
使⽤Websever 运⾏ Cocos2d-JS ⼯程
cd ~/work/MyJSGame
cocos run -p web
使⽤Cocos2d-x JSB 编译并运⾏项⽬
cd ~/work/MyJSGame
cocos compile -p ios|android|mac
cocos run -p ios|android|mac
有⽤的参数
-p platform : 平台可以是 ios|mac|android|web.
-s source : 你的⼯程⽬录, 如果不指定当前⽬录会被使⽤.
-q : 静默模式, 移除⽇志消息.
-m mode : debug 或 release 模式, 默认是debug
--source-map: 普通的 source-map ⽂件. (仅针对Web 平台)
配置WebStorm 进⾏Cocos2d-JS开发
⾸先，你应该启动WebStorm7。如果这是你第⼀次启动WebStorm，它会要求你选择你的个⼈偏好，⽐如选择键盘映射。
这是我的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(源⽂件在本地⽬录，没有配置web server) 并点击Next(下⼀步)
继续
图3
3. 在这⼀步，你应该展开⽬录树来指定你的MyJSGame源代码放的位置。当你指定了正确的⽬录，注意Finish按钮仍然是灰⾊的。
4. 现在，我们应该设置该⽬录为项⽬的Project Root(根⽬录)。单击项⽬根⽬录按钮，Finish(完成)按钮将激活。
图4
5. 恭喜你，你已经成功配置了webstorm 开发 Cocos2d-JS 项⽬。
体验 Cocos2d-JS
当你已经添加了整个的Cocos2D-JS项⽬⽬录到WebStorm7。WebStorm将解析所有的Cocos2D-JS源代码。如果你打
开M yJSGame/src/myApp.js，你可以得到的准确的语法⾃动补全的能⼒。
图5
如果你有⼀个第三⽅JavaScript库在你的Cocos2d-JS游戏应⽤程序，你也可以把它添加到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
如何下载javascript2. 现在，它会⾃动打开你的Chrome浏览器。如果你把你的⿏标chrome上⾯的JB插件，它会告诉你，它已经连接上
WebStrom7.0.3：
图10
注意：
这⼀步很简单，⼀旦你已经安装了插件 - “JetBrains IDE support”。当你单击WebStorm调试菜单，它会⾃动连接到浏览器。它是相当的⽅便啊！你也可以点击右侧Chrome浏览器的侧边栏的JB图标，它会⽴即把你带到WebStorm的IDE界⾯。
在WebStorm中调试javascript代码
返回到WebStorm界⾯，并双击MyJSGame/src/myApp.js在代码区展⽰。
1. 设置断点。⽤⿏标右键单击myApp.js源代码视窗左边的侧栏。
图11
2. 开始调试。 WebStorm会⾃动启动你的chrome浏览器，并运⾏⽰例项⽬。然后通过点击JB图标回到你的WebStorm。程序将停⽌
在我们刚才设置的断点处。且编辑器将切换到Debug视图：
图12
3. 现在你可以做调试之类的事情，单步跳出，单步进⼊⼊，单步跳过，继续执⾏等。
总结
在本教程中，向你展⽰了基本的步骤来配置WebStorm7进⾏Cocos2d-HTML5的开发⼯作，包括配置语法感知⾃动补全和调试。过程是相当简单明了。如果你对这个教程有任何疑问或建议，请告诉我们。
我们将⾮常感谢你的贡献。
何去何从
在接下来的教程中，我们将通过内置的Cocos2d-JS测试和⽰例游戏，告诉你如何设置⼀个新的Cocos2d-JS项⽬。
转载⾃：

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