这是Gamedev Phaser教程系列的第一课. 在课程完成之后,你可以在Gamedev-Phaser-Content-Kit/demos/lesson01.html找到源码.

在我们开始写游戏的功能之前,我们需要创建一个用来内部渲染游戏的基础架构.使用HTML就能做到 — Parser框架将生成所需的 <canvas> 元素.

游戏的HTML

HTML文档结构非常的简单,这个游戏将整个被渲染在框架生成的<canvas> 元素上. 拿起你最爱的编辑器,挑一个好目录,创建一个HTML文档,存成index.html,然后写下下面的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
    <style>* { padding: 0; margin: 0; }</style>
    <script src="js/phaser.min.js"></script>
</head>
<body>
<script>
    var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {
      preload: preload, create: create, update: update
    });
    function preload() {}
    function create() {}
    function update() {}
</script>
</body>
</html>

下载Phaser

下面我们将下载Phaser的代码,并应用到我们的HTML文档中.

  1. 进入 Phaser 下载页面.
  2. 选择最适合你的下载项 — 我们建议选择min.js,因为它最小,而且你不太可能想去看它的源码
  3. 将Phaser的源码存到一个和index.html同级的 /js 的目录下
  4. 在上面第一个 <script> 标签里写下phaser的路径.

捋一捋我们干了些啥

这个时候我们在 <header> 里定义了 <charset><title> 和一些基础的css来重置默认的margin和padding. 我们也用 <script> 标签向页面引入了 Phaser 源码。body 里也有一个 <script> 标签,我们将在里面写 JavaScript 代码来渲染和控制游戏。

<canvas> 元素是由框架自动生成的。我们是通过 Phaser.Game 创建一个对象并赋给了 game 变量来完成初始化的。参数的含义是:

  • width 和 height 设置了 <canvas> 宽高.
  • 渲染方式。有三个选项分别是 AUTOCANVAS 和 WEBGL。我们可以指定使用 Canvas 还是 WebGL 来渲染,如果使用了 Auto 则优先使用 WebGL,如果浏览器不支持则会选择 Canvas。
  • <canvas> 的 id。如果该参数有值,则使用该值作为 canvas 标签的 id,我们传入 null,则 phaser 会决定 canvas 的 id 值。
  • 第四个参数指定了 phaser 的三个生命周期所对应的函数。我们使用相同的名字来让程序更清晰
    • preload 进行资源的加载。
    • create 会在资源加载完成后执行一次。
    • update 会一直循环执行来处理每一帧动画。

完整示例

以下是第一章的完整代码,可以直接在 JSFiddle 中运行:

下一步

现在我们已经完成了一个简单的 HTML 页面,并且学习了如何安装 Phaser, 让我们继续学习第二章: scaling.

文档标签和贡献者

 此页面的贡献者: hnliuzesen, Haruhi
 最后编辑者: hnliuzesen,