该系列其他文章
（一）搭建 Cocos2d-JS 开发环境
本文将向大家演示如何在高大上的 MacOS 10.9 上搭建Cocos2d-JS v3.0的开发环境。
下载所需的软件包
下载并安装 WebStorm 7。目前
最稳定的发布版本是 7.0.3。我们为什么 WebStorm 呢？因为它提供了很多特性，例如Javascript代码的语法实现、调试、语法高亮以及版本管理等等。你可以去WebStorm的官网获取更多的信息。
从Cocos2d-x的官网下载。下载完成后解压到适当的路径。以我的为例，我将它解压在 ~/work/Cocos2d-js-v3.0-alpha2 里。这里的 ~ 符号代表我们的 home 文件路径，于我而言就是 /Users/linshun。
你也可以从github上中获取Cocos2d-js的最新版本。master分支是最后一个稳定版本，develope分支是当前工作分支，有最新的features但是可能存在不稳定情况。
下载并安装 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.
: Your project directory, if not specified the current directory will be used.
: Quiet mode, remove log messages.
: Mode debug or relearnase, debug is default
--source-map: General source-map file. (Web platform only)
配置 WebStorm 调试Web项目
首先，你需要运行WebStorm 7。如果这是你第一次运行它，它将提示你选择个人偏好设置，例如选择快捷键。
这是我运行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 然后点击 Next 继续下一步.
在这一步中，你需要展开目录树去指定MyJSGame源码的存放路径。在你指定了正确路径之后，注意到Finish 按钮任然是灰色。
现在我们需要把目录设为 Project Root。点击 Project Root 按钮，随之 Finish 按钮将会被激活。
祝贺你！到此你已经成功在WebStorm上配置好Cocos2d-JS项目。
使用Cocos2d-JS
因为你已经在WebStorm 7中添加了 Cocos2d-JS的文件路径。WebStrom 将会解析所有的 Cocos2d-JS 源文件。打开 MyJSGame/src/myApp.js，你将能够进行语法实现。
如果在你的 Cocos2d-JS游戏应用中由第三方的 javascript库，你同样可以添加到WebStorm库进行解析，获取实时的语法提示。
（可选）添加第三方库进行解析
点击 Settings 打开你的项目设置对话框:
点击 Settings 按钮之后,将会弹出如下对话框:
现在点击 Add... 按钮，将会提示你指定javascript库的存放路径。
在 WebStorm 中调试 Cocos2d-JS javascript 代码
现在我们开始调试 Cocos2d-JS 代码.
通过 JB chrome 扩展将 WebStorm 连接到 Chrome
右击 ~/work/MyJSGame 下的 index.html 然后选择 Debug 'index.html':
现在将自动打开你的 Chrome 。如果你将你的鼠标放在 JB 插件上面，它将会显示你已经连接了 WebStrom 7.0.3:
注意: 如果你安装了插件"JetBrains IDE support"，这一步将会非常简单。当你点击 WebStrom 里的调试菜单，它将自动连接到chrome。太方便了！你也可以点击Chrome的工具栏右边的 JB 图标，它将立即跳转到 WebStorm IDE。
在 WebStorm 中调试 javascript 代码
回到 WebStorm 然后双击 MyJSGame/src/myApp.js 查看源代码。
设置断点。右击 myApp.js 源码视窗左边的工具栏。
开始调试。WebStorm会自动打开你的 Chrome 浏览器，运行你的示例项目。然后点击 JB 图标可返回你的 WebStorm 。程序将会暂停在我们刚刚设置过断点的地方。编辑器将会转换到调试窗口：
现在你可以进行步出、步入、单步执行和继续执行等调试操作。
在本教程中，我给大家展示了配置 Cocos2d-JS使其与 WebStorm 7 相配合的基础步骤，包括配置语法自动提示和调试。这个过程非常的简单。如果你对教程有任何疑问或建议，请告诉我们，我们真诚地感谢你对此做出的贡献！
为啥我run不起来。
xpp 12:21:48
gzg9901 09:57:15
问题2：WebStrom右边一大堆的mark颜色标记，能弄掉吗，貌似代码没什么问题啊
问题3：WebStrom里面，control+鼠标左键点击代码cc.game.run里面的run函数，出来3个提示项目
p.run (DevToolsUtil.js,frameworks/js-bindings/bingings/script/debugger)
m.run cc.game(jsb_boot.js,frameworks/js-bindings/bindings/script)
m.run cc.game(CCBoot.js,frameworks/cocos2d-html5)
我看的是命令cocos new -l js建立的MyJSGame工程，提示里面第3个是正确的提示。但是我注意到jsb_boot.js和CCBoot.js非常相似，请问这个jsb_boot.js是做什么用的呢,能解释下frameworks/js-bindings这个包是做什么的吗
gzg9901 09:57:08
问题1：我用楼主的教程在win7 32位系统安装了环境，能用命令cocos run -p web运行工程。但是cocos run -p android运行了很久以后，提示说
Android platform not specified,searching a default one...
Can't find right android-platform for project:&F:\work\MyJSGame\frameworks\runtime-src\proj.android&.The android-platform should be equal/larger than 10
是说我的安卓环境版本太低了吗
__今夜有雨 01:20:13
加油，顶你！
图6里面的setting如果是第一次安装，是看不到的
通过勾选view---toolbar
打开这个工具栏。再点选
backlost 21:03:11
回复 图8那个加入函数库的后续可以参照http://blog.csdn.net/yuechuzhao/article/details/9208463
jos_kl 11:07:46
顶一个，学到了很多，感谢大神的无私奉献。
下面呢？下面呢？
cocopeng 11:33:14
回复 后面的教程在快马加鞭的制作中！请您耐性等待！
下面呢？下面呢？
cocopeng 11:33:17
回复 后面的教程在快马加鞭的制作中！请您耐性等待！
评论内容不能为空。WebStorm8.0.3 语言包 - 下载频道 - CSDN.NET
&&&&WebStorm8.0.3 语言包
&WebStorm8.0.3 语言包
WebStorm的语言文件是C:\Program Files\JetBrains\WebStorm 8.0.3\lib下的resources_en.jar，将resources_en.jar复制粘贴到此文件夹覆盖同名文件即可。
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 传优质资源可以获取积分，详细见。选择完成有奖的任务，可以获取积分。选择购买VIP会员服务，无需积分下载资源。评价资源返积分：第一次绑定手机，将获50下载积分及100论坛可用分。论坛可用分兑换下载积分。
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
移动开发下载排行
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
WebStorm8.0.3 语言包
所需积分：2
剩余积分：
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000Keil uVision3建立新工程的方法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
27页1下载券3页免费19页免费6页免费11页免费 21页免费14页免费23页4下载券5页免费14页2下载券
喜欢此文档的还喜欢23页免费23页1下载券15页免费15页1下载券24页1下载券
Keil uVision3建立新工程的方法|
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
你可能喜欢482,381 十二月 独立访问用户
您目前处于：
支付宝、腾讯前端开发工程师谈实战HTML5
支付宝、腾讯前端开发工程师谈实战HTML5
相关厂商内容
来自腾讯Q＋团队的开发工程师则从性能分析的角度介绍了他眼中的HTML5，&预取一共有两部分：一部分是资源的预取，还有一部分是DNS的预解析，&元彦说，他分享了来自腾讯Q+的多个案例。
另外，支付宝移动产品部前端开发工程师（花名）分享了对于CSS3中的变形矩阵的理解，&一位日本工程师使用CSS画了一张图，粗看上去大家或许会以为这是一张图片，可惜不是，我可以很明确地告诉大家它是由DIV组成的，CSS通过TRANSFORM已经可以实现到这样一个程度。&
来自一淘的前端开发工程师（花名）着重阐述了web app离线应用的构建，&给大家描述一种情形，当我们在无任何网络的情况下使用wifi版iPad用safari访问页面的时候会有如下提示&safari cannot open the page because it is not connected to the Internet&。今天讲的主题就是如何解决这种问题，applicationCache，离线缓存&。
支付宝技术部支付开发组的工程师（花名）则仔细分析了HTML5带来的移动开发变革，&&Hybrid&融合了web与native的优点，更能满足企业应用。使用HTML5作为显示载体的Hybrid App具有跨平台特性，能轻松展现复杂的排版内容，降低了开发的门槛，提高了整体的效率。&
下面看看这些一线开发者们的HTML5实战体会分享。
阿里云前端开发工程师正邪（廖健）&&HTML5之美
HTML5的产生以及它的设计完全是遵循了一些常见的原理。
第一条：发送时保守、接受时开放。作为工程师，发送给浏览器的文档应该尽量的严谨，但是浏览器作为接收方，应该持有一个开放的姿态，而不会因为某个文档有问题，到浏览器窗口里面就不显示了，只是留下一片空白给用户。既然HTML存在标签没有正常闭合的可能性，也存在属性丢失的情况，只要文档没有产生二义性，浏览器应该猜测到最终的行为并做出正确处理，在技术层面浏览器有理由这么做。
第二：避免不必要的复杂性。我们在编写的HTML的时候，可能会定义一个很长行长的文档类型声明，这个文档类型声明是给浏览器看的，如果能够简化它，在说创作的时候能省下一些时间，而且也不用浪费力气去记那些难记的字符。实际上，省略大多数字符，浏览器也能按照我们期望的那样去运行。 还有script标签，我们可能会设置它的type为&text/javascript&，实际上也是不必要，如果type属性没有被声明，默认就按JavaScript处理。类似的东西有很多，在文档里面能省掉的我们就应该大胆地省掉，这样不仅是在创作这个文档的时候，能够给我们带来这些方便，而且在共同维护的时候也能带来一些益处。
第三：网络价值同达到网络用户数量的平方成正比。现在HTML5这么火，很多人就拿它跟Flash去做对比，说Flash多么多么烂，说HTML5多么多么好。实际上我们创作的内容最后是给用户去看的，如果这个东西用户觉得好，不管用什么技术我觉得都是次要的。
最后我们要的是将服务推送到用户面前，而不是要说某种技术多么好，可以杀死另一个技术。实际上在这里，它们的协同工作才是符合HTML5的设计思想，在这个层面上我觉得Flash也是HTML5中的一员。 第四，大多数人的意见和可运行的代码。没有HTML5规范的时候，浏览器厂商可以各自为阵，可以加入了自己的标准，虽然这些标准不是W3C制定的，但是大多人都有这些需求，它们能解决实际问题。所以也刺激W3C加入到这些标准的制定中去。
腾讯Q＋团队 开发工程师元彦&&从性能分析的角度去介绍HTML5
关于简洁的标签方式
HTML5从这个名字大家可以听出，它是从HTML4继承过来的。HTML4里面有严格模式跟过渡模式，HTML5是支持这种过渡模式的，就是你可以不把一些标签闭合。但是，我并不推荐所有的标签，比方说BODY标签的不闭合，这种我们不推荐。但是像最常用的P标签，还有列表标签li可以。为什么这样说？首先从视觉角度来说，这样的方式更简洁。关键的是：在文档传输过程中，内容会更少。
HTML5标签属性的声明支持三种方式。一种是单括号、双括号和不加括号。为了减少文档大小，我选择不加双引号的方式或单引号的方式。但是要注意，假设是类属性的声明，因为属性可能包括多个类，多个类的时候则必须用括号括起来。在这方面，给大家看一下谷歌的一个实践。谷歌自己有一个页面完全实践了上面的东西，文档的大小减少了20%，使HTML文档的传输减少了20%。如果把整个都实践起来，可以达到5%&20%之间的减少。这是第一步，缩减HTML文档的大小。
预取，一共有两部分：一部分是资源的预取，还有一部分是DNS的预解析。
资源预加载有几个点需要注意： &
一，预加载只是在浏览器空闲的时候才会去拉，但不保证一定会去拉，这是很重要的一点。因为本身浏览器有一个全局的监听器，这是内部的一个接口，当浏览气空闲的时候，它会去执行浏览器空闲的时候应该做事情，但是这个空闲的回调不一定被触发，所以说并不保证一定会执行预加载。&
二，Chrome不支持HTTPS资源的预加载，像Alipay是HTTPS的页面，Chrome不会去预拉取。
三，一个预拉取的页面虽存在后不可见，实际上它是在正常解析。假如说我预拉取登陆页面，登陆页面有很多资源，比方说有图片，有CSS文件，JS文件。它是从上往下正常的会被解析，解析的过程中，这个页面没有显现，但是它实际上是存在的。在HTML5里面，可通过document.visibilityState得到当前页面状态，通常页面有两种状态，可见与不可见，但是现在有一个新的状态，叫做预渲染的状态。可以直接通过document.visibilityState 是否等于 prerender 来判断页面是否在预渲染状态。
支付宝前端开发工程师 轩与 （王炜）&&CSS3-Transform：Matrix2D & 3D
一位日本工程师使用CSS画了一张图，粗看上去大家或许会以为这是一张图片，可惜不是，我可以很明确地告诉大家它是由DIV组成的，可能有人会怀疑这怎么会是由DIV组成的，为了证明我不是在忽悠，使用safari的调试器，我们可以看到它确实通过了很多的DIV的变形来完成的，可以说非常地美轮美奂，但是你却完全看不出来它是由DIV画成的。CSS通过TRANSFORM已经可以实现到这样一个程度。
接下来我们一起深入了解一下他背后的东西。
先讲2D变形的四种基本方法。
第一个变形方式叫平移（TRANSLATE）。
第二个是伸缩（SCALE）。
第三个叫倾斜（SKEW）。
第四个叫旋转（ROTATE）。
然后进入主题MATRIX。2DTRANSFORM用了六个参数组成了2*3阶的矩阵，其实标准的是9个参数，一共是3&3的矩阵，但是由于这块主要是2D的，所以实际使用过程中（变化当中）是通过六个参数来表达。
A是代表了X轴的SCALE，就是我们前面说的X轴的伸缩，这个具体的值是代表了在X轴上它所伸缩的单位长度。B对应的Y轴上SKEW，是在Y轴上歪斜的角度；C是X SKEW，是在X轴上倾斜的角度；D是在Y SCALE，是在Y轴上面的伸缩，E是X轴上的TRANSLATE，即在在X轴上平移。F对应的是Y轴的TRANSLATE，在Y轴上的平移。
通过TRANSLATE你可以传1和0，也可以通过MATRIX传递把它改成0和1，然后可以得到同样变形的效果。
一淘前端开发工程师玄寂（姜维）&&Web app离线应用的构建
手机淘宝，当初定了两种方案，一种是localStorage，另外一种是applicationCache，最后采取的方案是applicationCache+localStorage。
我们的做法是分离出数据层和基础资源文件层，数据层主要是ajax获得的数据，而我们利用的applicationCache缓存的是一个框架性的东西，基础HTML文档、JS文件、CSS文件、图片文件、字库文件ttf，以及可能需求的一些媒体文件，localStorage存一些系统信息，关于字库文件，其实这里的字库是一个icon集合，我们把大量icon集合到一个字库文件，通过对应表来对应相应的icon，由于字体是矢量的这解决了为不同iPhone分辨率的适配问题。当然还减少了http请求数。最最重要的是，字库把原有图片体积上足足可以减小2分之一。当然这也存在一点点的维护性问题。
这种结合applicationCache，localStorage的OPOA的方案，看上去似乎高枕无忧，但是在多人协作问题上显现的特别棘手，由于我们在项目中又引入了backbone（JS中的MVC框架）项目成员沟通成本增大很多。最后我们的方案是先有专人介入MVC，架设好最核心的应用体系，然后分配到page由不同人开发。另外和pc端one page 还有点不一样的地方是我们移动端可能还需求页面与页面间切换的效果，所以大部分时候我们的view层可能需要被缓存，这个缓存言下之意就是显示与隐藏，所以在管理view上要做好特别的管理，否则很可能会导致内存的溢出。这个问题目前还没有很好的解决方案，但是之后会参考iOS native里面有一个navigator的对象，它会有一个动态管理的过程。
大家可以到查看本次分享的ppt。
支付宝开发工程师 心武
（杜伟）&&HTML5带来的移动开发变革
如何实现&Hybrid&
&Bridging the gap between the web and the SDK&，这是对于如何实现Hybrid的最好描述。在手机OS中，Web页面的载体（如WebView）是OS的一部分，被包含在SDK中的。当Html页面解析时，WebViewWebBrowser充当了中间人的作用，它以超出浏览器的界限在Html页面中加入额外的操作，这就成为了web与native建立连接的基础。例如在Android中，webview组件有addJavascriptInterface(Object,String)方法，这个接口的作用是将一个Java对象提供给Html页面的JS代码访问。
Hybrid利器&&PhoneGap
PhoneGap是现下比较流行的Hybrid框架，08年推出，11年10月被Adobe收购，随后被捐赠给Apache软件基金会，并更名为&Cordova&。PhoneGap入门并不困难，在官网上可以方便的找到它的使用步骤、支持的API以及跨平台应用构建工具。
其实，PhoneGap自带的API意义不是很大，它提供的Plugin扩展机制才是解决问题的关键。实际应用开发中，我们需要针对不同平台开发特定的Plugin插件，这会丧失一定的跨平台能力，但却可以达到&随心所欲&的地步。
给InfoQ中文站投稿或者参与内容翻译工作，请邮件至。也欢迎大家通过新浪微博（）或者腾讯微博（）关注我们，并与我们的编辑和其他读者朋友交流。
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
Re: 何必用网名呢
应该提一提 【html5的不成熟】
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
吴俊达 潘晓良 许式伟 丁吉昌 岳旭强
Andy Jordan
Andrea Guzzo
Dario Crivelli
赞助商链接
InfoQ每周精要
通过个性化定制的新闻邮件、RSS Feeds和InfoQ业界邮件通知，保持您对感兴趣的社区内容的时刻关注。
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7