【cocos2d-js官方文档】一、搭建 Cocos2d-JS 开发环境 - qinning199的专栏
- 博客频道 - CSDN.NET
2060人阅读
在本文中，我将展示如何在 Mac os 10.9(Maverics) 上搭建 Cocos2d-JS 开发环境。
下载必备的软件包
下载并安装WebStorm7。目前的稳定版本是7.0.3。为什么我们选择WebStorm？因为它提供了许多功能，如JavaScript代码的语法完成，调试，语法高亮，版本系统集成等，你可以去WebStorm的更多信息的官方网站。
从Cocos2d-x的官方网站下载Cocos2D-JS 3.0alpha版本。。当你下载了的Cocos2D-JS
3.0alpha版本。你应该把它解压缩到一个合适的位置。在我们的例子中，我把它解压在~/work/cocos2d-js-v3.0-alpha2.&~代表你的主目录路径，这在我们的例子中是&/Users/linshun。
你也可以通过GitHub上得到的Cocos2D-JS的前沿版本。这里是的，最新的开发工作在develop分支。
下载并安装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启动截图：
如果你是第一次启动WebStorm，最近打开工程部分应该为空。
现在，让我尝试用WebStorm进行Cocos2d-JS开发。
打开已经创建好的项目 MyJSGame
正如我们可以从上面的图片中看到，你应该选择Create New Project from Exisiting Files(从已存在的文件创建新项目)
然后，它会提示你以下选项：
选择Source files are in a local directory, no Web server is yet configured(源文件在本地目录，没有配置web
server) 并点击Next(下一步)继续
在这一步，你应该展开目录树来指定你的MyJSGame源代码放的位置。当你指定了正确的目录，注意Finish按钮仍然是灰色的。
现在，我们应该设置该目录为项目的Project Root(根目录)。单击项目根目录按钮，Finish(完成)按钮将激活。
恭喜你，你已经成功配置了webstorm 开发 Cocos2d-JS 项目。
Cocos2d-JS
当你已经添加了整个的Cocos2D-JS项目目录到WebStorm7。WebStorm将解析所有的Cocos2D-JS源代码。如果你打开MyJSGame/src/myApp.js，你可以得到的准确的语法自动补全的能力。
如果你有一个第三方JavaScript库在你的Cocos2d-JS游戏应用程序，你也可以把它添加到WebStorm库来解析并启用实时语法自动补全。
下面是说明：
添加第三方库进行解析
点击Settings(设置)按钮启动你工程的设置对话框:
在点击Settings(设置)菜单后，它将弹出如下的对话框:
现在你可以点击&Add...&按钮，然后会提示你指定你的javascript库的路径。
在WebStorm中调试Cocos2d-JS
javascript
是时候学习调试Cocos2d-JS代码了。
chrome 扩展连接WebStorm 到 Chrome
右键点击&~/work/MyJSGame下的index.html文件，并选择&Debug
'index.html'
现在，它会自动打开你的Chrome浏览器。如果你把你的鼠标chrome上面的JB插件， 它会告诉你，它已经连接上WebStrom7.0.3：
这一步很简单，一旦你已经安装了插件 -&“JetBrains IDE support”。当你单击WebStorm调试菜单，它会自动连接到浏览器。它是相当的方便啊！你也可以点击右侧Chrome浏览器的侧边栏的JB图标，它会立即把你带到WebStorm的IDE界面。
在WebStorm中调试javascript代码
返回到WebStorm界面，并双击&MyJSGame/src/myApp.js&在代码区展示。
设置断点。用鼠标右键单击myApp.js源代码视窗左边的侧栏。
开始调试。 WebStorm会自动启动你的chrome浏览器，并运行示例项目。然后通过点击JB图标回到你的WebStorm。程序将停止在我们刚才设置的断点处。且编辑器将切换到Debug视图：
现在你可以做调试之类的事情，单步跳出，单步进入入，单步跳过，继续执行等。
在本教程中，向你展示了基本的步骤来配置WebStorm7进行Cocos2d-HTML5的开发工作，包括配置语法感知自动补全和调试。过程是相当简单明了。如果你对这个教程有任何疑问或建议，请告诉我们。我们将非常感谢你的贡献。
在接下来的教程中，我们将通过内置的Cocos2d-JS测试和示例游戏，告诉你如何设置一个新的Cocos2d-JS项目。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：93543次
积分：1631
积分：1631
排名：第11876名
原创：43篇
转载：38篇
评论：20条
(1)(4)(8)(19)(2)(12)(2)(1)(3)(5)(13)(2)(1)(1)(7)当前访客身份：游客 [
当前位置：
Cocos2d-JS 3.2 发布，开源 2D 游戏框架
Cocos2d-JS 3.2 发布了，该版本值得关注的改进内容包括：分离渲染逻辑重构 Web 引擎，目前已经完成架构级别的重构，带来非常好的性能提升，特别是在移动浏览器上重构 Web 引擎的分辨率适配和音频引擎的 polyfilled 适配逻辑，带来更好的兼容性和可扩展性支持和 JSB 模块化增加重启游戏的特性和修复 AssetsManager 严重 bug，可轻松更新资源和脚本Bound all missed chipmunk API in JSB, this greatly improved physics game support in Cocos2d-JS.Canvas 渲染模型性能测试注意使用 JSB 构建有如下限制：[Android build] 建议 NDK 版本 r10c, 如果你无需兼容 Android 5.0，则可使用 r9d，其他 NDK 不支持[iOS build] Xcode 版本必须是 5.1.1 +[Web code obfuscation] JRE 或者 JDK 版本必须是 1.6 or 1.7下载工作流Cross platforms developers can use Cocos Console to create
projects, boost their development with web version engine and deploy
games onto all native platforms and all browsers with Cocos Console.Casual web game developers can download the Lite Version and
start to develop just like using other web frameworks (e.g. jQuery).更多信息升级已有项目Download the Cocos2d-JS v3.2 package.Upgrade cocos command with setup.py.Create a new project with cocos new command.Replace the &src&, &res&, &index.html&, &project.json&, &main.js& etc with your old project.Then you may need to refer to the upgrade guide to solve some API change issues.关于 Cocos2d 家族Cocos2d-JS v3.2 uses Cocos2d-x v3.3 as base of JSB solutionCocos2d-JS v3.2 is compatible with Cocos Code IDE v1.1.0Cocos2d-JS v3.2 is compatible with Cocos Studio v1.2 - v1.6, Cocos
Studio 2 support have been removed because flat buffer binary file can't
be parsed in JS, we will support Cocos Studio 2 in v3.3 with a JSON
format parser.其他链接：
Cocos2d-JS 的详细介绍：
Cocos2d-JS 的下载地址：
想通过手机客户端（支持 Android、iPhone 和 Windows Phone）访问开源中国：
旧一篇： 4个月前
新一篇： 4个月前
你也许会喜欢
工作流还是不够好，等它完善
3楼：zhanglei11 来自
我已经研究了一个月。感觉函数杂乱。有些是cocos2dx的。在cocos2d
js不能用。还有些函数只能在安卓上测试成功，在web上就不行了。
4楼：郑州楚天科技
cocos2d-js现在到底能不能用于生产环境？
5楼：jimchen1987
目前有没有用cocos2d-js开发的？之前看了一点，官方的文档不是很给力
6楼：Rwing
7楼：cunjing
与内容无关的评论将被删除，严重者禁用帐号
本周热点资讯
本站最新资讯yangtuo 使用javascript和cocos2d-js开发了一款html5游戏，用于在微信朋友圈内分享。 Other Riddle games 其他智力
225万源代码下载-
&文件名称: yangtuo& & [
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 2484 KB
&&上传时间:
&&下载次数: 0
&&提 供 者:
&详细说明：使用javascript和cocos2d-js开发了一款html5游戏，用于在微信朋友圈内分享。-Use javascript and cocos2d-js developed a html5 games for micro-channel circle of friends to share.
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&yangtuo\__MACOSX\小羊驼\._WeixinApi.js&&.......\........\......\frameworks\cocos2d-html5\cocos2d\._.DS_Store&&.......\........\......\..........\.............\.......\core\._.DS_Store&&.......\........\......\..........\.............\.......\....\._CCActionManager.js&&.......\........\......\..........\.............\.......\....\layers\._.DS_Store&&.......\........\......\..........\.............\.......\....\......\._CCLayer.js&&.......\........\......\publish\._.DS_Store&&.......\........\......\.......\html5\._.DS_Store&&.......\........\......\.......\.....\._WeixinApi.js&&.......\........\......\.......\.....\res\._player.png&&.......\........\......\res\._.DS_Store&&.......\........\......\...\._arrow.png&&.......\........\......\...\._background.jpg&&.......\........\......\...\._background_l.jpg&&.......\........\......\...\._block.png&&.......\........\......\...\._failed.png&&.......\........\......\...\._failedx2.png&&.......\........\......\...\._icon.jpg&&.......\........\......\...\._more.png&&.......\........\......\...\._notify.png&&.......\........\......\...\._player.png&&.......\........\......\...\._replay.png&&.......\........\......\...\._replayx2.png&&.......\........\......\...\._start.png&&.......\........\......\...\._succeed.png&&.......\........\......\...\._succeedx2.png&&.......\........\......\...\._title.png&&.......\........\......\...\._titlex2.png&&.......\小羊驼\.cocos-project.json&&.......\......\.DS_Store&&.......\......\.idea\.name&&.......\......\.....\Cat.iml&&.......\......\.....\compiler.xml&&.......\......\.....\..pyright\profiles_settings.xml&&.......\......\.....\encodings.xml&&.......\......\.....\misc.xml&&.......\......\.....\modules.xml&&.......\......\.....\scopes\scope_settings.xml&&.......\......\.....\vcs.xml&&.......\......\.....\workspace.xml&&.......\......\frameworks\.DS_Store&&.......\......\..........\cocos2d-html5\Base64Images.js&&.......\......\..........\.............\CCBoot.js&&.......\......\..........\.............\CCDebugger.js&&.......\......\..........\.............\cocos2d\.DS_Store&&.......\......\..........\.............\.......\actions\CCAction.js&&.......\......\..........\.............\.......\.......\CCActionCamera.js&&.......\......\..........\.............\.......\.......\CCActionCatmullRom.js&&.......\......\..........\.............\.......\.......\CCActionEase.js&&.......\......\..........\.............\.......\.......\CCActionInstant.js&&.......\......\..........\.............\.......\.......\CCActionInterval.js&&.......\......\..........\.............\.......\.......\CCActionTween.js&&.......\......\..........\.............\.......\.......3d\CCActionGrid.js&&.......\......\..........\.............\.......\.........\CCActionGrid3D.js&&.......\......\..........\.............\.......\.........\CCActionPageTurn3D.js&&.......\......\..........\.............\.......\.........\CCActionTiledGrid.js&&.......\......\..........\.............\.......\.udio\CCAudio.js&&.......\......\..........\.............\.......\clipping-nodes\CCClippingNode.js&&.......\......\..........\.............\.......\.ompression\base64.js&&.......\......\..........\.............\.......\...........\gzip.js&&.......\......\..........\.............\.......\...........\ZipUtils.js&&.......\......\..........\.............\.......\...........\zlib.min.js&&.......\......\..........\.............\.......\..re\.DS_Store&&.......\......\..........\.............\.......\....\base-nodes\BaseNodesPropertyDefine.js&&.......\......\..........\.............\.......\....\..........\BaseNodesWebGL.js&&.......\......\..........\.............\.......\....\..........\CCAtlasNode.js&&.......\......\..........\.............\.......\....\..........\CCNode.js&&.......\......\..........\.............\.......\....\CCActionManager.js&&.......\......\..........\.............\.......\....\CCCamera.js&&.......\......\..........\.............\.......\....\CCConfiguration.js&&.......\......\..........\.............\.......\....\CCDirector.js&&.......\......\..........\.............\.......\....\CCDirectorWebGL.js&&.......\......\..........\.............\.......\....\CCDrawingPrimitivesCanvas.js&&.......\......\..........\.............\.......\....\CCDrawingPrimitivesWebGL.js&&.......\......\..........\.............\.......\....\CCScheduler.js&&.......\......\..........\.............\.......\....\cocoa\CCAffineTransform.js&&.......\......\..........\.............\.......\....\.....\CCGeometry.js&&.......\......\..........\.............\.......\....\event-manager\CCEvent.js&&.......\......\..........\.............\.......\....\.............\CCEventExtension.js&&.......\......\..........\.............\.......\....\.............\CCEventListener.js&&.......\......\..........\.............\.......\....\.............\CCEventManager.js&&.......\......\..........\.............\.......\....\.............\CCTouch.js&&.......\......\..........\.............\.......\....\labelttf\CCLabelTTF.js&&.......\......\..........\.............\.......\....\........\LabelTTFPropertyDefine.js&&.......\......\..........\.............\.......\....\........\LabelTTFWebGL.js&&.......\......\..........\.............\.......\....\..yers\.DS_Store&&.......\......\..........\.............\.......\....\......\CCLayer.js&&.......\......\..........\.............\.......\....\......\CCLayerPropertyDefine.js&&.......\......\..........\.............\.......\....\......\CCLayerWebGL.js&&.......\......\..........\.............\.......\....\platform\CCClass.js&&.......\......\..........\.............\.......\....\........\CCCommon.js&&.......\......\..........\.............\.......\....\........\CCConfig.js&&.......\......\..........\.............\.......\....\........\CCEGLView.js&&.......\......\..........\.............\.......\....\........\CCInputExtension.js&&.......\......\..........\.............\.......\....\........\CCInputManager.js&&.......\......\..........\.............\.......\....\........\CCLoaders.js&&.......\......\..........\.............\.......\....\........\CCMacro.js&&.......\......\..........\.............\.......\....\........\CCSAXParser.js&&.......\......\..........\.............\.......\....\........\CCScreen.js&&.......\......\..........\.............\.......\....\........\CCTypes.js
&输入关键字，在本站225万海量源码库中尽情搜索：如何使用Code IDE调试Cocos2d-JS开发的游戏_百度知道
如何使用Code IDE调试Cocos2d-JS开发的游戏
提问者采纳
）　　使用 Xcode 打开 frameworks&#47运行;Debug Configuration&quot. 点击工具栏上的 debug 按钮　　3; 然后保持修改.width-20&iOS& 改成 &quot: 0;2&quot. 新建一个名为 CocosJSGame 的 Cocos JavaScript 工程　　2.0，在没有重启的情况下 close 按钮的位置已经改变了？closeItem, 你会发现，打开 &127.0.attr 方法是控制该按钮的显示位置的,　　anchorX，Cocos Tools-&gt，停留在 waiting 页面　　在 &quot， 从 1.，支持使用 XCode&#47，选择之前我们为你创建的名为CocosJSGame的configuration　　在 iOS Simulator 上调试　　选择iOS Simulator单选项　　选择正确的runtime app　　点击 Debug 按钮、测试游戏　　1,　　y。如果你想要在其他我们支持的目标平台上调试程序;Debug Configuration&Add Native Codes SDebug Configuration&quot: 0.attr({　　x!　　在其他目标平台上调试　　通过工具栏上的打开 Debug Configurations 打开 Debug Configurations 页面　　在页面的左侧.1&quot，并启动调试　　回到 Cocos Code IDE.width&#47. 默认情况下脚本会运行在我们提供的 mac 版本预编译 runtime 上;android 目录中　　手动启动 runtime，那么需要先添加（右击工程;&quot：　　如果你还没有 C++ 代码.5.0-rc1 版本开始，预编译的 runtime 会被自动安装到模拟器中　　在iOS设备上调试　　首先;size，你需要一个 runtime IPA，然后安装IPA到设备中　　在 iOS 设备上启动 runtime　　在 & 界面选择 Remote Debug 单选项　　platform 选择 &quot。　　以调试 Mac 为例;　　将设备的 ip 地址填写在 Device IP 上　　点击Debug按钮　　如何调试C++　　从 1; 界面选择 Remote Debug 单选项　　platform 选择 &quot。为了简单起见;　　将设备的 ip 地址填写在 Device IP 上　　最后点击Debug按钮　　在 Android 设备上使用 ADB 模式调试　　在 &quot:　　点击Debug按钮，选择 Remote Debug 单选项　　platfrom 选择 “Mac”　　Target IP 填写 &runtime-src&#47。　　支持 Step over.。　　　　closeItem，调用栈，可参考下文的“在其它目标平台上调试”　　如何调试　　断点支持　　可以在 javascript 脚本文件中增加断点　　当断点被触发时选择 “Yes” 打开 Debug Perspective 透视图，你可以通过 Code IDE 自己编译一个.;Visual Studio 调试 C++ 代码的同时使用 Cocos Code IDE 调试 C++ 代码，把&quot.5　　})，在屏幕底部的中间.0-rc1 版本开始; 界面选择 Android ADB Mode 单选项　　选择正确的 runtime apk　　点击Debug按钮　　IDE 会自动安装配置中的 runtime apk 到你的连接设备上并启动runtime开始调试　　在 Android 设备上使用网络模式调试　　手动安装 runtime 到你的设备上，可以看到很多与调试相关的视图.0;Android&runtime&#47, Step out 等调试方式，我们不对默认值进行任何改动.width - 20; 页面, Step into.0;Debug Configuration&quot，它被存放在 CocosLuaGame&#47,　　anchorY。　　代码热更新　　想更改右下角的 close 按钮的位置.ios_mac 工程、变量和断点等等: 20;　　　　修改“x”上面的值
工程信息部总经理
其他类似问题
cocos2d的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}