1.自定义模板通过在Assets文件夹中创建一个名为“WebGLTemplates”的文件夹添加到项目中 - 模板本身就是该文件夹中的子文件夹。每个模板文件夹都包含一个index.html文件以及该页面所需的任何其他资源,例如图像或样式表。
一旦创建,模板将出现在“播放器设置”检查器的选项中。(模板的名称将与其文件夹相同)。或者,该文件夹可以包含名为thumbnail.png的文件,该文件的尺寸应为128x128像素。缩略图图像将显示在检查器中,以提示完成的页面的外观。
2.该html文件需要至少包含以下元素:
Unity WebGL加载器的脚本标记:
实例化游戏的脚本:< 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,
},
});
Example
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MyTemplete</title>
<!--加载实例化Unity脚本-->
<script src="Build/UnityLoader.js"></script>
<script>
//初始化Unity场景模板,“unityContainer”是要初始化的组件,JSON文件的URL,包含有关构建的所有必要信息。{}覆盖属性
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Web1.json",
{
onProgress: UnityProgress,//加载进度
compatibilityCheck: CheckCompatibility,//加载完成
Module: {
//TOTAL_MEMORY: 268435456,//内存
onRuntimeInitialized: RuntimeInitialized,//弹出实例化
},
});
function RuntimeInitialized() {
}
//进度回调函数
function UnityProgress(unityInstance, progress) {
//if (!gameInstance.Module)
// return;
//document.getElementById("loadingBlock").style.display = "inherit";
//document.getElementById("fullBar").style.width = (100 * progress) + "%";
//document.getElementById("emptyBar").style.width = (100 * (1 - progress)) + "%";
//document.getElementById("Welcome").innerText = progress*100+"%";
if (progress == 1) {
setTimeout(function () { document.getElementById("Welcome").style.display = "none"; }, 3000);
}
}
//全屏函数
function ToggleFullScreen() {
//判断是否全屏
var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
var element = document.body.getElementsByClassName("webgl-content")[0];
if (!isInFullScreen) {
//document.getElementById("fullScreenButton").style.backgroundImage = "url('TemplateData/img/fullScreen_off.png')";
return (element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.mozRequestFullScreen ||
element.msRequestFullscreen).call(element);
}
else {
// document.getElementById("fullScreenButton").style.backgroundImage = "url('TemplateData/img/fullScreen_on.png')";
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
//检测加载情况
function CheckCompatibility(unityInstance, onsuccess, onerror) {
if (!UnityLoader.SystemInfo.hasWebGL) {
//document.getElementById("errorBrowserBlock").style.display = "inherit";
onerror();
} else if (UnityLoader.SystemInfo.mobile) {
//document.getElementById("warningMobileBlock").style.display = "inherit";
onsuccess();
} else if (["Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1) {
//document.getElementById("warningBrowserBlock").style.display = "inherit";
onsuccess();
} else {
onsuccess();
}
}
}
</script>
<style>
html, body {
height:100%;
}
.webgl-content * {
border: 0;
margin: 0;
padding: 0
}
.webgl-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
.Welcome {
height: 100%;
width: 100%;
margin: auto;
background-image: url("./TemplateData/background.png");
background-size:cover;
}
</style>
</head>
<body style="overflow:hidden" >
<!--Unity播放组件-->
<div class="webgl-content">
<div class="Welcome" id="Welcome"></div>
<div id="unityContainer" style="width: 100%; height: 100%; margin: auto"></div>
</div>
</body>
</html>