Mirror WebGL

本指南将帮助你使用 Mirror的 Websocket 传输，并在 Edgegap 上为一个 Unity 项目创建无头服务器。

本指南将使用开源示例项目 Tanks，可在 Mirror 示例中的 Assets/Mirror/Examples/Tanks.

你可以在我们的 GitHub

切换传输

在构建游戏服务器之前，我们首先需要对基础场景做一些更改。

• 打开 Scene.unity ，位于 Assets/Mirror/Examples/Tanks/Scenes;

• 在 NetworkManager gameObject，移除 KcpTransport 脚本并将其替换为 SimpleWebTransport ，位于 Assets/Mirror/Transports/SimpleWeb，同时务必更新 NetworkManager 脚本组件的 Transport 字段为这个新传输。确保 Auto Start Server Build 选项也被选中。

• 根据你所使用的 Mirror 版本，你可能需要更改/更新 NetworkManagerHUD 以便它能与非 KCP 的不同传输一起工作，并允许你在加入服务器前在 HUD 中输入端口值。

记下用于网络通信的端口，被称为 [GAME PORT]。在此情况下，所用端口为 7778.

构建游戏服务器与容器化

为了便于容器化与部署流程，可以使用我们最新版本的 Edgegap Unity 插件（在我们的 GitHub 上）来自动化流程。关于如何使用此插件的更多信息，你可以查看我们的 此最新版本在提供更高灵活性和控制的同时更易使用。您可以先在我们的免费集群上创建匹配器进行早期测试，然后无缝过渡到自己的专用集群以用于线上游戏或不间断测试。.

如果你愿意，也可以按照以下分步说明进行。

当你的游戏准备就绪后，前往 Build Unity 编辑器的界面，在 File -> Build Settings 顶端菜单中。请确保根据你的 Unity 版本选择正确的预设。

• 2021.2 之前的版本：

  • 设置 目标平台 转向 Linux;

  • 设置 架构 转向 x86_64;

  • 勾选 Server Build 选项时，动态注入环境变量。

• 否则：

  • 设置 平台 转向 Dedicated Server;

  • 设置 目标平台 转向 Linux.

然后点击构建，并选择一个名为 linux_server 作为文件目标位置。将本文档中的 linux_server 文件夹转移到第二个空文件夹中，在本文档中将其称为 [SERVER BUILD] 文件夹传输过去。向 Dockerfile 与 boot.sh 文件夹添加以下 [SERVER BUILD] 文件：

Dockerfile

FROM ubuntu:bionic
MAINTAINER <author_detail>

ARG DEBIAN_FRONTEND=noninteractive
ARG docker_version=17.06.0-ce

RUN
    apt-get update && \
    apt-get install -y libglu1 xvfb libxcursor1 ca-certificates && \
    update-ca-certificates && \
    apt-get clean

EXPOSE 7778/TCP

COPY linux_server/  /root/linux_server/
COPY boot.sh        /boot.sh

WORKDIR /root/
ENTRYPOINT ["/bin/bash", "/boot.sh"]

boot.sh

xvfb-run --auto-servernum --server-args='-screen 0 640x480x24:32' /root/linux_server/[YOUR GAME].x86_64 -batchmode -nographics

请确保将 [YOUR GAME] 占位符替换为生成文件的名称

然后，在 [SERVER BUILD] 文件夹中启动命令提示符；运行以下 Docker 命令以为你的构建创建镜像并将其推送到私有仓库：

对于 ARM CPU（Mac M1、M2 等）用户，请参阅 专用页面.

在 Linux 上使用

# 构建镜像
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# 登录，随后会提示输入密码
docker login -u '<REGISTRY_USERNAME>' <REGISTRY_URL>

# 为镜像添加另一个与仓库对应的标签
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

# 推送镜像
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

使用 cmd

# 构建镜像
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# 登录，随后会提示输入密码
docker login -u <REGISTRY_USERNAME> <REGISTRY_URL>

# 为镜像添加另一个与仓库对应的标签
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

# 推送镜像
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

使用 Powershell

# 构建镜像
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

# 登录，随后会提示输入密码
docker login -u '<REGISTRY_USERNAME>' <REGISTRY_URL>

# 为镜像添加另一个与仓库对应的标签
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

# 推送镜像
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

将服务器部署到 Edgegap

登录 Edgegap 仪表板后，导航到 Applications & Games 页面。点击 Create New 按钮进入应用程序表单。以下是各字段及其正确填写方式：

• Application name：可以是任何你希望使用的醒目名称，便于在其他应用中轻松识别你的应用。

• Image：可以是任何你希望使用的特定图像，以便在其他应用中轻松识别你的应用。

• Version name：你可能希望使用版本名称来描述你正在部署的版本范围。例如“demo”、“production”、“v1”、“v2”。

• Container：

  • Registry：“[URL]”，其中 [URL] 是你可以在容器仓库页面显示的凭据中的值。

  • Image repository：“[PROJECT]/[YOUR GAME]”，其中 [PROJECT] 和 [YOUR GAME] 是你之前推送 docker 镜像时使用的值。

  • Tag：“[TAG]”，其中 [TAG] 是你之前推送 docker 镜像时使用的值。

  • 勾选“Using a private repository”

  • Private registry username：“[USERNAME]”，其中 [USERNAME] 是你凭据中的值。

  • Private registry token：“[TOKEN]”，其中 [TOKEN] 是你凭据中的值。

  • Requirements：保持默认。

  • 端口：点击 + Add port 链接以添加新端口，并添加以下条目：

    • 7778 - WS - 启用 TLS 升级（Beta）

如果你使用 WSS 选项，务必启用 TLS 升级 选项。否则，你会在 Edgegap 仪表板的容器日志中遇到类似如下的错误。

First bytes from client was not 'GET' for handshake, instead was 16-03-01

创建应用后，你可以按下 Deploy（部署） 按钮以继续部署你的游戏服务器。一旦你的部署最新状态设为 Ready，你就可以使用游戏的客户端版本连接到服务器。记下 Host URL，以及在部署的端口映射选项卡中的 外部端口 （对公众可用）。

测试客户端

在编辑器中

回到 Unity 编辑器的坦克场景中，选择 NetworkManager 游戏对象，并更改以下设置：

• 在 Network Manager 组件：

  • 将 Network Address 为服务器部署的 Host URL；

  • 取消选中 Auto Start Server Build 选项时，动态注入环境变量。

• 在 Simple Web Transport 组件：

  • 将 Port 的值为 Edgegap 部署的 外部端口 例如： 32821;

  • 确保 Client Use WSS 选项已启用。

完成后，点击 Play 在编辑器中，然后点击 客户端 按钮；稍等片刻后你将连接到服务器并能开始游戏。

在 Itch.io 上

要将你的游戏客户端放到 Itch 上，你需要进行客户端构建；你需要为你的 Unity 版本安装 WebGL Build Support 模块来完成此操作。完成后，回到 Build Unity 编辑器的界面，在 File -> Build Settings，并选择以下选项：

• 设置 平台 转向 WebGL;

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

然后点击构建，并选择一个名为 将 作为文件目标位置。将本文档中的 将 文件夹转移到第二个空文件夹中，在本文档中将其称为 [CLIENT BUILD] 文件夹。

当你的游戏构建完成后，将该 将 文件夹内的文件压缩为一个 zip 压缩包，并确保它们位于压缩包的根目录。然后只需将该 zip 压缩包上传到你的 Itch 项目，且务必选择在浏览器中运行的选项。启动游戏后，只需确保 HUD 中的网络地址和端口值设置正确，然后点击 客户端 按钮开始游戏。

在 Edgegap 上托管客户端

甚至可以在 Edgegap 上托管你的游戏客户端！为此，添加以下 Dockerfile 与 nginx.conf 文件夹添加以下 [CLIENT BUILD] 文件：

Dockerfile

FROM nginx:alpine
MAINTAINER <author_detail>

COPY build/ /usr/share/nginx/html
copy nginx.conf /etc/nginx/

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
worker_connections  1024;
}


http {
include       /etc/nginx/mime.types;
default_type  application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;
#tcp_nopush     on;

keepalive_timeout  65;

#gzip  on;

include /etc/nginx/conf.d/*.conf;

server {
# 在 http 服务器配置中添加如下配置
# ...

    # 磁盘上的 Brotli 预压缩数据文件应在启用压缩的情况下提供：
    location ~ .+\.(data|symbols\.json)\.br$ {
        # 因为该文件已在磁盘上预压缩，对其禁用按需压缩。
        # 否则 nginx 会尝试进行二次压缩。
        gzip off;
        add_header Content-Encoding br;
        default_type application/octet-stream;
    }

    # 磁盘上的 Brotli 预压缩 JavaScript 代码文件：
    location ~ .+\.js\.br$ {
        gzip off; # 不要对已压缩的文件尝试动态 gzip 压缩
        add_header Content-Encoding br;
        default_type application/javascript;
    }

    # 磁盘上的 Brotli 预压缩 WebAssembly 文件：
    location ~ .+\.wasm\.br$ {
        gzip off; # 不要对已压缩的文件尝试动态 gzip 压缩
        add_header Content-Encoding br;
        # 通过为 Wasm 文件指定正确的 MIME 类型来启用流式 WebAssembly 编译
        # Wasm 文件。
        default_type application/wasm;
    }

    # 磁盘上的 gzip 预压缩数据文件应在启用压缩的情况下提供：
    location ~ .+\.(data|symbols\.json)\.gz$ {
        gzip off; # 不要对已压缩的文件尝试动态 gzip 压缩
        add_header Content-Encoding gzip;
        default_type application/octet-stream;
    }

    # 磁盘上的 gzip 预压缩 JavaScript 代码文件：
    location ~ .+\.js\.gz$ {
        gzip off; # 不要对已压缩的文件尝试动态 gzip 压缩
        add_header Content-Encoding gzip;
        default_type application/javascript;
    }

    # 磁盘上的 gzip 预压缩 WebAssembly 文件：
    location ~ .+\.wasm\.gz$ {
        gzip off; # 不要对已压缩的文件尝试动态 gzip 压缩
        add_header Content-Encoding gzip;
        # 通过为 Wasm 文件指定正确的 MIME 类型来启用流式 WebAssembly 编译
        # Wasm 文件。
        default_type application/wasm;
    }
}
}

继续使用 与之前相同的 Docker 命令 来构建并推送你的游戏客户端镜像到私有仓库，但需在 [CLIENT BUILD] 文件夹中打开的命令窗口中执行。务必使用与服务器不同的镜像名称。

然后，在 Edgegap 仪表板上为你的客户端创建一个新应用，设置如下：

• Application name：可以是任何你希望使用的醒目名称，便于在其他应用中轻松识别你的应用。

• Image：可以是任何你希望使用的特定图像，以便在其他应用中轻松识别你的应用。

• Version name：你可能希望使用版本名称来描述你正在部署的版本范围。例如“demo”、“production”、“v1”、“v2”。

• Container：

  • Registry：“[URL]”，其中 [URL] 是你可以在容器仓库页面显示的凭据中的值。

  • Image repository：“[PROJECT]/[YOUR GAME]”，其中 [PROJECT] 和 [YOUR GAME] 是你之前推送 docker 镜像时使用的值。

  • Tag：“[TAG]”，其中 [TAG] 是你之前推送 docker 镜像时使用的值。

  • 勾选“Using a private repository”

  • Private registry username：“[USERNAME]”，其中 [USERNAME] 是你凭据中的值。

  • Private registry token：“[TOKEN]”，其中 [TOKEN] 是你凭据中的值。

  • Requirements：保持默认。

  • 端口：点击 + Add port 链接以添加新端口，并添加以下条目：

    • 80 - HTTPS

创建应用后，你可以按下 Deploy（部署） 按钮以继续部署你的游戏客户端。当服务器和客户端部署都设为 Ready后，打开游戏客户端的 Host URL，在指定的 外部端口 中用浏览器访问，在游戏的 HUD 中设置正确的值后即可开始游玩！

如果你需要更多关于 Mirror 集成和 websocket 的信息，你可以参考他们的 此最新版本在提供更高灵活性和控制的同时更易使用。您可以先在我们的免费集群上创建匹配器进行早期测试，然后无缝过渡到自己的专用集群以用于线上游戏或不间断测试。.