Phaser - HTML5 游戏框架

Phaser 头图

Phaser 是一个快速、免费且有趣的开源 HTML5 游戏框架，可在桌面和移动网页浏览器上提供 WebGL 和 Canvas 渲染。游戏可以通过第三方工具编译为 iOS、Android 和原生应用。您可以使用 JavaScript 或 TypeScript 进行开发。

除了出色的开源社区外，Phaser 还由 Phaser Studio Inc 积极开发和维护。由于快速的支持和开发者友好的 API，Phaser 目前是 GitHub 上最受欢迎的游戏框架之一。

从独立开发者到跨国数字机构，以及全球各地的大学都在使用 Phaser。看看我们的展示视频中他们令人难以置信的游戏：

访问 Phaser 网站
玩一些令人惊叹的游戏
学习浏览我们的 API 文档、[支持论坛][forum]和 StackOverflow
代码示例？ 我们有超过 2000 个示例供您学习
阅读每周的 Phaser World 通讯
社交: 加入我们的 Discord 和 Reddit 或在 Twitter 上关注我们

获取源代码，加入其中的乐趣！

NPM

通过 npm 安装：

npm install phaser

创建 Phaser 游戏应用

快速开始使用 Phaser 的最简单方法之一是使用我们新的 create-phaser-game 应用。这是一个 CLI 工具，提供了官方项目模板和演示游戏的交互式选择。只需发出命令，回答一些问题，应用就会下载并配置适合您需求的正确包。

目前，我们支持以下所有框架和打包工具：

框架	打包工具
Vue.js	Vite
React	Rollup
Angular	Parcel
Next.js	Webpack
SolidJS	ESBuild
Svelte	Import Map
Remix	Bun

这些大多都有 JavaScript 和 TypeScript 版本。

在这里了解更多关于该应用的信息。

CDN

Phaser 在 jsDelivr 上，这是一个"面向开发者的超快速 CDN"。在您的 html 中包含以下内容：

<script src="//cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.js"></script>

或压缩版本：

<script src="//cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>

API 文档

访问 https://newdocs.phaser.io/ 在线阅读文档。使用链接导航命名空间、类和游戏对象列表，也可以使用搜索框。

Phaser 的文档是一个持续进行的项目。请通过贡献改进的文档和示例来帮助我们。

TypeScript 定义

TypeScript 定义可以在 types 文件夹中找到。它们也在 package.json 的 types 条目中被引用。

根据您的项目，您可能需要在 tsconfig.json 文件中添加以下内容：

"lib": ["es6", "dom", "dom.iterable", "scripthost"],
"typeRoots": ["./node_modules/phaser/types"],
"types": ["Phaser"]

TypeScript 定义是从 Phaser 源代码中的 JSDoc 注释自动生成的。如果你想帮助完善它们，你必须直接编辑 Phaser JSDoc 块，而不是 defs 文件。你可以在 scripts/tsgen 文件夹中找到关于我们构建的解析器的更多详细信息。

许可证

Phaser 根据 MIT 许可证发布。

Phaser 的教程和指南每周都在发布。

Phaser 3 入门（如果你完全不了解 Phaser，这很有用）
制作你的第一个 Phaser 3 游戏
完整的 Phaser 3 游戏开发课程包含超过 15 小时的视频，涵盖了各种重要主题。
此外，在官方网站上还列出了超过 700 个 Phaser 教程。

免费的 Phaser 示例书籍

一本全新的 500 页免费书籍，介绍使用 Phaser 进行游戏开发。通过构建射击游戏、益智游戏、Rogue-like 游戏等来学习。

Phaser 示例

由长期多产的 Phaser 爱好者 Pello Xabier Altadill 和 Phaser 创始人 Richard Davey 撰写，包含超过 500 页全新、最新的使用 Phaser v3.80 构建游戏的内容。

该书分为 17 章，带你完成创建各种不同游戏的过程。正如书名所暗示的，这允许你通过实际例子来学习。游戏从简单的无尽跑酷游戏开始，然后逐步讲解如何构建射击游戏、平台游戏、益智游戏、Rogue-like 游戏、故事游戏，甚至包括 3D 游戏和多人射击游戏。

除了游戏之外，Richard 还撰写了大量关于 Phaser 核心概念的内容，涵盖了框架使用的术语和约定，以及对游戏对象（任何 Phaser 游戏的生命线）的全面深入探讨。你将了解包括游戏对象工厂、遮罩、自定义混合模式等主题。

该书最后还包括了有关处理资产、流行构建工具、4:44 规则以及参与游戏 jam 的好处等章节，以及一个方便的 Phaser 食谱。

下载这本书，只需注册一个免费的 Phaser 账户。

源代码示例

在 Phaser 的开发过程中，我们创建了数百个示例，提供完整的源代码和资源。这些示例可以在 Phaser 3 实验室上浏览，或者克隆 [示例仓库][examples]。我们不断地添加和完善这些示例。

Hathora

Hathora Cloud 是一个可扩展的在线多人游戏托管平台。你可以使用 Hathora 控制台或 CLI 上传你的服务器项目，然后在全球 10 多个地区动态创建服务器实例。你只需为活跃的比赛/会话持续时间付费。它非常适合处理 WebSocket 连接的 nodejs 服务器，并负责 SSL 终止（用于 wss）和 DDoS 保护。

他们还发布了一个全新教程，介绍如何创建一个可扩展的多人 Phaser 游戏。如果你认为这对你的托管需求有用，可以加入他们的 Discord 服务器联系他们。

Phaser 3 插件大列表

超级社区成员 RexRainbow 多年来一直在发布 Phaser 3 内容，积累了令人印象深刻的目录。你会发现大量插件，从文本输入框等 UI 控件，到 Firebase 支持、有限状态机等等。除了插件之外，还有一套关于 Phaser 3 的综合"笔记"，详细介绍了各种系统的工作原理。这是一个宝贵的资源，值得在 https://rexrainbow.github.io 查看。

创建你的第一个 Phaser 3 示例

Phaser 沙盒：如果你不想在本地测试 Phaser，那么你可以在我们的网站上注册一个免费账户，并使用 Phaser 沙盒。这里你会找到一个完全配置好的在线编辑器，随时可用。否则，请继续阅读...

在本地创建一个 index.html 页面，并将以下代码粘贴到其中：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser-arcade-physics.min.js"></script> 
</head>
<body>

    <script></script>

</body>
</html>

这是一个标准的空白网页。你会注意到有一个 script 标签引入了 Phaser 3 的构建版本，但除此之外，这个网页还没有任何功能。现在让我们设置游戏配置。将以下内容粘贴在 <script></script> 标签之间：

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

config 是一个相当标准的 Phaser 3 游戏配置对象。我们告诉 config 尽可能使用 WebGL 渲染器，将画布大小设置为 800 x 600 像素，启用 Arcade 物理引擎，最后我们告诉它使用 Example 场景。这还没有实现，所以如果你现在运行这段 JavaScript 代码，会出现错误。在 config 上方添加以下内容：

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://labs.phaser.io');
这里我们创建了一个名为`Example`的场景。我们给它定义了两个函数。`preload`函数是用来加载游戏资源的地方。在`preload`中，我们设置了基础URL为Phaser服务器，并加载了3个PNG文件。

`create`函数目前是空的，现在是时候来填充它了：

```javascript
create ()
{
    this.add.image(400, 300, 'sky');

    const particles = this.add.particles(0, 0, 'red', {
        speed: 100,
        scale: { start: 1, end: 0 },
        blendMode: 'ADD'
    });

    const logo = this.physics.add.image(400, 100, 'logo');

    logo.setVelocity(100, 200);
    logo.setBounce(1, 1);
    logo.setCollideWorldBounds(true);

    particles.startFollow(logo);
}

这里我们向游戏中添加了一个天空图像，并创建了一个粒子发射器。scale值表示粒子最初会很大，随着生命周期的推进会逐渐缩小至消失。

创建emitter后，我们添加了一个名为logo的logo图像。由于logo是一个物理图像，默认情况下它会被赋予一个物理体。我们为logo设置了一些属性：速度、反弹（或恢复）以及与世界边界的碰撞。这些属性会使我们的logo在屏幕上弹来弹去。最后，我们让粒子发射器跟随logo - 所以当logo移动时，粒子会从它那里流出。

在浏览器中运行它，你会看到以下效果：

Phaser 3 Demo