前言：这个夏天非常炎热，我在空调屋里都能感觉到外面灼灼的日光。前些年我也经常要在室外现场工作，半日就能由白面书生进化成黑脸包公。可穿着T恤晒得一节黑一节白的花臂实在是太Low了，可惜了咱在健身房练出的一身腱子肉 ;-) ，都不好意思秀一秀。
今年可以在家中静休，于是就干点以前总觉得浪费时间而不愿干的事。本人在学生期间英语水平一直不高，也不愿下苦功，工作后大部分是从事开发工作，常常需接触英文文档，虽然读起来有些吃力，但基本能看下来，也就没继续深造。不过看美剧如果没字幕就基本抓瞎了。
这篇文档的英文原稿来自Phaser官网上的官方文档，翻译稿完全是凭着兴趣完成的，有些地方由于翻译水平有限，最后是在自己的理解下用中文方式写的，如有不当之处，欢迎指正。转载请注明出处，谢谢！
- 第一节 介绍
原作者： Richard Davey on 20th February 2018
欢迎来到Phaser3的世界。我们将在这里一步一步教你用它制作一个小游戏，在游戏中你可以操作角色在平台跑、跳，收集星星，躲避炸弹。通过完成该例子，我们会介绍这个游戏框架的核心部件。
什么是‘Phaser’？
Phaser是一个专门为HTML5的游戏开发者，提高工作效率的HTML5游戏框架，而且能快速部署在不同的浏览器平台上，包括桌面系统和移动终端，只需要浏览器支持‘canvas’标签就可以了。
需要的材料
下载这个 zip 文件，它包含了我们每一步讲解所需要的代码和图像资源。另外，你需要一点，哪怕只有一点的JavaScript语言基础。
当然，最好你已经看过了我们的入门指南，那里教你如何下载Phaser的框架、设置本地的开发环境，还让你了解了Phaser项目核心函数的基本结构。
如果你已经搞定了入门指南，那你应该已经下载了Phaser，并设置好了可以写代码开发环境。现在把刚才下载的zip文件解压到你的web服务器的root目录下（译者注：在本地文档的浏览器模式下，Phaser是不能正常跑起来的，所以必须开启一个web服务，例如使用WebStorm的预览功能）。
用你习惯网页编辑器打开文件part1.html，关注下面这一段代码，在一小段样板HTML标记后，包含了这样一段Phaser代码块：
| var config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, create: create, update: update } };
var game = new Phaser.Game(config);
function preload () { }
function create () { }
function update () { } |
这里定义了一个config对象用来配置你的Phaser 游戏。该对象可以有多个游戏配置选项，随着你对Phaser的深入了解，你会在这里看到更多的选项内容。但在这个例子里面我们只要设置一下渲染器、画面尺寸和默认的场景。
接着定义了一个叫作game变量来指向一个Phaser.Game实例，而对象config作为参数传入到该实例中，现在我们就启动了一个进程，开启了Phaser的生命周期。
在Phaser 2中game对象的作用就是全局变量用，是访问Phaser系统内部的一个入口，但Phaser 3中就不需要这么做了，它仅仅表示该游戏实例的一个全局变量而已。
type的属性可以是Phaser.CANVAS、Phaser.WEBGL或Phaser.AUTO这三者之一。它决定了你游戏将采用的渲染模式。推荐的值是Phaser.AUTO，渲染器将尝试使用WebGL模式，如果浏览器或设备不支持该模式，它将使用效率较低的Canvas模式。Canvas元素将被Phaser创建并添加在DOM的节点上，以便脚本使用。但是如果你愿意也可以在config中指定一个父容器。
width和height属性是告诉Phaser设置它所创建的canvas元素的像素大小，在这个例子中我们设置为800x600像素。你可以随意设置你的游戏世界的大小，只要你的显示器能显示出来。
scene属性中的对象结构在本教程中隐藏了许多细节……
下章继续