打造微信多人联机小游戏，Sync Relay & Netcode 助你轻松部署|spiderlinebreak|sync|unity|多人联机|小游戏

准备好让你的 Unity 多人联机游戏跨越界限

直击微信小游戏平台了吗？

让我们继续这场技术冒险

将 Sync Relay 的魔力带到微信小游戏世界！

本篇文章是对之前的教程《》的延续，展示如何将一个已经使用 Unity Online Services（UOS）中的 Sync Relay 服务构建的联机游戏示例项目，成功地部署至微信小游戏平台。

本教程中涉及 UOS 服务包括：

游戏数据同步服务 Sync Relay：用于实现游戏房间管理、实时数据同步等网络通信功能

教程视频

教程学习大纲

打开项目工程，设置 Relay Transport 的传输协议类型
切换至 WeiXinMiniGame 平台，设置 WXSDK 打包参数
在微信开发者工具上运行测试小游戏
使用摇杆 Joystick 控制游戏对象
设置服务器域名
使用手机扫描二维码后预览测试小游戏

教程操作步骤

本教程的内容同时适用于 Global Unity Editor、中国版 Unity Editor 、团结引擎，当前先以在团结引擎项目中的使用为示例进行讲解，团结引擎为我们提供了一站式微信小游戏的解决方案。

1. 打开项目工程，设置 Relay Transport 的传输协议类型

1.1 打开项目工程

上一篇教程的项目我们是使用中国版 Unity 的 2022.3 版本来讲解的，大家可以先将你之前的项目工程复制一份，然后使用团结引擎来打开此项目。在这里，我们是用团结引擎的 1.3.1 版本打开项目的。

1.2设置 Relay Transport 的传输协议类型

找到场景中的游戏对象 [NetworkManager]，将 RelayTransport(Netcode) 组件的Transport Type 参数，默认是 UTP 类型，在小游戏平台需要设置为WebSocketSecure 协议类型。

2.切换至 WeiXinMiniGame 平台，设置 WXSDK 打包参数

2.1 切换至 WeiXinMiniGame 平台

在 File → BuildSettings 页面， Platform 选中「WeiXinMiniGame」。

将贴图的压缩格式Texture Compression设置为ASTC并保存，首次切换 ASTC 会转换 Texture 压缩格式，需要较长的时间。开启 ASTC 压缩后，小游戏在移动端运行时可以节省大量内存和显存。

然后，我们点击「Switch Platform」按钮，将项目工程切换到 WeiXinMiniGame 平台。

2.2 安装 WXSDK

切换成小游戏平台后，在 Settings 页面点击按钮「install WXSDK」，安装WXSDK。

安装完成后，可以看到在游戏工程的 Assets 文件夹下有WX-WASM-SDK这个新增文件夹。

2.3 设置 WXSDK 的参数

安装好 WXSDK 后，然后设置 WXSDK 面板的参数，如下面的截图所示：

游戏AppID：可以直接从微信小游戏开发工具里点击 register 去申请正式 AppID。
注册链接：https://mp.weixin.qq.com/wxopen/waregister?action=step1
注册过账号以后，可以在「开发管理」→「开发设置」这里看到自己的 AppID 账号，复制一下 AppID 号填入 WXSDK 的参数中。

小游戏项目名：填写导出的微信小游戏项目名称，这里先写 SyncRelayMiniGame。
游戏方向：选择根据游戏画面选择竖屏还是横屏，这里选择横屏 Landsape。
导出路径：这里大家自行来设置生成微信小游戏工程的位置，后续步骤会需要打开这里的小游戏目录，暂时就先创建一个文件夹 SyncRelayMiniGame_output 来存放了。
首包资源加载方式：由于当前项目只用到了 Sync Relay 服务，没有使用到 CDN 服务，所以先将首包的资源加载方式设置为「小游戏包内」加载。
WebGL2.0(beta)：这里参数打勾。
显示优化建议弹窗：这里先不打勾，后面在微信开发者工具中运行测试项目时，就暂时不让它自动弹出优化提示的窗口。如果需要时，可以再勾选。

2.4 构建小游戏工程

点击「生成并转换」的按钮，开始打包项目，等到转换成功后，会看到小游戏导出路径下的文件如图所示：

3.在微信开发者工具上运行测试小游戏3.1 下载微信开发者工具

如果你还没有下载过微信开发者工具的话，可以前往微信官方网站进行下载微信开发者工具，并安装到本地 PC 上。

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.2 在微信开发者工具中导入小游戏项目

打开安装好的微信开发者工具，选择「小游戏」类型，导入你的项目，「目录」选择之前在 WXSDK 的参数面板中设置的导出路径：SyncRelayMiniGame_output/minigame路径文件夹。注意不要选错了目录哦！

当选择完目录以后，会自动加载填入你在 Unity 编辑器内设置的导出的小游戏项目名称的，不需要自己填写。然后选择你的 AppID，最后点击「创建」按钮即可。

3.3 运行项目进行测试

接着在 Unity 编辑器里，我们点击「Create Host」按钮，以 Host 的身份创建并加入房间，然后使用 WSAD 按键控制生成的 Player 游戏对象。

在微信开发者工具中，以 Client 的身份加入游戏，点击按钮「Join Game as Client」，会看到一个虚拟摇杆出现了，我们可以通过摇杆来控制 Player 对象。

而且看到这两个对象在场景中的 Transform 组件的数据信息都是同步的。

4.使用摇杆 Joystick 控制游戏对象

主要是由于 WSAD 按键在移动端平台上无法使用，所以在项目中，我们提前为大家创建好了一个Joystick，来方便控制 Player 对象的移动和旋转。

4.1 查看 Joystick 资源目录

摇杆相关的预制物体、贴图、脚本等资源都放在了 Joystick Pack 这个文件夹下面。

4.2 UI 对象——Fixed Joystick

文件夹 Joystick Pack/Prefabs 下有一个预制物体对象 Fixed Joystick，已经被提前添加到场景中了，放在了 Canvas 的下面。只是初始的时候处于不激活状态没显示出来，所以我们看不见它。现在激活这个游戏对象来看看！

选中 UI 对象「Fixed Joystick」，找到它的 Image 控件，如果想要更换摇杆的外圈的图片的话，可以在 Source Image 参数这里替换其它的素材图片，也可以在 Color 属性这里更换颜色。同理，也可以对内圈的 Handle 对象更换贴图和颜色。

4.3脚本中实现用摇杆控制游戏对象

再来看看 PlayerMovement.cs 的脚本中与摇杆相关的代码，脚本中首先定义了一个摇杆变量 fixedJoystick。

private FixedJoystick fixedJoystick;

然后在OnNetworkSpawn 函数中查找获取到 Joystick 摇杆对象。并通过宏定义，实现了在编辑器或者 PC 平台上不显示摇杆，在其它平台上才会出现摇杆。

#if UNITY_EDITOR || UNITY_STANDALONE
fixedJoystick.gameObject.SetActive(false);
#else
fixedJoystick.gameObject.SetActive(true);
#endif

接着在FixedUpdate 函数中，也用宏定义实现了可以通过摇杆来控制 Player 的移动和旋转。

private void FixedUpdate()
{
        //此处省略其他代码行......
        
#if UNITY_EDITOR || UNITY_STANDALONE
        transform.position = Vector3.Lerp(transform.position, transform.position + Input.GetAxis("Vertical") * Speed * transform.forward, Time.fixedDeltaTime);
#else
        transform.position = Vector3.Lerp(transform.position, transform.position + fixedJoystick.Vertical * Speed * transform.forward, Time.fixedDeltaTime);
#endif

var rotation = transform.rotation;
var euler = rotation.eulerAngles;

#if UNITY_EDITOR || UNITY_STANDALONE
euler.y += Input.GetAxis("Horizontal") * 90 * RotSpeed * Time.fixedDeltaTime;
#else
        euler.y += fixedJoystick.Horizontal * 90 * RotSpeed * Time.fixedDeltaTime;
#endif

        rotation.eulerAngles = euler;
        transform.rotation = rotation;
        
//此处省略其他代码行......
}

由于默认在 PC 平台上不想显示摇杆，所以我们将场景中的游戏对象 Fixed Joystick 恢复为默认不激活状态。