# Fishnet WebGL

本指南将帮助你使用 [FishNet](https://github.com/FirstGearGames/FishNet)的 Websocket 传输， [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou)，并在 Edgegap 上为一个 Unity 项目创建无头服务器。

你可以在我们的 [GitHub](https://github.com/edgegap/netcode-sample-unity-fishnet)，位于 `Fishnet_v4.1.6R_WebGL` 文件夹下。只要你为其使用相应版本的 Bayou，本指南应适用于任何版本的 Fishnet。

{% hint style="info" %}
由于 FishNet 4.1.6R 版本自带 Edgegap 插件，我们将使用它来自动构建并容器化游戏服务器，尽管也可以通过 Dockerfile 手动完成。

有关该插件的更多信息，你可以阅读我们的文档 [这里](https://docs.edgegap.com/zh/docs/sample-projects/unity-netcodes/broken-reference).

你需要运行 Docker 才能使其正常工作。
{% endhint %}

### Unity 要求

此项目在 Unity 版本 `2021.3.16f1`上测试通过。你需要安装以下模块：

* WebGL Build Support；
* Linux Dedicated Server Build Support；
* Linux Build Support（IL2CPP）。

### 切换传输

在以下位置下载 Bayou 的 Unity 包 [这个 GitHub](https://github.com/FirstGearGames/Bayou/releases)。在游戏项目中通过工具栏导入该包，路径为 `Asset/Import Package/Custom Package...`.

打开 `MainMenu` 位于以下位置的场景 `Assets/SpaceEdge/Scenes`。在 `NetworkManager` gameObject，移除 `Tugboat` 传输组件。将其替换为 `Bayou` 传输，位于 `Asstes/FishNet/Plugins/Bayou`下。记下已设置的端口值，在本例中为 `7770`.

请确保为服务器构建启用 `Start On Headless（无头启动）` 选项。

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-594181325c3fba9f457c57865daad12b3acc32d3%2Fnetwork-manager-setup.png?alt=media" alt=""><figcaption></figcaption></figure>

### 构建游戏服务器与容器化

通过 `Edgegap/Edgegap Hosting` 工具栏菜单打开 Edgegap 插件。验证你的 `Edgegap API Token（Edgegap API 令牌）` ，并为游戏创建或加载一个应用。确保 `端口` 值与 Bayou 传输的值匹配。选择 `WS` 协议，然后输入一个 `New Version Tag（新版本标签）`.

完成正确设置后，点击 `Build and Push（构建并推送）`，这将自动容器化你的游戏服务器，并在短暂等待后在 Edgegap 控制台上创建一个新的应用版本。

### 测试客户端

#### 在编辑器中

回到项目中，选择 `MatchmakingSystem` gameObject 并更改以下字段：

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7e7c88646513c68ea7dd68ba7aba1a40aa1b09d1%2Ffishnet-matchmaking-system.png?alt=media" alt=""><figcaption></figcaption></figure>

* AppName：设置为你在 Edgegap 插件中使用的“Application name”。
* AppVersion：设置为你在 Edgegap 插件中使用的“Version name”。
* AuthHeaderValue：设置为你在 Edgegap 插件中使用的 Edgegap API 令牌。

{% hint style="info" %}
从 API 令牌中移除 `令牌` 这个词，因为我们在 `Awake()` 方法中将其设置为 `MatchmakingSystem`.
{% endhint %}

打开 `MatchmakingSystem` 脚本的身份验证 Header 模式，脚本位于 `Assets/SpaceEdge/Scripts/Systems`下，你也可以在那里更新相同的值。搜索 `"UDP_PORT"` 并将其替换为 `"Game Port"`.

{% hint style="info" %}
此示例的先前版本会通过 Edgegap 仪表板手动创建应用程序，并使用名称 `UDP_PORT` 作为服务器使用的端口。

Edgegap 插件会自动将端口命名为 `Game Port` ，因此我们必须确保更新脚本。否则游戏将无法运行。
{% endhint %}

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-2a6ddd5037990eccf3c62943a9f6cc610ff175e8%2Ffishnet-code.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7a1523917e1509cab8490108ed7a98b44ae5423e%2Fport-name.png?alt=media" alt=""><figcaption></figcaption></figure>

同时确保你取消勾选 `Start On Headless（无头启动）` 选项于该 `NetworkManager` gameObject。

完成后，点击 `Play` 在编辑器中，然后在文本框中输入名称并点击 `Start Game（开始游戏）`。游戏会检查是否有可用服务器；如果没有，会在连接之前自动部署一个。

{% hint style="warning" %}
如果客户端出现 `ConnectionFailed` 错误，可能是因为在 `Start On Headless（无头启动）` 服务器构建 `中未启用`选项，这意味着由于服务器未正确启动，部署未处于可接受连接的状态。请确保启用该选项，然后创建新的容器镜像和应用版本后再试。

也可能是因为应用版本的 `端口名称` 与 `MatchmakingSystem` 脚本中的不一致。请确保两者名称相同，在本例中为 `"Game Port"`，然后再试。
{% endhint %}

#### 在 Itch.io 上

一旦你确认游戏客户端在编辑器中可用，它在 Itch.io 上也应该可用。要将你的游戏上传到那里，你需要在 `Build` Unity 编辑器的界面，在 `File -> Build Settings`中制作一个客户端构建。选择以下选项：

* 设置 `平台` 转向 `WebGL`;
* 打开 `Player Settings`。在 `Player -> Publishing Settings`下，将 `Compression Format` 转向 `设置为 Gzip` 并确保选择了 `Decompression Fallback` 选项。保存这些设置并关闭窗口。

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-d31291cf36a863193c24a856718a791db0c61577%2Fbuild-settings.png?alt=media" alt=""><figcaption></figcaption></figure>

然后点击构建，并选择一个名为 `将` 作为文件目标。将该 `将` 文件夹中的文件压缩为一个 zip 文件夹，并确保它们位于 zip 的根目录。然后你只需将该 zip 文件夹上传到你的 Itch 项目，并确保选择在浏览器中运行文件的选项。随后游戏应与在编辑器中的运行方式相同。