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

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

让我们继续这场技术冒险

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

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

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

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

教程视频

教程学习大纲

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

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

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

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

  5. 设置服务器域名

  6. 使用手机扫描二维码后预览测试小游戏

教程操作步骤

本教程的内容同时适用于 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 恢复为默认不激活状态。

打开网易新闻 查看更多图片

5.设置服务器域名

如果此时，想要在手机上扫描二维码进行预览小游戏效果的话，还需要进行下面域名的设置。

可以进入 UOS 官网，在网页上的 QA 的「4. 小程序/小游戏需要用到的域名白名单」这里，找到项目中使用到的 Sync 服务对应的域名「https://s.unity.cn」，然后复制一下域名。

https://uos.unity.cn/doc/others/qa#4

打开网易新闻 查看更多图片

接着可以登录微信小程序页面，然后点击前往「开发管理」->「开发设置」->「服务器域名」。

  • 配置「request合法域名」： https://s.unity.cn

  • 配置「socket合法域名」： wss://wsp.unity.cn:443

6.用手机扫描二维码进行预览测试小游戏

配置完域名后，可以在微信开发者工具中，点击「预览」按钮。然后再手机打开微信，扫描二维码，就可以在手机上运行这个项目进行测试了。

我们可以进行下面的运行测试：

  • 在 Unity 编辑器 中 点击 「Create Host」 ，使用 WSAD 改变 Player 对象的Transform 信息。

  • 在 微信开发者工具中 点击「Join Game as Client」，使用摇杆控制 Player 对象。

  • 再在 手机上移动端 点击「Join Game as Client」，也是使用摇杆控制 Player 对象。

最后，发现在每一个窗口中看到的游戏对象的信息都已经实现了数据同步了。

大家在做微信小游戏的过程中，可以使用 UOS CDN 对你的资源进行上传、拉取和管理。在小游戏中使用 UOS CDN 的用法，可以观看下方的视频进行学习哦！

学习途径

UOS 配套的相关学习教程视频也已同步上传至 Unity 中文课堂和 B 站，搜索 “使用Sync Relay & Netcode轻松打造微信多人联机小游戏”即可找到，欢迎大家前往学习，UOS 更多学习教程持续更新中，敬请期待！

了解更多 UOS 相关信息：

官网：https://uos.unity.cn

技术交流 QQ 群：823878269

公众号：UOS 游戏云服务

Unity Online Services (UOS) 是一个专为游戏开发者设计的一站式游戏云服务平台，提供覆盖游戏全生命周期的开发、运营和推广支持。

Unity 官方微信

第一时间了解Unity引擎动向，学习进阶开发技能

每一个“在看”，都是我们前进的动力