Phaser 学习

2015年11月4日

最近想写一个 HTML5 生日贺卡，就学习了一下相关的知识，刚开始想直接用做网页的思路，只要是网页，无非就是 HTML、CSS 和 JavaScript，但想了一下，却不知道从何下手，因为一直以来都是做应用类的开发，对具体技术和技巧比较了解，但贺卡的重点在界面表现，要能吸引注意力，与众不同，生动有趣，让人印象深刻。

不过在界面展现这个领域，一直没有什么成功经验，一直只对做整整齐齐的界面比较熟练，虽然也算简单统一，但也单调乏味。好在有万能的互联网，可以站在别人的肩膀上模仿，简单了解一番后，觉得 Phaser值得一试，应该能够满足要求了，就没有再做更多的比较和研究了。选择 Phaser 的原因是，1. 比较简单，资料丰富，容易上手。2. 贺卡不需要太复杂的游戏相关因素。

开发环境

看了 Phaser 的官方文档，对于服务器这一块口水话说得太多了。简单选定了一种，就是用 NodeJS 相关技术栈。开发环境为 Windows 7 64 位，先安装 NodeJS 和 npm(NodeJS 4.2.1 64 位，npm 3.3.10) 后，再执行命令，

npm install -g yo generator-phaser
npm install -g gulp bower

generator-phaser 是一个 Phaser 工程模板生成器，会自动生成 Phaser 工程相关的一些模板文件，节约不必要的时间，方便开发者。

创建工程目录，生成工程模板，

mkdir birthday-card
cd birthday-card
yo phaser

启动开发服务器，

gulp

访问 http://localhost:9000/，可以看到页面，同时开发服务器会自动检测文件的改动，如果修改了源码，自动刷新浏览器。

构建应用，生成 dist 目录，包含应用，主要是对 HTML、CSS 和 JS 等资源压缩，在生产环境部署时，减少用户下载的时间，节约带宽，

gulp build

问题

如何使界面适应设备大小

参见这篇文章 http://www.joshmorony.com/how-to-scale-a-game-for-all-device-sizes-in-phaser/

哪里有入门的例子

monster wants candy

这是一个比较好的、比较全面的例子，CSDN介绍，源码，在线DEMO，在线完全版，但这个没有源码。

flappy bird

用Phaser来制作一个html5游戏——flappy bird(一)

用Phaser来制作一个html5游戏——flappy bird(二)

iPhone 各代的分辨率

4S, 960 * 640
5, 1136 * 640
6, 1334 * 750
6p, 1920 * 1080
6s, 1334 * 750
6sp, 1920 * 1080

大树的博客