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

为什么80%的码农都做不了架构师？>>>   

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

之前配置并写过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++版本的代码还是非常类似的，没我曾经想象的那么恐怖。最后，希望大家多交流，并指正我的错误，毕竟我也是初学啊。

转载于:https://my.oschina.net/arthas/blog/183779