11. Using WebGL Templates
使用WebGL模板
当您构建WebGL项目时，Unity会将播放器嵌入HTML页面，以便在浏览器中播放。默认页面是一个简单的白色页面，在灰色画布上带有一个加载栏。或者，您可以在“播放器设置”检查器（菜单：Edit > Project Settings > Player）中选择最小化模板（只有必要的样板代码才能运行WebGL内容）。
image
内置的HTML页面对于测试和演示最小播放器很好，但出于生产的目的，通常需要将播放器托管在最终部署的页面中。例如，如果Unity内容通过外部调用接口与页面中的其他元素交互，那么它必须使用提供这些交互元素的页面进行测试。 Unity允许您通过使用WebGL templates(WebGL模板)来提供自己的页面以承载播放器。
Structure of a WebGL Template WebGL模板的结构
自定义模板通过在Assets文件夹中创建一个名为“WebGLTemplates”的文件夹添加到项目中 - 模板本身就是该文件夹中的子文件夹。每个模板文件夹都包含一个index.html文件以及该页面所需的任何其他资源，例如图像或样式表。
image
一旦创建，模板将出现在“播放器设置”检查器的选项中。(模板的名称将与其文件夹相同）。或者，该文件夹可以包含名为thumbnail.png的文件，该文件的尺寸应为128x128像素。缩略图图像将显示在检查器中，以提示完成的页面的外观。
该html文件需要至少包含以下元素：
- Unity WebGL加载器的脚本标记：
<script src="%UNITY_WEBGL_LOADER_URL%"></script> - 实例化游戏的脚本：
<script> var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");</script> - 一个
<div>标签，在实例化函数中使用该标识。这个div的内容将被游戏实例取代。
UnityLoader.instantiate(container, url, override)
UnityLoader.instantiate负责创建一个新的内容实例。
- container(容器)可以是DOM元素（通常是<div>元素）或DOM元素的ID。如果DOM元素被提供，那么游戏将立即被实例化。如果提供了一个DOM元素的id，那么在解析整个文档之后，游戏将被实例化（这意味着你可以提供一个在 UnityLoader.instantiate() 调用时尚未创建的DOM元素的id ）。
- url 指定了json文件的地址，该文件包含关于构建的信息（您可以使用％UNITY_WEBGL_BUILD_URL％变量，该变量将在构建时自动解析）。
- override是一个可选参数，可用于覆盖游戏实例的默认属性。例如，您可以重写onProgress和popup函数，因为这些是游戏实例的属性。请注意，Module也是游戏实例的属性，所以在实例化时可以覆盖模块的属性。考虑下面的例子：
UnityLoader.instantiate("MyContainer", “build/MyBuild.json”, {
onProgress: MyProgressFunction,
Module: {
TOTAL_MEMORY: 268435456,
onRuntimeInitialized: MyInitializationCallbackFunction,
},
});
Template Tags 模板标签
在构建过程中，Unity将在页面文本中查找特殊的标记字符串，并用编辑器提供的值替换它们。这些包括名称，屏幕尺寸和关于玩家的其他各种有用信息。
标签由页面源中的百分号（％）分隔。例如，如果产品名称在播放器设置中被定义为“MyPlayer”： -
<title>%UNITY_WEB_NAME%</title>
...在模板的索引文件中将被替换为
<title>MyPlayer</title>
...为构建生成的主机页面。完整的标签集合如下： -
- UNITY_WEB_NAME：玩家的姓名。
- UNITY_WEBGL_LOADER_URL：执行构建实例化的UnityLoader.js脚本的Url。
- UNITY_WEBGL_BUILD_URL：JSON文件的URL，包含有关构建的所有必要信息。
- UNITY_WIDTH和UNITY_HEIGHT：播放器的屏幕宽度和高度（以像素为单位）。
-
UNITY_CUSTOM_SOME_TAG：如果您将标记添加到
UNITY_CUSTOM_XXX格式的索引文件中，那么当您选择模板时，此标记将出现在播放器设置中。例如，如果像<title> Unity Player | ％UNITY_CUSTOM_MYTAG％</ title>已添加到源中，播放器设置将如下所示： -
image
标签名称旁边的文本框包含自定义标签在构建过程中将被替换的文本。
Example
为了说明模板标签的用法，下面是Unity用于其最小WebGL模板的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 | %UNITY_WEB_NAME%</title>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
</script>
</head>
<body>
<div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
</body>
</html>
最小化和默认模板都可以在Windows的Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates或Mac上的/PlaybackEngines/WebGLSupport/BuildTools/WebGLTemplates下的Unity安装文件夹中找到。
Adding a progress bar 添加进度条
加载时，Unity WebGL内容会自动为您呈现默认进度条。您可以通过提供您自己的进度函数作为附加实例化参数来覆盖默认加载栏。例如：
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
UnityProgress是两个参数的函数：gameInstance(标识进度条所属的游戏实例）和progress(进度)（0.0到1.0的值，提供有关当前加载进度的信息）。
例如，默认WebGL模板中的进度函数看起来如下：
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
例如，默认WebGL模板中的进度函数看起来如下：
function UnityProgress(gameInstance, progress) {
if (!gameInstance.Module)
return;
if (!gameInstance.logo) {
gameInstance.logo = document.createElement("div");
gameInstance.logo.className = "logo " + gameInstance.Module.splashScreenStyle;
gameInstance.container.appendChild(gameInstance.logo);
}
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.logo.style.display = gameInstance.progress.style.display = "none";
}
您可以按原样或作为自己模板的参考使用它。由于进度条完全以JavaScript实现，因此您可以自定义或替换它以显示任何您想要的进度指示。
11
Unity WebGL 中文文档 Unity 2018.1.b
1. WebGL
2. webGL Browser Compatibility
3. Building and running a WebGL project
4. WebGL: Deploying compressed builds
5. Debugging and trouble shooting WebGL builds
6. WebGL Graphics
7. WebGL Networking
8. Using Audio In WebGL
9. WebGL performance considerations
10. WebGL: Interacting with browser scripting
11. Using WebGL Templates
12. Cursor locking and full-screen mode in WebGL
13. Input in WebGL
