如何构建一个2D Web3游戏

还记得游戏产业的早期吗？那时候的经典2D游戏让人们沉迷于屏幕前数小时。复古游戏至今仍然非常受欢迎，即使现代游戏开发者也在今天创作2D游戏。然而，Web3为游戏产业带来了新的概念，例如玩而赚（Play-to-Earn，P2E）模式，玩家可以通过获得可替代和不可替代通证（NFT）来赚取收益。因此，如果我们将受欢迎的2D游戏与Web3相结合，提供赚钱的潜力，能够将NFT用作游戏内资产等，我们的2D Web3游戏将吸引大量用户。因此，我在这里阐述如何使用正确的Web3技术栈构建一个2D Web3游戏，并在几分钟内完成整个过程。

接下来，我将在React应用程序中引入一个开源可用的2D游戏。此外，为了添加Web3功能，将使用Web3开发平台Moralis。这个平台使我们能够轻松地集成Web3身份验证，使用最流行的Web3钱包MetaMask。此外，借助Moralis的SDK，我们还有机会向我们的2D Web3游戏示例添加其他链上功能。我们还将依赖其他一些出色的工具，如Phaser和Visual Studio Code（VSC），以帮助我们完成项目。如果你对此也很感兴趣，接下来请跟着我的步伐，一起动手完成这个示例项目。通过这样做，您不仅将学会创建一个2D Web3游戏，还将熟悉上述提到的工具。因此，请创建您的免费Moralis账户，我们在后续过程中会用到它。

一、我们的2D Web3游戏示例预览

在开始示例项目之前，先给大家展示一下这个 2D Web3 游戏示例的快速演示。这将帮助您确定是否愿意跟随教程一起动手实践。

首先，用户将会看到一个“开始”按钮的欢迎界面：

1.1. Web3 Game 登录界面

通过点击上面的按钮，用户会收到 MetaMask 扩展的提示，要求签署“使用 Moralis 登录”的消息。这实质上是使用 MetaMask 进行身份验证的方式：

在收到上述签名请求后，用户需要点击“签名”按钮。通过这样做，他们完成了游戏的 Web3 登录过程。

当使用 Moralis 进行 Web3 身份验证时，请记住有不同的实现方式。然而，使用 Moralis 时，一切都尽可能简单。对于 Web dapp（去中心化应用程序），MetaMask 集成是首选工具。另一方面，对于移动 dapp，WalletConnect 是最佳解决方案。尽管如此，Moralis 还提供通过电子邮件和 Web3 社交登录进行 Web3 身份验证的选项。这两个选项都能很好地提高 Web3 用户的接入成功率。

1.2.我们制作的 2D Web3 游戏的玩法

一旦用户确认登录消息，他们将看到游戏的主菜单界面：

接下来，用户需要在屏幕上的任意位置点击以开始游戏。

游戏的目标是在牛仔持枪射击你之前点击（射击）他们。如上面的截图所示，还有背着钱袋的角色。玩家不应该射击他们。此外，顶部的数字表示玩家需要收集的钱袋数量以完成关卡。如果任何一个牛仔在被射击之前射中玩家，游戏就结束了。

现在大家已经了解我们将要创建的内容。需要指出的是，我不会涉及上述游戏的前端部分。我们将使用Phaser，将现有的Web2游戏作为模板，然后仅添加Web3后端功能。

二、使用Phaser和Moralis构建一个2D Web3游戏

正如前面提到的，我将使用Phaser（这是最受欢迎的开源游戏引擎），找到一个已完成的2D游戏。然后，我们将使用最好的Web3后端平台Moralis，将上述的区块链功能整合进去。基本上，我们要做的事情就是把一个2D Web2游戏转换成一个2D Web3游戏。

2.1. 从Phaser获取现有游戏的方法

首先，我们前往Phaser的官方网站。在那里，我们从顶部菜单中选择“示例（Examples）”。在接下来的页面上，我们向下滚动一点，并点击“游戏（Games）”文件夹。从那里，我们选择“Bank Panic”游戏：

既然我们已经确定了一个特定的示例游戏，我们可以使用Phaser在GitHub上提供的代码和资源。因此，请使用顶部菜单中的“下载（Download）”选项：

在“下载”页面上，我们可以下载Phaser：

然后，在下一页上点击“克隆（clone）”选项，以进入Phaser的GitHub页面：

在那里，点击“photonstorm”：

接下来，我们将选择“phaser3-examples”以确保“Bank Panic”游戏文件被包含在内：

在“phaser3-examples”文件夹中，打开“public”文件夹：

然后，在“public”文件夹中，点击“assets”文件夹：

接下来，打开“games”，最后打开“bank-panic”：

当我们查看“bank-panic”文件夹的内容时，我们会发现它包含了游戏正常运行所需的声音、图像和其他文件。因此，我们可以放心地克隆代码。因此，我们返回“phaser3-example”页面，点击“code”，然后点击“Download ZIP”：

2.2. 运用 Visual Studio Code（VSC）来正确进行设置

注：在这个例子中，我们使用 VSC；然而，您可以自由选择您偏爱的代码编辑器。

我们首先创建一个 React 应用模板。我们通过在 VSC 的终端中输入命令 npx create-react-app phaser-moralis 来实现这一点。

同时，请记住 "phaser-moralis" 是我们决定为我们的 dapp 使用的名称。您可以按照我们的示例或使用任何您想要的名称。最后，输入 "yes" 确认 "Ok to proceed? (y)"，以创建我们的 React 应用程序。一旦该文件夹被创建，我们将其添加到我们的 IDE 工作空间中。

然后，选择 "phaser-moralis" 文件夹并点击 "Add"。

现在，我们解压之前下载的 phaser3-examples-master.zip 文件。解压后，我们进入 bank panic 文件夹 (phaser3-examples-master > public > src > games > bank panic)。这是我们示例游戏的场景文件所在的位置。

正如您在上面的截图中所看到的，我们选择除了 main.js 文件之外的所有文件。我们将这些文件移动到我们的 React 应用程序文件夹中的 src 文件夹内的一个新的 scenes 文件夹中（如上面创建的）。

现在，我们已经将示例游戏的场景文件转移了，我们需要对所有的图像和声音文件执行相同的操作。为了做到这一点，我们需要找到 "assets" 文件夹内的 "games" 文件夹下的 "bank panic" 文件夹。然后，我们将整个文件夹复制或移动到我们项目中 "public" 文件夹内的新的 "assets" 文件夹中：

通过移动这些文件，我们实质上将 Phaser 的示例游戏集成到我们的 ReactJS 应用程序中。接下来，我们通过在 VSC 的终端中输入 cd phaser-moralis 命令来进入 phaser-moralis 文件夹。

2.3. 2D Web3 游戏代码解析 - 调整 Phaser 文件

我们首先在 index.html 文件中将标题从 React App 更改为 Phase x React x Moralis。接下来，将App.js 和 index.js 的文件扩展名从 .js 更改为 .jsx。

接下来，我们通过在 index.jsx 文件中添加一个容器来调整代码，我们的画布元素将附加到该容器上。在 <App /> 行的上方，我们添加以下内容：

<div id= “game-container”></div>

此外，我们将上述容器包装在“App”组件周围：

然后，我们打开 App.jsx 文件，在顶部首先导入我们的Phaser文件：

这也是我们安装Phaser的提示，我们可以在VSC的终端中输入 npm i phaser 来安装。接下来，在App.jsx 文件中，我们使用 let game = null; 初始化我们的 game 变量。然后，我们需要添加一些额外的导入并调整 App() 函数。这也是我们通过以下 config 对象来初始化Phaser游戏的地方：

if (!loaded) {
    setLoaded(true);
    const config = {
      type: Phaser.AUTO,
      //gameTitle: "Phaser x Moralis",
      parent: "game-container",
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
      autoFocus: true,
      fps: {
        target: 60,
      },
      physics: {
        default: "arcade",
        arcade: {
          gravity: { y: 200 },
          debug: false,
        },
      },
      backgroundColor: "#282c34",
      scale: {
        mode: Phaser.Scale.ScaleModes.NONE,
      },
      scene: [Boot, Preloader, MainMenu, MainGame],
    };
    // init 2d game (Phaser canvas element)
    if (game === null) {
      // init instance of phaser game as per config
      game = new Phaser.Game(config);
      // listen to in-game events
      // before starting we sign in with wallet
      game.events.on("LOGIN_PLAYER", (event) => {
        console.log("⛓⛓⛓ Login via Web3 Wallet ⛓⛓⛓");
        // trigger wallet authentication
        login();
      });
    }

2.4. 导入Phaser

为了使上述代码正常工作，我们还需要在场景文件（'Boot.js'、'Door.js'、'Game.js'、'MainMenu.js'和'Preloader.js'）中使用 import Phaser from "phaser"; 导入Phaser。此外，我们还需要在 Game.js 文件中分配初始值：

此外，我们还需要在 Preloader.js 和 Boot.js 文件中更改一些文件路径。在前者中，我们将 this.load.setPath 内的 assets/game/bank-panic/ 值更改为 assets/bank-panic/。此外，在 Boot.js 中，我们将 assets/game/bank-panic/loading.png 更改为 assets/bank-panic/loading.png。

2.5. 从2D Web2游戏转变为使用Moralis的2D Web3游戏

经过上述调整，我们拥有一个功能完善的2D游戏。然而，它目前与Web3无关。幸运的是，我们可以使用Moralis无缝地添加各种Web3功能。对于这个示例项目，我们将专注于添加Web3身份验证。

首先，在VSC的终端中使用 npm i react-moralis 命令导入React Moralis。然后，我们回顾 index.jsx文件，在其中使用 import { MoralisProvider } from "react-moralis"; 导入react-moralis。接下来，我们添加一个标准的 Application 函数。后者用作与我们的Moralis服务器进行标准登录。为了使其工作，我们还创建一个新的 .env 文件，其中添加了我们Moralis服务器的详细信息：

下一步是获取我们的Moralis服务器详细信息。如果您对Moralis还不熟悉，以下是获取详细信息的步骤：

• 请登录您的Moralis账户或创建一个免费的Moralis账户。
• 创建一个Moralis服务器。
• 访问服务器的详细信息并复制它们。
• 将服务器的详细信息（服务器URL和应用程序ID）粘贴到“.env”文件中。

接下来，我们对 index.jsx 文件进行了一些小的调整。然后，在 App.jsx 中添加了React-Moralis函数，这使我们可以使用Moralis的SDK。因此，我们可以轻松地使用MetaMask进行身份验证。最后，我们使用Redux将来自我们的2D Web3游戏的事件分发到React hooks，并反之亦然。

注意：务必观看下方的视频，并仔细观察以确保正确掌握所有步骤。

到目前为止，您应该已经成功地构建了自己的2D Web3游戏。借助Phaser、MetaMask和Moralis，在不到三十分钟的时间内，您已经能够实现这一目标。在此过程中，您学会了如何使用Phaser的示例游戏。此外，您还学会了如何完成初始的Moralis设置，并将其用于包含Web3功能。因此，您现在可以运用这些技能来创建自己的2D Web3游戏。然而，您可能还没有足够的信心开始自己的项目。因此，接触其他示例项目可能是您正确的方向。另一方面，您可能希望探索其他区块链开发主题。