Unity3D打包WebGL項目


    公司原本的手游試水轉頁游,由於是Unity3D項目,於是選擇了打包WebGL的方式,把遇到的一些問題記錄一下,方便其他有相關需求的朋友,也方便自己查詢。

Unity3D WebGL官方介紹

    https://docs.unity3d.com/Manual/webgl.html

    需要先看一遍,介紹了瀏覽器兼容性、內存相關、網絡相關、與頁面javascript交互等知識。

AssetBundle

    首先一個問題是要改變游戲加載的方式,原本只是打成一個包即可,下載后安裝到手機里,項目里也有打包AssetBundle的方案,不過好像沒用(?)(我是后接手的,對過去的東西不太了解)。而頁游不可能加載一個完整包,測試了下打出來的包得有小200MB。。所以必須使用AssetBundle,讓主程序盡可能小,而且手游和頁游的AssetBundle使用方法也不同,手游在啟動游戲后檢查資源文件的列表和版本,更新文件到本地供游戲使用,而頁游會用到瀏覽器緩存,不能一上來就全部加載,只能逐步加載所需資源,不然體驗很差。

    最終修改完后的主程序大概15MB左右,打出來的包還是大了點,應該還能再縮減一點,經過各種壓縮后的AssetBundle資源文件總共大概110MB多,犧牲了一點畫質,不過也沒有辦法。一般貼圖(如場景、特效等)壓縮參數High Quality 30,角色需要根據所需精修程度來定,UI圖片、Atlas圖集等壓縮參數High Quality 80-90,這個不能壓太狠,不然畫面慘不忍睹。

幾個用到的插件和代碼

    https://github.com/sta/websocket-sharp

    網絡連接需要改用WebSocket,使用的這個庫,再改改自己的相關代碼,服務器也需要進行相關調整。不過這個庫提供的Unity Asset Store上的插件好像已經無法訪問了。。

    https://github.com/kongregate/Unity-WebGL-Utilities

    來處理緩存問題和查看游戲內存占用。順便提一句,Unity 2018.2正式支持WebAssembly后使用WebAssembly可以不用像使用asm時需要將打包參數里的內存使用設定在比較大的值,因為它可以在運行時動態增長,但是需要相對新一點的瀏覽器內核支持才行,所以由於國內的游戲環境所限,暫時先不考慮了。。

    https://blog.csdn.net/blog_lee/article/details/79173141 Unity WebGL 實現中文IME輸入

    https://github.com/unity3d-jp/WebGLNativeInputField

    打包后的WebGL端是用不了輸入法的。。這里有一個解決方案,原本的插件顯示方式不太好,這篇文章的作者進行了修改和優化,雖然效果和游戲內置插件比還是遜色了些,不過算是可用了。

幾個問題

    需要自己寫代碼把非內置的、用到的shader添加到Project Settings - Graphics - Always Included Shaders里,不然啟動游戲后會滿屏粉紅色。

    Uncaught TypeError: this.decompress is not a function 遇到這個報錯的時候像這個帖子里提到的修改下UnityLoader.js代碼:

var options = ["this.require = ",decompressor.require,"; var vv = this;this.decompress = ",decompressor.decompress,"; this.onmessage = ",function(e){var t={id:e.data.id,decompressed:vv.decompress(e.data.compressed)};postMessage(t,t.decompressed?[t.decompressed.buffer]:[])},"; postMessage({ ready: true });"];

    TypeError: Cannot read property 'enumerateDevices' of undefined 這是最近在接QQ游戲大廳時遇到的,居然還是Chrome43的內核,真古老。。開發者平台也不太好用,吐槽一下。這個方法好像是攝像頭和麥克風相關的,Chrome45以后加入的,反正也用不上,直接搜了下Unity3D打包工具的代碼(Unity\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\prejs\MediaDevices.js和BuildTools\lib\UnityNativeJs\UnityNative.js不知道是不是都有用),把邏輯改了一下(感覺原本邏輯也是有問題?),再打包就不報錯了。

 

    目前使用的是Unity3D 5.6.6版本,暫時想到的就這些了,以后如果有問題再繼續記錄。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM