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