初始化框架
这是学习如何使用 Gamedev Phaser 的 16 个教程中的第一个。完成本教程后，您可以在 Gamedev-Phaser-Content-Kit/demos/lesson01.html 中找到此部分的源代码。
在开始编写游戏的核心功能之前，我们需要创建一个基本的结构来渲染游戏。这可以使用 HTML 完成 - Phaser 框架将生成所需的 <canvas> 元素。
游戏的 HTML 代码
HTML 文档结构非常简单，因为游戏将完全在由框架生成的 <canvas> 元素中渲染。使用您喜欢的文本编辑器，创建一个新的 HTML 文档，将其保存为 index.html，并将其放置在合适的位置，然后将以下代码添加到其中
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>
</head>
<body>
<script>
const game = new Phaser.Game(480, 320, Phaser.CANVAS, null, {
preload,
create,
update,
});
function preload() {}
function create() {}
function update() {}
</script>
</body>
</html>
下载 Phaser 代码
接下来，我们需要下载 Phaser 源代码并将其应用到我们的 HTML 文档中。本教程使用的是 Phaser V2 - 它不适用于当前版本的 Phaser (V3)。V2 库仍然可以在 Phaser 下载页面上找到，位于 V3 下载链接下方。
- 访问 Phaser 下载页面.
- 选择最适合您的选项 - 我们建议使用 min.js 选项，因为它可以使源代码更小，而且您不太可能查看源代码。请确保使用 Phaser 版本 2，因为本教程是为该版本编写的。
- 将 Phaser 代码保存在与
index.html文件相同位置的/js目录中。 - 更新上面显示的第一个
<script>元素的src值。
逐步了解我们到目前为止的内容
此时，我们已定义了 charset、<title> 以及标题中的某些基本 CSS 来重置默认的 margin 和 padding。我们还有一个 <script> 元素，用于将 Phaser 源代码应用到页面。主体包含第二个 <script> 元素，我们将在这里编写 JavaScript 代码来渲染游戏并控制它。
框架会自动生成 <canvas> 元素。我们通过创建一个新的 Phaser.Game 对象并将其分配给 game 变量来初始化它。参数如下：
- 要设置的
<canvas>的宽度和高度。 - 渲染方法。三个选项是
AUTO、CANVAS和WEBGL。我们可以显式设置后两个选项之一，或者使用AUTO让 Phaser 决定使用哪个选项。它通常使用 WebGL（如果浏览器支持），否则回退到 Canvas 2D。 - 如果页面上已存在
<canvas>，则要用于渲染的id（我们指定了 null，因为我们希望 Phaser 创建它自己的）。 - 用于 Phaser 的三个关键函数的名称，这些函数用于加载和启动游戏，并在每一帧更新游戏循环；我们将使用相同的名称以保持清晰。
preload负责预加载资源create在所有内容加载完毕并准备就绪时执行一次update在每一帧执行。
比较你的代码
以下是第一课的完整源代码，在 JSFiddle 中实时运行