啊!万年没更新的博客终于又开始更新了。
之前配置并写过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++版本的代码还是非常类似的,没我曾经想象的那么恐怖。最后,希望大家多交流,并指正我的错误,毕竟我也是初学啊。