文档章节

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

piggybear
 piggybear
发布于 2015/02/16 10:33
字数 1093
阅读 26
收藏 0
点赞 0
评论 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
西安
技术主管
搭建Cocos2d-JS开发环境

使用Cocos2d-JS引擎开发游戏,主要的程序代码是JavaScript语言,因此,凡是能够开发JavaScript语言工具都适用于Cocos2d-JS游戏开发。本书我们推荐WebStorm和Cocos Code IDE工具。 搭建WebSt...

智捷课堂 ⋅ 2015/03/18 ⋅ 0

quick-cocos2d-x for mac开发环境安装配置

我的开发环境 操作系统:mac Cocos2d-x:v3.2 Cocos2d-lua(quick-cocos2d-x):v3.2-RC1 Cocos Studio:v2.0.2 Cocos Code IDE :v1.0.1(64bit) 安装步骤 安装Cocos2d-x 把下载好的cocos2d......

贪睡猫仙mosen ⋅ 2014/11/30 ⋅ 0

使用WebStorage 总是报错,求大神帮我看一下。谢谢

报错:Uncaught TypeError: localStorage.setItem is not a function 代码: var so_localStorage = { //判断是否支持localStoreage check: function () { if (window.localStorage) return ......

小杰瑞 ⋅ 2015/08/04 ⋅ 2

搭建Angular.io的开发环境

开发环境: 1. 操作系统:Mac iOS 2. IDE:Intellij idea 2017 3. Node Version: node -v 8.9.4 4. npm version: npm -v 5.6.0 (一)开始创建项目: 1. 安装淘宝的cnpm,以后使用cnpm指向的...

Manfred.Yan ⋅ 01/05 ⋅ 0

Python 3 极简教程 之 集成开发环境

Python 3 极简教程 之 集成开发环境 吴小龙同學2017-10-224 阅读 Python 集成开发环境 我用的是 PyCharm,PyCharm 和 Android Studio 同出自 JetBrains,是由 JetBrains 打造的一款 Python I...

吴小龙同學 ⋅ 2017/10/22 ⋅ 0

OpenGL 版本升级

由于开发Cocos2D-X 的需要,这边在VirtualBox 里面搭建了xp 下面的开发环境。不过在编译hello world 项目的时候报错了,提示说系统的OpenGL 版本是1.1 ,开发环境要求至少是V1.5 的。 网上百...

rslee ⋅ 2013/11/04 ⋅ 0

Cocos2d-HTML5 环境配置与项目建立

啊!万年没更新的博客终于又开始更新了。 之前配置并写过Cocos2d-x的程序,但并没有写过Cocos2d-HTML5的程序。所以可以说,我也是今天才刚开始学Cocos2d-HTML5的。在我尝试了配置Cocos2d-HTM...

萝卜胡 ⋅ 2013/12/11 ⋅ 0

2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

一、语义化元素 1.1 HTML5出来之前,我们往往使用div元素来将网页分成一个个大小不一的区域,尽管可以添加class属性、id属性,然后通过在css当中对class属性、id属性添加样式,但是这些div元...

瑾瑜爱上猫 ⋅ 05/23 ⋅ 0

跟着石头哥哥学cocos2d-x(一)---2dx环境搭建 (win7)

之前一直忙于游戏后台的开发,也没有时间整理,本人热衷游戏开发,现工作之余准备整理2dx引擎方面的东西,方便大家学习以及自己备忘吧,废话少说直接上菜: 环境搭建分以下步走: 1.开发环境...

石头哥哥 ⋅ 2013/11/03 ⋅ 36

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 51分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部