游戲開發(fā)移動開發(fā)WebAssembly【免費下載鏈接】minigame-unity-webgl-transform微信小游戲Unity引擎適配器文檔。項目地址https://gitcode.com/GitHub_Trending/mi/minigame-unity-webgl-transform點擊查看免費下載導(dǎo)讀在微信小游戲中使用wx.createVideo創(chuàng)建的視頻默認(rèn)層級最高會直接蓋住整個游戲畫面。但很多游戲場景需要在視頻之上疊加交互元素例如跳過播放按鈕、進(jìn)度提示、玩法引導(dǎo)等。本指南基于minigame-unity-webgl-transform倉庫中的 Demo/WX_Video 視頻 Demo完整講解如何通過underGameViewtrue將視頻渲染到游戲畫布之下讓畫布有內(nèi)容的地方顯示游戲畫面沒內(nèi)容的地方透出視頻同時配套 Unity 側(cè)的相機清屏與透明畫布配置幫助開發(fā)者在 Unity WebGL 轉(zhuǎn)換到微信小游戲的工程中實現(xiàn)視頻打底 游戲交互層疊的效果。讀完本文你將掌握underGameView的底層實現(xiàn)原理、Unity 主相機與TransparentBackground.jslib的配套配置、小游戲運行時video.js的關(guān)鍵改動點以及完整的 C# 調(diào)用示例與常見坑位排查。一、實現(xiàn)原理為什么視頻默認(rèn)會蓋住游戲畫面微信小游戲的視頻組件wx.createVideo本質(zhì)上是原生渲染層組件它運行在小游戲 WebView/Canvas 渲染棧的最上層優(yōu)先級高于 Unity 通過 WebGL 渲染出來的游戲畫面。因此默認(rèn)情況下無論游戲畫面繪制了什么視頻都會完整覆蓋其上。要讓跳過按鈕等游戲 UI 顯示在視頻之上核心思路是改變視頻與畫布的層級關(guān)系創(chuàng)建視頻時傳入?yún)?shù)underGameViewtrue讓視頻在小游戲畫布即游戲畫面之下播放由于視頻此時位于畫布下方游戲畫布必須是部分透明的——畫布上有內(nèi)容不透明像素的地方顯示游戲畫面畫布上透明沒有繪制內(nèi)容的區(qū)域則透出底層的視頻畫面。這就形成了視頻打底、游戲畫面按需覆蓋的合成效果交互按鈕因為繪制在游戲畫布上天然位于視頻之上。從倉庫中的 PlayVideo.cs 可以看到創(chuàng)建視頻時只需顯式聲明underGameView true并配合controls false、autoplay true等參數(shù)即可var video WX.CreateVideo( new WXCreateVideoParam() { src http://wxsnsdy.tc.qq.com/..., // 視頻地址CDN 或本地路徑 controls false, // 隱藏系統(tǒng)控制條 showProgress false, // 不顯示進(jìn)度條 showProgressInControlMode false, autoplay true, // 自動播放 showCenterPlayBtn false, // 隱藏居中播放按鈕 underGameView true, // 關(guān)鍵參數(shù)視頻置于游戲畫面之下 width ((int)systemInfo.screenWidth), // 鋪滿全屏 height ((int)systemInfo.screenHeight), } );二、Unity 側(cè)配置相機清屏與透明畫布僅僅把視頻放到畫布之下還不夠游戲畫面本身必須是可透明的否則一張不透明的黑色/彩色畫面仍然會把視頻完全擋住。因此需要在 Unity 工程中完成兩處配置。2.1 主相機Clear Flags 改為 Solid Color顏色設(shè)為黑色將場景主相機的Clear Flags從Skybox/Solid Color默認(rèn)值改為Solid Color并把背景顏色設(shè)置為黑色。這一步的目的是讓相機清理屏幕時生成的是全透明的畫布底而不是天空盒或其它不透明背景。透明區(qū)域會透出下層視頻Unity 中正常渲染的 UI、模型、粒子等內(nèi)容則按正常層級繪制在視頻之上。倉庫 Demo 的 SampleScene.unity 即按此規(guī)則配置。2.2 引入 TransparentBackground.jslib將 Demo 工程下的 Assets/Plugins/TransparentBackground.jslib 復(fù)制到你的 Unity 工程放置于Assets/Plugins下。它的作用是攔截 WebGL 的glClear調(diào)用跳過只清除 Alpha 通道的清屏操作var LibraryGLClear { glClear: function(mask) { if (mask 0x00004000) { var v GLctx.getParameter(GLctx.COLOR_WRITEMASK); if (GameGlobal.enableTransparentCanvas !v[0] !v[1] !v[2] v[3]) // We are trying to clear alpha only -- skip. return; } GLctx.clear(mask); } }; mergeInto(LibraryManager.library, LibraryGLClear);其邏輯可以這樣理解0x00004000是 WebGL 中g(shù)l.COLOR_BUFFER_BIT的掩碼值只有清除顏色緩沖時才進(jìn)入判斷通過glGetParameter(GL_COLOR_WRITEMASK)讀取當(dāng)前顏色寫入掩碼當(dāng)恰好處于只寫 Alpha、不寫 RGB的狀態(tài)!v[0] !v[1] !v[2] v[3]時說明引擎正在執(zhí)行把 Alpha 清零這類操作配合全局開關(guān)GameGlobal.enableTransparentCanvas僅在視頻需要置底透明畫布開啟時跳過這次清屏從而保留畫布的透明區(qū)域讓視頻透出。需要注意該 jslib 在倉庫中位于Assets/Plugins目錄TransparentBackground.jslib同目錄文件 API_V2 版本 內(nèi)容一致。Unity 導(dǎo)出 WebGL 時會自動將Plugins目錄下的.jslib編譯進(jìn)最終的unity.js無需額外注冊。原文檔特別強調(diào)修改了下清理規(guī)則否則可能導(dǎo)致正常情況下游戲畫面異常即不能無腦跳過所有清屏調(diào)用必須嚴(yán)格限制在透明畫布開啟且僅清 Alpha的條件下否則會影響非視頻場景下的正常渲染。三、小游戲側(cè)配置修改 video.js 聯(lián)動透明畫布開關(guān)GameGlobal.enableTransparentCanvas這個全局開關(guān)需要在小游戲運行時中根據(jù)視頻的創(chuàng)建/銷毀時機自動打開和關(guān)閉。新版導(dǎo)出插件會自動完成該改動若你的工程使用的是舊版插件需要手動修改小游戲包內(nèi)的minigame/unity-sdk/video.js改動點如下WXCreateVideo(conf) { const id new Date().getTime() .toString(32) Math.random().toString(32); // 增加這之間部分代碼開始 const params JSON.parse(conf); if (params.underGameView) { GameGlobal.enableTransparentCanvas true; } videos[id] wx.createVideo(params); // 增加這之間代碼結(jié)束 return id; }, WXVideoAddListener(id, key) { if (videos[id]) { videos[id]key { moduleHelper.send(OnVideoCallback, JSON.stringify({ callbackId: id, errMsg: key, position: e e.position, buffered: e e.buffered, duration: e e.duration, })); if (key onError) { GameGlobal.enableTransparentCanvas false; // 增加這行 console.error(e); } }); } else { console.error(msg, id); } }, WXVideoDestroy(id) { if (videos[id]) { videos[id].destroy(); } else { console.error(msg, id); } GameGlobal.enableTransparentCanvas false; // 增加這行 },三處改動的職責(zé)分別對應(yīng)三個生命周期節(jié)點創(chuàng)建視頻時WXCreateVideo解析conf參數(shù)若包含underGameView則開啟GameGlobal.enableTransparentCanvas true激活透明畫布此時 jslib 中的清屏攔截邏輯才會生效視頻報錯時WXVideoAddListener中key onError關(guān)閉透明畫布開關(guān)避免視頻加載失敗后游戲畫面持續(xù)處于透明狀態(tài)而顯示異常銷毀視頻時WXVideoDestroy同樣關(guān)閉開關(guān)讓畫布恢復(fù)不透明保證后續(xù)正常游戲畫面不受影響。從源碼結(jié)構(gòu)看GameGlobal是微信小游戲運行時的全局對象enableTransparentCanvas作為自定義擴展標(biāo)志位被 Unity 側(cè)注入的TransparentBackground.jslib讀取從而在兩套渲染邏輯小游戲原生視頻層與 Unity WebGL 畫布之間建立協(xié)同。四、完整調(diào)用鏈從 C# 到渲染層的落地倉庫 Demo 給出了一個完整的可運行示例。在 PlayVideo.cs 中視頻創(chuàng)建被放在WX.InitSDK的回調(diào)里保證微信小游戲 SDK 初始化完成后再調(diào)用視頻 APIpublic class PlayVideo : MonoBehaviour { void Start() { var btn this.GetComponentButton(); btn.onClick.AddListener(OnClick); this.AutoPlayVideo(); } private void AutoPlayVideo() { WX.InitSDK((int code) { var systemInfo WX.GetSystemInfoSync(); var video WX.CreateVideo(new WXCreateVideoParam() { src http://wxsnsdy.tc.qq.com/..., controls false, showProgress false, showProgressInControlMode false, autoplay true, showCenterPlayBtn false, underGameView true, width (int)systemInfo.screenWidth, height (int)systemInfo.screenHeight, }); video.OnPlay(() Debug.Log(video on play)); video.OnError(() Debug.Log(video on error)); }); } }關(guān)鍵要點WX.InitSDK是微信小游戲 Unity SDK 的入口視頻類 API 需在其回調(diào)中調(diào)用WXCreateVideoParam中underGameView true是本方案的核心開關(guān)它會通過 SDK 序列化傳入小游戲側(cè)wx.createVideo視頻尺寸直接取GetSystemInfoSync()的screenWidth/screenHeight鋪滿全屏這樣視頻恰好作為底層背景Button組件掛在同一 GameObject 上驗證了視頻之下 游戲 UI 之上的交互層疊點擊按鈕時OnClick正常響應(yīng)而視頻位于畫布之下不會遮擋按鈕。更多視頻 API 的完整參數(shù)說明可參考倉庫 API_V2 示例中的 Video.cs其中underGameView對應(yīng)CreateVideoOption.underGameView與x/y/width/height、controls、autoplay、loop、muted、poster、initialTime、playbackRate、live、objectFit、autoPauseIfNavigate、autoPauseIfOpenNative等 20 余個參數(shù)一同構(gòu)成了wx.createVideo的完整配置面且支持OnEnded/OnError/OnPause/OnPlay/OnProgress/OnTimeUpdate/OnWaiting等回調(diào)綁定。五、常見問題與排查建議結(jié)合倉庫 Design/AudioAndVideo.md 中關(guān)于 WXVideo 的實踐記錄使用underGameView置底方案時需特別注意以下幾點iOS 設(shè)置underGameView后黑屏、有聲音沒畫面需要在微信開發(fā)者工具/客戶端開啟高性能模式這是已知的平臺渲染限制開發(fā)者工具無法播放真機正常開發(fā)者工具暫時存在異?？上戎鲃忧袚Q到3.4.10版本基礎(chǔ)庫驗證視頻加載失敗導(dǎo)致畫面異常onError時必須關(guān)閉GameGlobal.enableTransparentCanvas避免畫布一直保持透明銷毀視頻時同樣需要關(guān)閉開關(guān)VideoPlayer 與 WXVideo 的選擇如果只是單純的全屏視頻播放官方更推薦使用小游戲 API 視頻播放能力wx.createVideoUnity 的VideoPlayer組件也已自動適配微信小游戲但其平臺支持版本有門檻iOS 高性能 需 8.0.55、iOS 高性能需 8.0.41、安卓需 8.0.40、PC/開發(fā)者工具需基礎(chǔ)庫 3.2.1跨域與視頻源iOS 上視頻無法播放時優(yōu)先排查服務(wù)端跨域配置微信小游戲運行環(huán)境要求服務(wù)端允許Origin weapp://wechat-game-runtime的跨域訪問否則會報Access-Control-Allow-Origin錯誤。六、小結(jié)視頻置底 交互層疊的本質(zhì)是打通三個環(huán)節(jié)小游戲側(cè)通過underGameViewtrue把原生視頻層放到畫布之下并用GameGlobal.enableTransparentCanvas控制透明畫布的開關(guān)Unity 側(cè)通過主相機 Solid Color 清屏黑色讓畫布具備透明底再借助TransparentBackground.jslib精確攔截僅清 Alpha的glClear調(diào)用以保留透明區(qū)域C# 側(cè)只需在WX.InitSDK回調(diào)中創(chuàng)建帶underGameView參數(shù)的視頻即可。掌握這條調(diào)用鏈即可在微信小游戲中實現(xiàn)視頻背景 跳過按鈕等常見交互參考實現(xiàn)見倉庫 Demo/WX_Video 工程。贊分享游戲開發(fā)移動開發(fā)WebAssembly【免費下載鏈接】minigame-unity-webgl-transform微信小游戲Unity引擎適配器文檔。項目地址https://gitcode.com/GitHub_Trending/mi/minigame-unity-webgl-transform點擊查看免費下載相關(guān)推薦微信小游戲 Unity 音視頻適配全指南AudioAndVideo 實戰(zhàn)詳解微信小游戲 Unity 音視頻適配全指南AudioAndVideo 實戰(zhàn)詳解 本指南圍繞微信小游戲 Unity 引擎適配器的音視頻適配方案展開核心覆蓋 Un游戲開發(fā)移動開發(fā)WebAssemblyUnity游戲微信小游戲快速適配完整指南微信小游戲Unity WebGL適配方案簡稱Unity WebGL小游戲適配是一套專門為Unity游戲開發(fā)者設(shè)計的完整解決方案。該方案基于WebAssemb游戲開發(fā)移動開發(fā)WebAssemblyUnity游戲移植微信小游戲快速適配完整指南Unity游戲移植微信小游戲快速適配完整指南 想要將現(xiàn)有的Unity游戲快速移植到微信小游戲平臺嗎本指南為您提供一套完整的Unity游戲適配和微信小游戲轉(zhuǎn)換游戲開發(fā)移動開發(fā)WebAssembly上一篇PaddleNLP XLM 模型建模模塊深度解析多語言 Transformer 編碼器與任務(wù)頭實現(xiàn)下一篇Conky與其他開源項目集成打造全棧監(jiān)控系統(tǒng)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考