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

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

以前配置并写过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++版本的代码仍是很是相似的，没我曾经想象的那么恐怖。最后，但愿你们多交流，并指正个人错误，毕竟我也是初学啊。