《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的Phaser 是一个快速、免费且有趣的开源 HTML5 游戏框架。

Phaser 是一个快速、免费且有趣的开源 HTML5 游戏框架，提供跨桌面和移动 Web 浏览器的 WebGL 和 Canvas 渲染。可以使用 3rd 方工具将游戏编译为 iOS、Android 和本机应用程序。您可以使用 JavaScript 或 TypeScript 进行开发。

安装使用

安装 Web 服务器

我们会推荐WAMP Server或XAMPP，两者都有简单的设置指南。WAMP 专门将一个图标安装到您的系统托盘中，您可以从中停止和重新启动服务，以及修改 Apache 设置，例如为项目创建新的文件夹别名。

操作系统

作为一个本质上的 Unix 环境，OS X 上的可用选项比 Windows 多。但是，如果您想要像 WAMP 这样的“一体式”方法，具有干净且易于使用的界面，那么我们强烈推荐MAMP。

Grunt连接

Grunt是一个非常强大的安装工具，无论您是否将其用作 Web 服务器。从本质上讲，它是一个基于 JavaScript 的任务运行器，允许您自动执行繁琐耗时的任务。例如，我们在 Phaser 中使用它来构建我们的分发脚本。但它也可以使用插件Connect进行配置，以提供本地文件，充当 Web 服务器。

使用 Python 的简单 HTTP 服务器

如果您需要一个快速运行的 Web 服务器，并且不想搞乱设置 Apache 或下载应用程序，那么 Python 可以提供帮助。Python 带有一个简单的内置 HTTP 服务器，它可以提供来自任何本地文件夹的文件。

选择编辑器

您将需要一个编辑器来准备您的 JavaScript 代码。

示例：Sublime Text 这是 Phaser 团队用于构建框架和所有项目的编辑器。它甚至是编写本指南的编辑器。Sublime 应该被认为是一个非常强大的文本编辑器，而不是一个 IDE。

下载 Phaser

Phaser 3 可通过 GitHub、npm 和 CDN 获得：

• 通过https、 ssh 或使用 GitHub Windows或Mac客户端克隆 git 存储库。
• 下载为zip
• 下载构建文件：phaser.js和phaser.min.js

通过npm安装：

npm install phaser

内容分发网络：

Phaser 位于 jsDelivr 上，这是一个“面向开发人员的超快速 CDN”。在您的 html 中包含以下内容：

或缩小版：

Hello World!

设置好编辑器、安装 Web 服务器并下载 Phaser 后，就可以创建一些东西并检查一切是否正常。

您需要发现您的“网络根”在您的机器上的位置。这是服务器在其中查找文件的文件夹。如果您在 Windows 上使用 WAMP，您可以通过单击系统托盘中的 WAMP 图标并从弹出菜单中选择“www 目录”来找到它。其他服务器将有其他确定位置的方法，但从这一点开始，我们将其称为“webroot”。

在 webroot 内部创建一个名为的文件index.html并将以下代码粘贴到其中：

打开您的网络浏览器并加载index.html页面。这可能就像在浏览器中输入localhost/或输入一样简单。127.0.0.1/或者您可能还需要指定端口号，这完全取决于您使用的服务器设置方法。

API 文档

打字稿定义

TypeScript 定义可以在文件types夹中找到。它们也在 中的类型条目中被引用package.json。根据您的项目，您可能需要将以下内容添加到tsconfig.json文件中：

"typeRoots": [
    "./node_modules/phaser/types"
],
"types": [
    "Phaser"
]

游戏状态

装载机

文本

动画片

时间

Tilemaps

Phaser 3 示例

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

这是一个标准的空网页。你会注意到有一个脚本标签正在拉入 Phaser 3 的构建，但除此之外，这个网页还没有做任何事情。现在让我们设置游戏配置。在标签之间粘贴以下内容：

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

config是一个非常标准的 Phaser 3 游戏配置对象。如果可以的话，我们告诉config使用 WebGL 渲染器，将画布设置为 800x600 像素的大小，启用 Arcade Physics，最后调用preload和create函数。preload并且create还没有实现，所以如果你运行这段 JavaScript 代码，你会遇到错误。在 之后添加以下内容config：

var game = new Phaser.Game(config);

function preload ()
{
    this.load.setBaseURL('https://labs.phaser.io');

    this.load.image('sky', 'assets/skies/space3.png');
    this.load.image('logo', 'assets/sprites/phaser3-logo.png');
    this.load.image('red', 'assets/particles/red.png');
}

function create ()
{
}

game是一个使用我们的配置对象的 Phaser Game 实例config。preload我们还为和添加了函数定义create。该preload功能可帮助您轻松地将资产加载到游戏中。在preload中，我们将 Base URL 设置为 Phaser 服务器并加载 3 个 PNG 文件。该create函数是空的，所以是时候填充它了：

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

    var particles = this.add.particles('red');

    var emitter = particles.createEmitter({
        speed: 100,
        scale: { start: 1, end: 0 },
        blendMode: 'ADD'
    });

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

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

    emitter.startFollow(logo);
}

在这里，我们将天空图像添加到游戏中并创建粒子发射器。该scale值意味着粒子最初会很大，随着寿命的延长会缩小到零。

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

在浏览器中运行它，您将看到以下内容：

—END—

开源协议：MIT License

开源地址：
https://github.com/photonstorm/phaser