文档章节

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

萝卜胡
 萝卜胡
发布于 2013/12/11 22:22
字数 1441
阅读 2021
收藏 6

啊!万年没更新的博客终于又开始更新了。

之前配置并写过Cocos2d-x的程序,但并没有写过Cocos2d-HTML5的程序。所以可以说,我也是今天才刚开始学Cocos2d-HTML5的。在我尝试了配置Cocos2d-HTML5开发环境后,我发现这相对Cocos2d-x的配置简直是太容易了。所以各位不用怕,这个配置其实非常简单。

1.Cocos2d-HTML5开发环境配置

首先,我用的开发包是从http://www.cocos2d-x.org/下载的Cocos2d-html5-v2.2.1。到官网下载完zip包后,将其解压,这就是你的Cocos2d-HTML5开发环境了。(其中,windows用户会看到“__MACOSX”这个文件夹,但其实对windows用户来说没什么用,可以删除。)

至此,你已经完成了Cocos2d-HTML5的开发环境的配置了!!(是不是很简单……)


2.运行例程

打开刚才解压的开发环境的文件夹,找到HelloHTML5World文件夹,点击其中的index.html就可以运行HelloWorld的例子了。

但很多浏览器出于安全问题,不能加载本地文件(网上说什么Ajax机制,其实我不了解这方面),所以我们很可能会看不到HelloWorld例程的效果。例如我用chrome直接打开就不行(不过我用IE是可以直接运行的,网上说FireFox也可以直接运行),屏幕一直是黑的。为了解决这个问题,网上提供两类解决方案,一类是在本机建立网站服务器,再以连接服务器的形式访问我们的页面;另外一类是为浏览器设置参数,让浏览器可以加载本地文件。出于偷懒和方便,我更倾向于后一种(不过或许前一种“更好”,因为这样的话,别的机器能够通过网络来访问你写的Cocos2d-HTML5页面了)。

这里以Chrome为例子。右击Chrome的快捷方式,设置其属性,在目标一栏的参数后面加上“ --allow-file-access-from-files”(这里的两个引号不用加,并且注意,在开头有一个空格)。例如我的就是("C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files)。这样,我们通过这个快捷方式打开的chrome就设置了允许本地文件访问的参数了。注意我的用词,我是说通过这个快捷方式打开的chrome。(我个人理解)我们的快捷方式其实类似一个命令行(脚本),我们双击的时候,他就运行属性中的目标的程序,而我们刚才的设置,其实相当于在命令行中指定了chrome的一个可以访问本地文件的设置参数。所以,我们需要双击这个快捷方式,再在地址栏中输入我们Cocos2d-HTML5的HelloHTML5World中的index.html的绝对路径来打开index.html,而不是直接双击index.html来打开它(因为它没有设置允许本地文件访问的参数)。例如,我的开发包安装在E:\SoftwareFile\Cocos2d-html5-v2.2.1\。那么,我打开设置了参数的chrome的快捷方式,再输入E:/SoftwareFile/Cocos2d-html5-v2.2.1/HelloHTML5World/index.html即可运行开发包中的例程了,这也验证了我们的配置成功了。


3.项目建立

网上说的做法基本是直接复制开发包中的HelloHTML5World工程文件夹,并且要求存放到Cocos2d-html5开发包之下。这是一种可行方法。

不过,由于本人有些许强迫症,不希望项目文件跟开发包混在一起,所以想要使所有新建立的项目都可以随便防止到某一个位置。如果你也有这种需求,可以按如下操作来实现:

复制HelloHTML5World工程文件夹到你想要放置的地方,如我放置到了D:\CocosHTML5Project,并且我还将工程名字改成了HelloWorld。

按照步骤二,在chrome地址栏输入D:\CocosHTML5Project\HelloWorld\index.html。发现是不能运行的。我们按F12(chrome中的调试窗口,将来写程序的调试可以用的它)看看发生什么事。console中显示说加载不了部分文件。这部分文件就是我们开发包的文件了。我们打开刚复制的工程中的cocos2d.js文件(用文本编辑工具打开,如记事本),找到“engineDir”变量,它这里用了相对路径,我们需要做的只是把它改成我们开发包的绝对路径即可,例如,我的改为了engineDir:'E:/SoftwareFile/Cocos2d-html5-v2.2.1/cocos2d/'。那么,即使我们新复制的工程放置到哪里,它都可以找到开发包中的依赖文件了。我们再按不走而,其实已经可以成功运行index.html了。不过我们再来看看工程中的文件,build.xml中也有一个地方指定了开发包的路径,由basedir变量指定,我设置成了basedir="E:/SoftwareFile/Cocos2d-html5-v2.2.1/HelloHTML5World"来指定绝对路径。

这样,这个复制出来并修改后的工程文件,便可以作为一个模板工程。


4.其他

这里,我简单的看了一下HelloHTML5World的代码,其实比较主要的是main.js跟myApp.js。它们对应为Cocos2d-x版本中HelloWorld例程的AppDelegate文件跟HelloWorld文件。main.js指定一些程序的上下文,并在最后一句关键地指明加载HelloWorldScene,而HelloWorldScene的定义在myApp.js中。

由HelloWorld例程看来,HTML5版本的js代码跟C++版本的代码还是非常类似的,没我曾经想象的那么恐怖。最后,希望大家多交流,并指正我的错误,毕竟我也是初学啊。

© 著作权归作者所有

共有 人打赏支持
萝卜胡
粉丝 22
博文 7
码字总数 7083
作品 0
广州
私信 提问
Cocos2d-html5循序渐进(1)-开发环境配置

工先欲其事,必先利其器。 本章将涉及到Cocos2d-html5的开发环境的搭建,当然,如果你已经有可以使用的环境,那你就可以跳过本章。 第一步,下载Cocos2d-html5引擎,下载地址:http://www.co...

潞邊壹仦貓
2013/06/25
0
2
cocos2d-js-3.0-final 笔记(一)

环境搭建教程视频 官网的大神已经出了环境搭建视频了,不赘述,直接到入手阶段。 首先创建一个项目之后,看看我们的入口文件index.html <!DOCTYPE html><html><head> <meta charset="utf-8">......

错II过
2014/09/20
0
0
Cocos2d-JS v3.0 RC3 发布!

Cocos2d-JS v3.0 RC3 发布! Cocos2d-JS v3.0 RC3 提供 Facebook SDK Beta;改进了 API 参考;大大提升系统稳定性。 下载: cocos2d-js-v3.0-rc3.zip For Web Development Only Online API ......

oschina
2014/08/30
2.2K
6
Cocos2d-JS v3.0 Final 发布,终于来了!

Cocos2d-JS v3.0 Final 发布,这是最终版本啦:可以在任意地方运行的代码基础,精简的工作流,完整的工具链,assets 和脚本的热更新! 2014 年 3 月 15 日在 Cocoa China 开发者大会发布 Co...

oschina
2014/09/11
7K
5
cocos2d-x支持c++、js、lua开发

作者:左文 链接:https://www.zhihu.com/question/21130385/answer/21789568 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 纯属个人观点 1 Unity3d支...

壹峰
2017/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库技术-Mysql主从复制与数据备份

数据库技术-Mysql 主从复制的原理: MySQL中数据复制的基础是二进制日志文件(binary log file)。一台MySQL数据库一旦启用二进制日志后,其作为master,它的数据库中所有操作都会以“事件”...

须臾之余
昨天
12
0
Git远程仓库——GitHub的使用(一)

Git远程仓库——GitHub的使用(一) 一 、 Git远程仓库 由于你的本地仓库和GitHub仓库之间的传输是通过SSH加密的,所以需要一下设置: 步骤一、 创建SSH key 在用户主目录下,看看有没有.ss...

lwenhao
昨天
2
0
SpringBoot 整合

springBoot 整合模板引擎 SpringBoot 整合Mybatis SpringBoot 整合redis SpringBoot 整合定时任务 SpringBoot 整合拦截器...

细节探索者
昨天
0
0
第二个JAVA应用

第二个JAVA应用 方法一:配置文件: # cd /usr/local/tomcat/conf/# vim server.xml</Host> <Host name="www.wangzb.cc" appBase="/data/wwwroot/www.wangzb.cc" //引用所......

wzb88
昨天
0
0
2019年阿里Java面试必问:JVM与性能优化+Redis+设计模式+分布式

前言 一年之计在于春 金三银四已经要到来,2019的新的开始,作为一个开发人员,你是否面上了自己理想的公司,薪资达到心中理想的高度? 面试:如果不准备充分的面试,完全是浪费时间,更是对...

火力全開
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部