Unity中webgl使用避雷要素指南

更新時間：2021年09月03日 11:14:52 作者：LOONGV

這篇文章主要介紹了Unity中webgl使用過程中會踩過的坑，以及如何解決這些問題，有需要的朋友可以借鑒參考下，希望可以對廣大讀者朋友能夠有所幫助

1.不支持ios設(shè)備播放音頻（無論是MP3還是ogg格式）
2.在ios設(shè)備的瀏覽器（無論是Safari 還是微信瀏覽器）
3.發(fā)布到webgl的時候注意所有Text都需要使用自定義的字體
4.若要更改loading界面
5.如果想做微信小程序可以通過laya進行后期制作
6.在本地iis服務(wù)器運行沒有問題
7.在webgl中使用對象池模式可能會出現(xiàn)莫名其妙的狀況
8.在webgl中調(diào)用接口動態(tài)生成元素還有個坑

1.不支持ios設(shè)備播放音頻（無論是MP3還是ogg格式）

目前是通過unity調(diào)用html的Audio標簽播放來實現(xiàn)跨平臺音頻播放的。

首先在Assets文件夾下創(chuàng)建Plugins文件夾，在其中創(chuàng)建externFunction.jslib文件用于調(diào)用js方法，文件內(nèi)容如下：

mergeInto(LibraryManager.library, {
PlayAudios: function (audioname) {
	PlayAudio(Pointer_stringify(audioname));
}
});

之后再Scripts目錄下創(chuàng)建一個C#腳本用于調(diào)用

    /// <summary>
    /// 按照音頻名播放音頻
    /// </summary>
    /// <param name="audioname"></param>
    [DllImport("__Internal")]
    private static extern void PlayAudios(string _audioName);
    /// <summary>
    /// 播放js音頻
    /// </summary>
    /// <param name="_audioName"></param>
    public void PlayJsAudio(string _audioName,bool _play)
    {
         PlayAudios(_audioName,_play);
    }

之后再unity場景中想要播放音頻的時候直接調(diào)用PlayJsAudio（_audioName,true）播放音頻（false為暫停）。

打包到webgl后，在html中添加如下腳本

	function PlayAudio(audioid,isplay) {
		var player = document.getElementById(audioid)
		if(isplay)
		{
			player.play();
		}
		else
		{
			player.pause();
		}
	}

當然也需要添加對應(yīng)的audio標簽想要同時播放幾段音頻就需要創(chuàng)建幾個audio標簽（比如背景音樂一個，觸發(fā)音頻如按鈕一個）

<audio id="bg" preload="auto"><source src="Audios/bg.mp3" type="audio/mpeg"></audio>
<audio id="button" preload="auto"><source src="Audios/button.mp3" type="audio/mpeg"></audio>

完成以上配置后不要忘記在發(fā)布出來的webgl目錄下創(chuàng)建一個Audios文件夾，并將音頻放進去，之后如果要播放背景音樂，則在C#中調(diào)用PlayJsAudio("bg",true)，暫停為PlayJsAudio("bg",false)；

注意IOS設(shè)備的瀏覽器不支持音頻自動播放，為此沒被需求方少抱怨╮(╯▽╰)╭

2.在ios設(shè)備的瀏覽器（無論是Safari 還是微信瀏覽器）

都會出現(xiàn)ui自適應(yīng)的問題，安卓設(shè)備及pc都無問題。

可將Canvas物體上CanvasScalerde UIScaleMode設(shè)置為“ScaleWithScreenSize”，將ReferenceResolution設(shè)置為目標設(shè)備的分辨率（比如x:1440,y:2540），如下圖

若不起作用，將Canvas做如下配置，注意將UI攝像機拖入RenderCamera中

3.發(fā)布到webgl的時候注意所有Text都需要使用自定義的字體

否則所有中文都不會顯示，這里推薦使用思源字體或阿里巴巴字體，這些字體中都有免費商用的，不用擔(dān)心版權(quán)問題。

4.若要更改loading界面

可以直接替換打包后TemplateData文件夾中的圖片，如下所示

若要修改背景顏色，需要更改Build文件夾下面的json文件

若要改成背景圖片，需要將此處改為"backgroundUrl": "圖片相對路徑",如下圖所示，圖片最好放在Build目錄下

5.如果想做微信小程序可以通過laya進行后期制作

或者通過下方工具轉(zhuǎn)換（當前版本不支持videoplayer）

https://github.com/wechat-miniprogram/minigame-unity-webgl-transform

6.在本地iis服務(wù)器運行沒有問題

在線上服務(wù)器運行出現(xiàn)Wasm Memory access out of range 問題，建議換一臺服務(wù)器，應(yīng)該是線上服務(wù)器抽了~~這是真實項目遇到過的情況，在我本地的iis服務(wù)器和騰訊的存儲桶中運行都一點問題沒有，但是發(fā)布到客戶的服務(wù)器后觸發(fā)某button的時候就會報這個錯誤，我當時就提出是服務(wù)器的問題，但是形式比人強，客戶硬是讓我想辦法解決，折騰到凌晨2點多，最后還是換了一臺服務(wù)器，問題立馬就沒了···時隔5天，我再打開一開始發(fā)布到有問題的服務(wù)器上的項目，這個問題已經(jīng)沒有了···

7.在webgl中使用對象池模式可能會出現(xiàn)莫名其妙的狀況

比如根據(jù)接口返回的數(shù)據(jù)生成一批元素的時候，在Editor或者本地測試都沒有問題，但是發(fā)布到服務(wù)器后可能會出現(xiàn)部分元素未生成的情況，經(jīng)過排查接口返回的數(shù)據(jù)是沒有問題的，對象池的邏輯也是沒有問題的；最后停用了對象池，而是每次結(jié)束后都destroy掉所有元素，然后重新生成，這樣就不再出現(xiàn)問題。