说明

本文教你如何搭建Phaser的开发环境,包括一个本地的web服务器,IDE的选择,获取最新版本的Phaser。

如果你有一个本地的Web服务器(IIS、Apache等),可以跳过下面的解释直接看安装部分。

如果你想知道原因,请继续阅读...

必须要一个Web 服务器?我只想做游戏!

为什么必须需要web服务器? 我不能把HTML文件拖到浏览器吗?

我知道这有点混乱,甚至有点矛盾。不过归根结底还是浏览器的安全因素。如果你做一个HTML页面,你可以开开心心的把它拖到浏览器上去看效果,你也可以把网页内容完整的另存再重新打开,这两种方法都没有问题但为什么不能把HTML5游戏文件拖到浏览器上去运行?

它与用于访问文件的协议有关,当你通过HTTP协议向服务器发送请求的时候,服务端的安全策略可以保证你只能访问你需要访问的文件。但当你拖动文件加载到本地文件系统(file://)会受到很大限制,原因是显而易见的。在file://协议上并没有域的概念,没有服务器级别的安全性,只是一个文件系统

问问你自己:你想让JavaScript在你本地的文件系统里面随意的读取文件吗?

当然,你肯定会直接回答:“当然不想!”如果JavaScript在文件系统(file://)下面可以随意的读取数据,那么谁也无法阻止它把你本地的文件都上传到其他地方去。

正因为如此安全问题,所以浏览器在文件系统(file://)下面把他们的权限控制了起来,每一个单页都变成了独一无二的local domain,所以浏览器上的“另存为”才可以工作。

安装web服务器

Windows

Windows平台下面有许多可用的安装包,例如ApacheMicrosoft IIS

OS X

在UNIX环境下的OS X操作系统比Windows的选择更多。如果你更喜欢干净整洁易操作的界面,我们推荐你使用MAMP

选择编辑器

编辑器种类非常多,可以在以下几个主流的编辑器中选择一个

获取Phaser

Phaser是一个开源项目,可以免费下载,不管你用它做商业或免费项目。

我们使用GitHub进行源码托管。

下载Phaser v2.4.6

文件结构

git上面主要有两个分支:master和dev,master是最新的发布版本,dev是最新的开发版本,生产环境请使用发布版本。

Hello World!

到目前为止,web服务器下载配置完成、编辑器准备就绪、Phaser也已经下载好了,是时候尝试一下了

下载这个压缩文件,把它放到你本地的web服务器上去,之后一般都是通过输入localhost/....或者127.0.0.1/....来访问

如果一切顺利,中间有一个黑色游戏区显示Phaser的logo。

如果没有正常工作,可以查看下浏览器控制台,大部分浏览器都是F12,如Chrome、ie11,看看是什么错误,希望只是简单的文件丢失,在这种情况下,检查你的文件夹名称和刷新页面。

如果是更复杂的错误,请提交给我们。