Unity WebGL开发

教程来啦

• 一.WebGL不能干的那些事
• 二.注意事项
• • 1.播放声音
  • 2.跨域
  • 3.发布http or https?
  • 4.包体大小
  • 5.Odin
  • 6.T序列化失败
• 三.参考资料
• 四.Build
• • 主要步骤
  • web.config
  • • Apache
    • IIS
  • 手机端去掉提示框
  • 全屏
  • 加载时间过长
  • 页面模板
  • • 只要进度条不要Logo
    • 自定义加载背景图
  • 激活嵌入资源
• 五.IIS 部署
• • 启用Internet Infomation Services
  • 添加程序到IIS
• 六.浏览器设置
• 七.UnityScript与JavaScript通信

一.WebGL不能干的那些事

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.发布http or https?

当发布到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 发布WebGL注意事项
Unity WebGL 官方教程
Unity WebGL官方教程翻译
发布后打不开
Unity WebGL游戏
官方WebGL Tiny
IIS的搭建
别个的笔记
问题总结

四.Build

空场景build耗时~142s
测试demo

主要步骤

web.config

需要在index.html同级目录下添加web.config配置文件。
需要根据部署的服务器决定：

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发布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通信

┏ (゜ω゜)=👉