倒计时7天！MoonBit 游戏挑战赛即将开启！

news2024/9/21 20:46:31

基于 Wasm4 框架的 MoonBit 游戏开发指南

MoonBit 即将面向全国举办“编程创新挑战赛”，并包含游戏赛道。本教程将介绍本次比赛中使用的框架 Wasm4，以及如何使用 MoonBit 在 Wasm4 框架中编写游戏。相关赛事详情见文末。

在这里插入图片描述

如果你曾访问过 mooncakes 或我们官网的库，你可能已经注意到我们发布了一个名为 wasm4的包以及一个新的演示项目 Wasm4 Snake。今天我们将向大家介绍这个出色的游戏开发框架，并演示如何使用 MoonBit 开发。

什么是 Wasm4

WASM-4 是一个使用 WebAssembly 构建复古风格游戏的框架。它提供了一个 160 x 160 像素的游戏主机，内存少于 64K。通过使用 WebAssembly 这一指令集的新标准，这些游戏能够在所有网页浏览器上运行，甚至可以在一些低端设备上运行。任何能够编译为 WebAssembly 的编程语言都可以用于开发游戏。随着 MoonBit Wasm4 SDK 的发布，现在开发者也能使用 MoonBit 轻松开发 Wasm4 游戏。

本教程将详细介绍如何使用 MoonBit 制作你的第一款 Wasm4 小游戏。

开发教程

MoonBit 库支持实时重载，你可以在我们的云 IDE 中试玩官方提供的 Wasm4 贪吃蛇游戏。通过 MoonBit 提供的云 IDE，您可以直接在 gallery 上体验和开发游戏，无需任何安装步骤！👉 gallery：https://www.moonbitlang.cn/gallery/wasm4-snake/

如果您在本地端开发，请先安装：
Node.js
MoonBit 工具链

创建项目

在当前目录下使用 MoonBit 创建一个新项目，并使用 npm 安装 wasm4。

moon new --user moonbit --name demo --lib --path .
npm install -D wasm4

完成后，你将看到如下的目录结构（node_modules 目录未列在内）：

.
├── .gitignore
├── lib
│  ├── hello.mbt
│  ├── hello_test.mbt
│  └── moon.pkg.json
├── moon.mod.json
├── moon.pkg.json
├── package-lock.json
├── package.json
├── README.md
└── top.mbt

其中 moon.mod.json 定义了整个项目的配置，moon.pkg.json 则定义了每个包的配置。top.mbt 将作为游戏的主要入口文件，我们可以在 lib 目录中编写辅助函数，而 hello_test.mbt 提供了一个黑箱测试的示例。在这个示例中，我们将不使用 lib 目录。

添加 Wasm4 依赖

在创建项目后，我们需要添加 moonbitlang/wasm4依赖：

moon update && moon add moonbitlang/wasm4

这将导致 moon.mod.json 变更为如下内容（以当前版本为例）：

{
  "name": "moonbit/demo",
  "version": "0.1.0",
  "deps": {
    "moonbitlang/wasm4": "0.2.0"
  },
  "readme": "README.md",
  "repository": "",
  "license": "Apache-2.0",
  "keywords": [],
  "description": ""
}

同时，还需要将 moon.pkg.json 修改如下，以满足要求：

{
  "import": [
    "moonbitlang/wasm4"
  ],
  "link": {
    "wasm": {
      "exports": [
        "start",
        "update"
      ],
      "import-memory": {
        "module": "env",
        "name": "memory"
      },
      "heap-start-address": 6560
    }
  }
}

在这一步有几点需要注意：

我们将 moonbitlang/wasm4/lib 包导入为 wasm4，所以需要使用 @wasm4 修饰符来调用函数和类型。
我们将此包配置为 Wasm 后端的链接目标，并进行了以下设置：
- 按照 Wasm4 的要求，导出 start 和 update 函数。
- 导入名为 env 模块中的 memory 内存，以符合 Wasm4 的 ABI 规范。
- 为了与 Wasm4 的 ABI 兼容，将 MoonBit 的堆内存起始地址设为 6560。低于 6560（0x19a0）的内存空间将保留给 Wasm4 使用。

相应地，我们将修改 top.mbt ：

pub fn start() -> Unit {

}

pub fn update() -> Unit {

}

现在，可以通过以下命令执行：

moon build --target wasm
npx wasm4 run target/wasm/release/build/demo.wasm

如有需要调试并查看带有函数名的堆栈跟踪信息，也可以使用调试模式：

moon build --target wasm -g
npx wasm4 run target/wasm/debug/build/demo.wasm

在这里插入图片描述

在这一步，浏览器会自动打开并显示游戏画面。接下来，让我们开始添加游戏内容吧！

示例：移动方块

首先，在屏幕上绘制一个方块：

pub fn start() -> Unit {

}

pub fn update() -> Unit {
  @wasm4.set_draw_colors(index=1, 2)
  @wasm4.rect(0, 0, 80, 80)
}

在这里插入图片描述

现在，你应该看到这样的画面。Wasm4 提供了四个调色板和四种绘图颜色。根据具体的 API，将使用相应的绘图颜色。这里的操作是我们将绘图颜色 1 设置为第二个调色板的颜色，然后从位置 (0, 0)开始绘制一个 80 x 80 的矩形。请记住，在编程世界中，显示坐标的原点位于左上角，y 轴方向朝下。

moonbitlang/wasm4 提供了一个高级抽象，使你可以轻松编写代码。为了避免混淆，绘图颜色和调色板的索引从 1 开始。你还可以设置 160 x 160 像素中的每一个像素。有关这一步的设置请参阅官方 Wasm4 document 和 MoonBit 的 SDK API。

现在屏幕上显示了一个静止的方块，但毕竟我们是在开发游戏，所以它最好是能动起来。start 函数将在初始化期间调用一次，而 update 函数将以 60Hz 的频率被调用。因此要让方块移动起来，我们可以这样编写代码：

struct Position {
  mut x : Int
  mut y : Int
}

let pos : Position = { x: 0, y: 0 }

pub fn update() -> Unit {
  if pos.x + 80 <= 160 {
    pos.x += 1
  }
  @wasm4.set_draw_colors(index=1, 2)
  @wasm4.rect(pos.x, pos.y, 80, 80)
}

然后它将变成这样（实际的移动速度会比图上显示的速度更快）：

在这里插入图片描述

操纵方块

Wasm4 提供了两个按钮（X 和 Z）以及四个方向按钮。让我们尝试让方块根据用户的输入移动吧！

pub fn update() -> Unit {
  if @wasm4.get_gamepad(index=1).button_right && pos.x + 80 < 160 {
    pos.x += 1
  } else if @wasm4.get_gamepad(index=1).button_down && pos.y + 80 < 160 {
    pos.y += 1
  } else if @wasm4.get_gamepad(index=1).button_left && pos.x >= 0 {
    pos.x -= 1
  } else if @wasm4.get_gamepad(index=1).button_up && pos.y >= 0 {
    pos.y -= 1
  }
  @wasm4.set_draw_colors(index=1, 2)
  @wasm4.rect(pos.x, pos.y, 80, 80)
}