|
1.內置的video player 無法播放。（可以使用AVPro 播放）
2.多線程
3.socket(可以用UnityWebRequest或websocket)
4.不支持dynamic類型，可以使用object。
5.不支持ComputeShader： SystemInfo.supportsComputeShaders
二.注意事項
1.播放聲音
要去掉AutoPlay
2.跨域
參考1
參考2
官網
web.config添加
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, HEAD, OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true"/>
<add name="Access-Control-Allow-Headers" value="X-Requested-With, origin, content-type,Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time" />
</customHeaders>
</httpProtocol>
3.發(fā)布http or https?
當發(fā)布到https上時程序中訪問http的都會被改成https,這時候一般就報錯了。。。
4.包體大小
注意工程中盡量不用Resources文件夾，不然打包的時候會導致包體過大。因為放在該文件夾下的東西都會被打包。
| 是否包含Resources | build包體大小 |
|---|
| 包含Resources | 14M | | 無Resources | 12.7M | | 無Resource+Assembly Definitions | 8.93M |
5.Odin
有的類型在WebGL平臺并不支持序列化，如果你使用了Odin就需要在打包前生成AOT:
6.T序列化失敗
T序列化失敗，System.Reflection.Emit.DynamicMethod::.ctor
把序列化工具換成Json .Net For Unity
三.參考資料
hi,WebGL
Unity 發(fā)布WebGL注意事項
Unity WebGL 官方教程
Unity WebGL官方教程翻譯
發(fā)布后打不開
Unity WebGL游戲
官方WebGL Tiny
IIS的搭建
別個的筆記
問題總結
四.Build
空場景build耗時~142s
測試demo
主要步驟
web.config
需要在index.html同級目錄下添加web.config配置文件。
需要根據(jù)部署的服務器決定：
Apache
web.config后綴改成.htaccess
Gzip版本:
<IfModule mod_mime.c>
AddType application/octet-stream .unityweb
AddEncoding gzip .unityweb
AddType application/wasm .wasm
AddEncoding gzip .wasm
AddOutputFilterByType DEFLATE application/wasm
</IfModule>
Brotli版本：
<IfModule mod_mime.c>
AddEncoding br .unityweb
RemoveType .wasm
AddType application/wasm .wasm
RemoveType .unityweb
AddType application/octet-stream .unityweb
</IfModule>
IIS
首先安裝URL Rewrite！
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".unityweb" />
<mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
<remove fileExtension=".wasm" />
<mimeMap fileExtension=".wasm" mimeType="application/wasm" />
</staticContent>
<rewrite>
<outboundRules>
<rule name="Append gzip Content-Encoding header">
<match serverVariable="RESPONSE_Content-Encoding" pattern=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" pattern="\.(unityweb|wasm)$" />
</conditions>
<action type="Rewrite" value="gzip" />
</rule>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
手機端去掉提示框
在手機端打開wegl項目會彈出不支持webgl的提示框，不想要的話可以把UnityLoader.js文件內的提示框代碼改下（line:2041）：
修改前代碼
compatibilityCheck: function(e, t, r) {
UnityLoader.SystemInfo.hasWebGL ? UnityLoader.SystemInfo.mobile ? e.popup("Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway.", [{
text: "OK",
callback: t
}]) : ["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1 ? e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.", [{
text: "OK",
callback: t
}]) : t() : e.popup("Your browser does not support WebGL", [{
text: "OK",
callback: r
}])
},
修改后
compatibilityCheck: function(e, t, r) {
UnityLoader.SystemInfo.hasWebGL ? ["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1 ? e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.", [{
text: "OK",
callback: t
}]) : t() : e.popup("Your browser does not support WebGL", [{
text: "OK",
callback: r
}])
},
全屏
index.html 修改如下：
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Pudong</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/build.json", {
onProgress: UnityProgress
});
</script>
<!-- 滾動條隱藏 -->
<style type="text/css">
body {
overflow: scroll;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
<!-- 窗口自適應 -->
<script type="text/javascript">
function ChangeCanvas() {
document.getElementById("gameContainer").style.width = window.innerWidth + "px";
document.getElementById("gameContainer").style.height = window.innerHeight + "px";
document.getElementById("#canvas").style.width = window.innerWidth + "px";
document.getElementById("#canvas").style.height = window.innerHeight + "px";
}
</script>
</head>
<body onResize="ChangeCanvas()">
<div class="webgl-content" style="position:absolute;width: 100%; height: 100%;z-index:1" id="gameContainer"></div>
<div style="position:absolute;z-index:2">
</div>
</body>
</html>
以上修改只能做到頁面最大化，如果要全屏可以手動F11或者添加其他代碼
加載時間過長
1.使用Gzip壓縮格式
頁面模板
模板demo
只要進度條不要Logo
用以下內容替換UnityProgress.js
function UnityProgress(gameInstance, progress) {
if (!gameInstance.Module)
return;
if (!gameInstance.progress) {
gameInstance.progress = document.createElement("div");
gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
gameInstance.progress.empty = document.createElement("div");
gameInstance.progress.empty.className = "empty";
gameInstance.progress.appendChild(gameInstance.progress.empty);
gameInstance.progress.full = document.createElement("div");
gameInstance.progress.full.className = "full";
gameInstance.progress.appendChild(gameInstance.progress.full);
gameInstance.container.appendChild(gameInstance.progress);
}
gameInstance.progress.full.style.width = (100 * progress) + "%";
gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
if (progress == 1)
gameInstance.progress.style.display = "none";
}
Unity發(fā)布WebGL時如何修改、刪除默認的載入進度條
自定義加載背景圖
如下所示把黑色的背景換成了圖片?。?！
方法概況：直接把Logo換成想要的背景圖，然后在css中修改尺寸即可｛（>A<）｝〃≈≈大羅法咒
詳細步驟：
1.TemplateData/progressLogo.Dark.png 替換成需要的背景圖片。（ps:進度條是progressFull.Dark.png）
2.打開style.css修改logo的寬高.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 100%; height: 100%;}
3.(ノ?_?)ノ去！卍卍卍
激活嵌入資源
介紹
using UnityEditor;
namespace ZYF
{
public class ZYF_WebGLEditorScript
{
[MenuItem("WebGL/Enable Embedded Resources")]
[System.Obsolete]
public static void EnableErrorMessageTesting()
{
PlayerSettings.SetPropertyBool("useEmbeddedResources", true, BuildTargetGroup.WebGL);
}
}
}
五.IIS 部署
啟用Internet Infomation Services
添加程序到IIS
1.把build目錄添加到IIS
2.通過瀏覽器打開（http://localhost/webgl/ ）
當然也可以用ip打開，筆者本地ip為：192.168.10.215，所以地址為：http://192.168.10.215:80/webgl/
報錯了就說明需要添加web.config文件！
重新打開頁面就正常了
六.瀏覽器設置
Chrome 快捷方式右鍵屬性在目標內添加 --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files即可(注意第一個的空格)
示例：“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files
Firefox:
地址欄輸入：about:config
找webgl.disabled false
找webgl.force-enabled true
七.UnityScript與JavaScript通信
┏ (゜ω゜)=??
|
