網易首頁 > 網易號 > 正文申請入駐

打造微信多人聯機小游戲，Sync Relay & Netcode 助你輕松部署

2024-10-31 19:20:25　來源: 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 恢復為默認不激活狀態。

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引擎動向，學習進階開發技能

每一個“在看”，都是我們前進的動力

特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.