cocos2d-js webstorm环境配置

勤奋努力，持之以恒！

 

Cocos2d-html5是什么，它最大优点在哪：

Cocos2D-HTML5 是基于 HTML5 规范集的 Cocos2D 引擎分支，具有跨平台的能力和强大的性能，是 Cocos2D 系列引擎随着互联网技术演进而产生的一个分支，该分支基于 HTML5 规范集，目标是可对游戏进行跨平台部署，Cocos2D-HTML5 采用 MIT 开源协议，设计上保持 Cocos2D 家族的传统架构，并可联合 Cocos2D-X JavaScript-binding 接口，最大程度地实现游戏代码在不同平台上的复用。

也就概括为它适用于任何有浏览器的智能设备。

 

开发环境的搭建我们只需要三步就可完成。

第一步：下载 Cocos2d-html5

下载地址：http://www.cocos2d-x.org/download

把下载好的 Cocos2d-html5 文件夹放到放到你能找得到的地方，我使用的是 v2.2.3 版本。目录结构如下:

 

第二步：下载并安装Google Chrome浏览器以及安装JetBrains IDE Support 插件。

1、在Chrome 浏览器地址栏中输入 chrome://extensions/

2、把JetBrains IDE Support Chrome_2_0_7_.crx插件拖放到打开的页面中（附件：JetBrains IDE Support Chrome_2_0_7_.crx）

3、更改端口（idea 和 JetBrains IDE Support ，端口不对插件图标会黑~~~），一般会默认对应上

 

第三步：下载并安装WebStorm

1.下载webstorm
http://www.jetbrains.com/webstorm/

WebStorm注册码

User Name:

EMBRACE

 

License Key:

===== LICENSE BEGIN =====

24718-12042010

00001h6wzKLpfo3gmjJ8xoTPw5mQvY

YA8vwka9tH!vibaUKS4FIDIkUfy!!f

3C"rQCIRbShpSlDcFT1xmJi5h0yQS6

===== LICENSE END =====

 

PhpStorm注册码

User Name:

EMBRACE

License Key:

===== LICENSE BEGIN =====
43136-12042010
00002UsvSON704l"dILe1PVx3y4"B3
49AU6oSDJrsjE8nMOQh"8HTDJHIUUh
gd1BebYc5U"6OxDbVsALB4Eb10PW8"
===== LICENSE END =====

http://peter2009.iteye.com/blog/1975994

2.下载google 浏览器 并且安装以下链接插件（要爬墙 安装下面的 插件）
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji

3.cocos2d-x 官网下载 cocos2d-js  sdk

疑问：为什么选用WebStorm作为开发工具？？

WebStorm被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。并且WebStorm内置了Web服务器，免去了我们部署Web服务器的麻烦。但是WebStorm是一款收费软件，至于破解都懂得。。

 

到此环境搭建完成，我们下面开始来运行 Hello World 程序以验证环境是否搭建成功。

1.打开WebStorm,选择Create New Project from Existing Code，意思是从现有的代码创建一个工程。

 

2.在新的弹出框中选择Source files are in a local directory, no Web server is yet configured，然后点击Next.

 

3.选择搭建开发环境第一步中我们的Cocos2d-html5目录。并点击左上角的Project Root按钮,将这个文件夹作为项目根目录，将这个目录作为项目的根目录，并点击Finish，这样我们就把引擎导入到了WebStorm。

 

4.左侧就是项目文件目录。其中有个HelloHTML5World目录，这个就是引擎给提供的HelloWorld程序。

 

5.双击打开其中的index.html文件，在代码中稍作停顿，能在右上角看到印有浏览器图标的弹出框。点击Google Chrome,就可以运行HelloWorld了。

 

6.看到如下画面，说明环境搭建成功。

 

改进：

通过上面大家看到了我是把整个cocos2d-html5-v2.2.3导入到了WebStorm中，如果再有新项目的话那还要写在引擎中，对于项目太不方便管理了，所以我们来去掉这种麻烦。

首先找到我们的cocos2d-html5-v2.2.3引擎文件夹，会看到template，这是创建新项目的模板。这就是如图：

接下来我们所要做的就是修改模板，把引擎文件夹下的lib文件夹拷贝到template文件夹下，如图：

然后打开template下的cocos2d.js文件只需要修改如下两句：

 

[javascript] view plain copy  

1. // engineDir:'../cocos2d/',  
2.         SingleEngineFile:'lib/Cocos2d-html5-v2.2.3.min.js',  

到此我们模板就修改成功了，创建个新项目试试吧：

 

拷贝template到桌面，从新命名为 MyTemplate,导入到WebStorm中。如图：

这样看着工程目录是不是就清爽很多了。。运行成功！