开源 H5 游戏框架 Phaser，支持 Canvas 和 WebGL 渲染

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

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 中包含以下内容：

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

或缩小版：

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

Hello World!

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

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

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

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

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

    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 ()
    {
        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);
    }
    </script>

</body>
</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 页面并将以下代码粘贴到其中：

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

    <script></script>

</body>
</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 渲染器，将画布设置为 800×600 像素的大小，启用 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 移动时，粒子将从它流出。

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