文档章节

Cocos2d-html5 搭建开发环境,运行 Hello World,JetBrains IDE Support

piggybear
 piggybear
发布于 2015/02/16 10:33
字数 1093
阅读 252
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

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 插件。

Google Chrome浏览器下载地址:http://www.google.com/intl/zh-CN/chrome/

疑问:市面上有这么多得浏览器,我们为什么要偏偏选择谷歌浏览器呢??

这是因为谷歌浏览器是基于Html5 实现的,是对Html5支持最好的浏览器。

接下来我们安装JetBrains IDE Support 插件。

联网安装:

打开谷歌浏览器,并输入此地址: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji 

JetBrains IDE Support 插件起到为谷歌浏览器与WebStorm进行联合的桥梁作用。

到这步耽误了很多时间,是因为上面的地址始终打不开,这应该懂得,政策被和谐了。反复尝试了N多遍,最终成功打开并安装。浏览器地址栏右侧有 JB 俩字表示已安装。


下载好本地安装:

JetBrains IDE Support 插件下载地址:http://download.csdn.net/detail/song_hui_xiang/7706495

打开Chrome扩展程序页面,点选 开发者模式,然后点击 加载正在开发的扩展程序 选择下载并解压好的 JetBrains IDE Support。


第三步:下载并安装WebStorm

疑问:为什么选用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 在CODE上查看代码片 派生到我的代码片
  1. // engineDir:'../cocos2d/',  
  2.         SingleEngineFile:'lib/Cocos2d-html5-v2.2.3.min.js',  

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

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


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



piggybear
粉丝 3
博文 237
码字总数 37552
作品 0
西安
技术主管
私信 提问
加载中
请先登录后再评论。
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
629
1
在多个浏览器上运行脚本--Queen

假设你想和朋友们玩这么个游戏:你写下某个数字,然后让朋友们猜你写的是什么数字。你的朋友们将不断的给你一些猜测的数字,直到猜中为止。 现在想象你的朋友都是使用的浏览器,这个游戏就相...

匿名
2013/01/24
4.5K
1
跨平台手机应用开发--Gideros

Gideros 可以让你轻松快速创建 iOS 和 Android 应用,提供用户友好的集成开发环境,内建模拟器对应用进行不同屏幕大小、分辨率下的测试,最大的优点是可即时修改代码即时进行测试,无需编译安...

匿名
2013/02/19
2.7K
0
PHP web 服务器--YACS

YACS 是一个强大的 PHP 脚本,可以让你维护一个动态的 Web 服务器。 特性: - Runs on your own server, or on a shared web site - Post articles with web forms, by e-mail, or remotely ......

匿名
2013/03/18
847
0
django-c10k-demo

这是一个演示程序,用来实现同时 10000 个并发连接到 Django 。涉及的概念包括:the C10k problem, the WebSocket protocol, the Django web framework, and Python's upcoming asynchronou......

匿名
2013/03/27
1.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

用17张 图带你看懂红黑树5大特性

tips:叶子结点,没有子结点的节点。nil等同于java中的null。 根据特点4,得出不能有连续的红色结点,特点5又说从任一结点到每个叶子节点的左右路径都包含相同数目的黑色节点。可以推出最长的路...

小咖呀
今天
0
0
为什么java8还在被大量使用?

  对于很多人来说,新版本的很多功能是很值得期待,并且他是从功能开发到预览一直在关注。而且对于本身来说升级所带来的好处远远大于升级所带来的工作量。   因为java 本身的兼容性问题,...

SXXpenguin
28分钟前
12
0
Yotta企业云盘:企业数据存储的可靠平台

回顾过去的几年,企业云盘市场发生了许多里程碑式的事件。 市场仍在继续进行模式重塑和集成的过程。 行业趋势已经出现,市场在平静中培育了新的机会。 企业在内容管理中的痛点越来越明显,需...

osc_srnunz15
29分钟前
0
0
《剑指 offer》 21. 调整数组顺序使奇数位于偶数前面

点击上方“图解面试算法”,选择“星标”公众号 重磅干货,第一时间送达 大家好,我是程序员吴师兄。 今天分享的题目来源于 LeetCode 上的剑指 Offer 系列 面试题 21.调整数组顺序使奇数位于...

五分钟学算法
今天
13
0
有了这份程序员面试指南,你离大厂Offer还远吗?| 附推荐书籍

本篇文章,我将结合英文版的 Google 面试指南的主线,根据自己的理解对文章进行修改,然后结合自己面试国内大厂的经验给大家阐述。其实我觉得,各大公司针对程序员岗位的面试流程来讲是相对比...

HollisChuang
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部