Unity中webgl使用避雷要素指南

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

目前是通過(guò)unity調(diào)用html的Audio標(biāo)簽播放來(lái)實(shí)現(xiàn)跨平臺(tái)音頻播放的。

首先在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)建一個(gè)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場(chǎng)景中想要播放音頻的時(shí)候直接調(diào)用PlayJsAudio（_audioName,true）播放音頻（false為暫停）。

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

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

當(dāng)然也需要添加對(duì)應(yīng)的audio標(biāo)簽想要同時(shí)播放幾段音頻就需要?jiǎng)?chuàng)建幾個(gè)audio標(biāo)簽（比如背景音樂(lè)一個(gè)，觸發(fā)音頻如按鈕一個(gè)）

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ā)布出來(lái)的webgl目錄下創(chuàng)建一個(gè)Audios文件夾，并將音頻放進(jìn)去，之后如果要播放背景音樂(lè)，則在C#中調(diào)用PlayJsAudio("bg",true)，暫停為PlayJsAudio("bg",false)；

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

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

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

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

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

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

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

4.若要更改loading界面

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

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

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

​​​​​​​

5.如果想做微信小程序可以通過(guò)laya進(jìn)行后期制作

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

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

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

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

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

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

8.在webgl中調(diào)用接口動(dòng)態(tài)生成元素還有個(gè)坑

就是如果用戶的網(wǎng)速夠慢、手機(jī)購(gòu)卡，用戶可以連續(xù)觸發(fā)生成功能，導(dǎo)致場(chǎng)景中的元素是設(shè)計(jì)中的兩倍，所以涉及到網(wǎng)絡(luò)的觸發(fā)功能最好加一個(gè)狀態(tài)字段防止用戶多次觸發(fā)。

以上就是Unity中webgl使用避雷要素的詳細(xì)內(nèi)容，更多關(guān)于Unity中webgl使用指南的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！