本教程前一部分中，我们学习如何测试插件的不同特性。如果您错过那部分内容，请首先重读一遍。现在，是时候在适当的 Phaser 3 游戏中使用它了。本教程中，我们将采取现有的 Phaser 游戏，并通过执行游戏网络货币化插件进行操作。

在我们开始之前，您可以玩 3 个糖果! 游戏，它是我们特别为该教程系列制作的游戏。本文提供完整的源代码，我们将其作为如何货币化 Phaser 3 游戏的例子。

下载游戏文件

若要开始，请下载或查看游戏网络货币化 GitHub repo。如果您习惯使用 git，就可以通过以下网址浏览：

https://github.com/photonstorm/gamewebmonetization.git

或者 ssh：

git@github.com:photonstorm/gamewebmonetization.git

如果您愿意，您可以下载整个 repo 的 zip 文件

一旦文件下载到您的电脑，就可以在 tutorial/examples/3Candies 文件夹中找到游戏样本。

将该文件夹拖放到 Visual Studio Code 或所选的编辑器中，这样就可以轻松查看各类文件的源代码。

项目结构

在游戏文件夹中，我们可以看到 index.html 文件，以及 src 和 phaser 文件夹。一切都已预先配置等待运行，所以我们进入 src 文件夹。

src/plugins 文件件内，您会看到一个文件夹，里面有游戏网络货币化插件。

此游戏分为 4 个相位器场景：

1. 介绍 - 介绍信息和插件检查。
2. 背景场景 - 游戏背后的滚动背景。
3. 菜单 - 主菜单。
4. 主场景 - 游戏本身。

还有另一个重要的文件：src/global_vars.js：

此文件包含为了修改游戏本身，您可以轻易改变的所有变量。如果您在编辑器中打开该文件，就会看到存储插件配置的注释部分。

还会看到 background_selected 的对象。这里，active 属性设置为 normal。这样设置可以控制游戏是否在网络货币化模式下运行，并且菜单和背景场景用该设置来显示不同游戏背景。

您可以通过编辑 normal 到 premium，来查看玩游戏时的差异，而无需激活货币化。但是，在继续学习本教程前，请确保将其设置为 normal。

添加货币化福利

如果玩家网络货币化我们的游戏，我们将为他们添加以下福利：

• “感谢您！”介绍信息。
• 选择将背景变更为多彩背景。
• 他们在游戏中获得 1 个额外生命。

使用选择的网络服务器打开 index.html 运行游戏。和先前一样，我们使用 VS Code Live Server 扩展程序。如果打开浏览器，就会看到游戏已经开始：

我们在游戏中添加一个介绍界面。这是因为网络货币化 API 可能需要几秒钟进行谈判，这段时间足以向玩家展示关于其福利的短消息。

导入插件

现在需要给游戏添加插件了。

编辑 global_vars.js 文件，在文件顶部导入插件，然后创建插件实例：

import { GameWebMonetization } from "./plugins/GameWebMonetization/GameWebMonetization.js";

// Monetization config
export const gamewebmonetization = new GameWebMonetization({
    paymentPointer: '$ilp.uphold.com/zdXzL8aWJ4ii'
});

切记，将上面的代码直接添加到 CandyGrid 导入语句下方。

添加的代码应当像这样：

插件已导入和创建，我们的支付指示器设置完毕。现在我们需要在 scenes/Intro.js 文件中启动插件。

编辑 Intro.js，导入插件实例，我们就会看到：

import { gamewebmonetization } from "../global_vars.js";

正如从先前教程中了解到的，插件需要调用 start 方法，才能执行任何操作。我们采用屏幕 init 方法来执行此操作。

在 init 开始添加以下代码行：

gamewebmonetization.start();

因此，看起来是这样：

    init ()
    {
        gamewebmonetization.start();

        this.cameras.main.fadeIn(1000, 0, 0, 0);

        this.changingScene = true;

使用 import 和 start() 调用，您的代码现在应该像这样：

在浏览器中重启游戏，如果有 Coil 在运行，会看到游戏已货币化：

添加玩家福利

开始货币化固然不错，但现在我们应该开始为支持我们的玩家提供一些福利。首先，我们来向他们发送“感谢您”消息。

在 assets 文件夹中，会看到两个 PNG： intro.png 和 introthanks.png:

我们根据 API 状态编辑代码，从而显示正确代码。

回到 intro .js 文件内部，向下滚动到 create 方法内部，在其中添加 intro 图片：

const intro = this.add.image(x, 240, 'intro');

我们使用插件 START事件，来改变此纹理。我们已经加载所有需要的图片，所以我们只需要一个事件监听器，并对其进行相应操作：

const intro = this.add.image(x, 240, 'intro');

// Plugin here
gamewebmonetization.on("start", () => {
    intro.setTexture('introthanks');
});

回到游戏，看看会发生什么：

事件触发时，介绍纹理更改为“感谢您！”版本。现在让玩家选择背景。

变更到高级背景

进入游戏主菜单时，会看到底部的两个按钮。玩家使用这两个按钮，可以在标准和高级背景之间切换。只有玩家网络货币化的情况下，才能选择高级背景。如果未网络货币化，将向他们显示一条提醒消息。

您可能还记得在本教程第 3 部分中，插件提供名为 isMonetized 的布尔属性。我们可以通过阅读这部分内容，了解是否应该为玩家同时启用这两个按钮。

与其他场景相同，我们需要导入插件，还要导入 background_selected 对象。这样操作会存储我们通过按钮选择的背景：

import { background_selected, gamewebmonetization } from "../global_vars.js";

们现在可以看到 isMonetized 的布尔值，如果玩家未货币化，就会给高级背景按钮一个较小的 α 值。在 premiumBackgroundButton.setInteractive({ useHandCursor: true }); 代码行后添加以下内容：

if (!gamewebmonetization.isMonetized)
{
    premiumBackgroundButton.setAlpha(0.9);
}

最后进行的更改是填充高级按钮 POINTER_DOWN 处理程序。当前看起来是这样：

premiumBackgroundButton.on('pointerdown', (pointer, x, y, event) => {

    this.popfx.play();

    event.stopPropagation();

});

点击上述所有代码时，就会播放音效。我们将检查货币化状态，并更新按钮或显示提醒。将上述代码变更为以下代码：

premiumBackgroundButton.on('pointerdown', (pointer, x, y, event) => {

    this.popfx.play();

    if (gamewebmonetization.isMonetized)
    {
        this.isPremium = true;

        normalBackgroundButton.setTexture('normal_background-button');
        premiumBackgroundButton.setTexture('premium_background-button-selected');
    }
    else
    {
        alert('You need the plugin!');
    }

    event.stopPropagation();

});

现在如果再次玩游戏，就会看到有一个选项，通过点击两个按钮改变背景：

额外生命

我们的最终玩家福利是给予他们额外生命。

在编辑器中打开 scenes/MainScene.js 文件。在 create 方法中，会看到以下代码：

// Lifes
this.lifes = new Lifes(this, this.isMonetized);

您可以看到，当 Lifes 游戏对象被创建时，该游戏接受 isMonetized 布尔值作为参数。可以通过传递 true 或 false 而不是传递该布尔值来自己进行测试。

转到 init 方法，并变更此行代码：

this.isMonetized = false;

变更为：

this.isMonetized = gamewebmonetization.isMonetized;

通过变更，主游戏现在将检测 API 是否货币化：

如果开始游戏，会看到现在有 3 条命，其中一条命是金子。这是我们给予玩家的额外生命：

正如您所看到的，使用游戏网络货币化插件有多种可能性。我们只是在这里提到一些想法，但您希望如何奖励玩家，这真的永无止境。或许，甚至可以考虑在实际游戏中显示玩家付给您的钱，或者金额越大，他们得到的福利就越多的信息？完全由您决定。