初始化框架
这是学习如何使用 Gamedev Phaser 的 16 个教程中的第一个。在开始编写游戏功能之前，我们需要创建一个基本的结构来渲染游戏。这可以通过 HTML 来完成——Phaser 框架将生成所需的 <canvas> 元素。
游戏的 HTML
HTML 文档结构非常简单，因为游戏将完全渲染在框架生成的 <canvas> 元素上。使用您喜欢的文本编辑器，创建一个新的 HTML 文档，将其保存为 index.html，放在一个合理的位置，并添加以下代码：
<!doctype html>
<html lang="en-US">
<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>
<script src="js/script.js" defer></script>
</head>
<body></body>
</html>
并在与 index.html 文件相同的位置创建一个新的 js 目录，并在其中创建一个名为 script.js 的新文件。我们将在其中编写控制游戏的 JavaScript 代码。最初它应该包含以下内容：
class ExampleScene extends Phaser.Scene {
preload() {}
create() {}
update() {}
}
const config = {
type: Phaser.CANVAS,
width: 480,
height: 320,
scene: ExampleScene,
};
const game = new Phaser.Game(config);
下载 Phaser 代码
接下来，我们需要下载 Phaser 源代码并将其应用到我们的 HTML 文档中。本教程使用 Phaser v3（撰写本文时为 v3.90.0，但较新的次要版本应该工作方式相同）。
- 转到 Phaser 下载页面。
- 选择最适合您的选项——我们推荐 phaser.min.js 选项，因为它使源代码更小，而且您不太可能查看源代码。
- 将 Phaser 代码保存在
js目录中。如果您使用其他文件名，请确保相应地更新 HTML 中第一个<script>元素的src值。
回顾到目前为止的进展
此时，我们已经定义了 charset、<title>，并在 header 中添加了一些基本的 CSS 来重置默认的 margin 和 padding。我们还有一个 <script> 元素用于将 Phaser 源代码应用到页面。body 包含第二个 <script> 元素，我们将在其中编写用于渲染和控制游戏的 JavaScript 代码。
<canvas> 元素由框架自动生成。我们通过创建一个新的 Phaser.Game 对象并将其分配给 game 变量来初始化它。参数是：
- 渲染方法。可用选项是
AUTO、CANVAS、WEBGL、HEADLESS。我们可以显式设置CANVAS或WEBGL，或者使用AUTO让 Phaser 决定使用哪一个。它通常会使用浏览器中可用的 WebGL，如果不可用则回退到 Canvas 2D。最后一个选项HEADLESS用于服务器端渲染或测试，这与本教程无关。 - 设置
<canvas>的宽度和高度。 - 要添加到游戏中的场景。在这种情况下，我们正在创建一个名为
ExampleScene的新类，该类继承自Phaser.Scene。这个类实现了 Phaser 在游戏生命周期的不同阶段调用的方法。我们将在其中填充这些方法。preload负责预加载资源create在所有内容加载并准备就绪后执行一次update在每一帧执行。
运行应用程序
要运行应用程序，您不能直接打开 index.html 文件，因为稍后我们将加载外部资源，这些资源将被浏览器的 同源策略 阻止。
为了解决这个问题，您需要运行一个本地 Web 服务器来提供 HTML 文件和图像文件。 正如 Phaser 的官方文档所建议的，我们有很多选项可以运行本地 Web 服务器。我们也有自己的 关于设置本地服务器的教程——请随意选择您喜欢的任何选项。例如，如果您选择使用 Python HTTP 服务器，则打开终端，导航到 index.html 文件所在的目录，然后运行以下命令：
python3 -m http.server
这将启动一个在端口 8000 上的简单 HTTP 服务器。然后，打开您的 Web 浏览器并导航到 https://:8000/index.html。
Compare your code
这是您到目前为止应该看到的效果，实时运行。要查看其源代码，请单击“播放”按钮。
后续步骤
现在我们已经设置了基本的 HTML 并对 Phaser 初始化有了一点了解，让我们继续第二个课程，学习 缩放。