<!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 | QuFuBaoDianWebGL</title>
<link rel="stylesheet" href="TemplateData/style.css" /> <!--增加样式-->
</head>
<body>
<canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar">
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<script src="Build/DaTongBuild20240424.loader.js"></script>
<script src="./Extend.js"></script>
<script>
var canvas = document.querySelector("#unity-canvas");
const config =
{
dataUrl: "Build/DaTongBuild20240424.data.unityweb",
frameworkUrl: "Build/DaTongBuild20240424.framework.js.unityweb",
codeUrl: "Build/DaTongBuild20240424.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "QuFuBaoDianWebGL",
productVersion: "0.1",
};
/*增加显示*/
document.querySelector("#unity-loading-bar").style.display = "block";
createUnityInstance(canvas, config, (progress) =>
{
document.querySelector("#unity-progress-bar-full").style.width =
100 * progress + "%";
}).then((unityInstance) => {
document.querySelector("#unity-loading-bar").style.display = "none";
}).catch((message) => {
alert(message);
});
</script>
</body>
</html>
body,html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#unity-canvas {
width: 100%;
height: 100%;
background: #231f20
}
#unity-loading-bar {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 1000;
}
#unity-logo {
width: 154px;
height: 130px;
background: url('unity-logo-dark.png') no-repeat center
}
#unity-progress-bar-empty {
width: 141px;
height: 18px;
margin-top: 10px;
margin-left: 6.5px;
background: url('progress-bar-empty-dark.png') no-repeat center
}
#unity-progress-bar-full {
width: 0%;
height: 18px;
margin-top: 10px;
background: url('progress-bar-full-dark.png') no-repeat center
}
#unity-footer {
position: relative
}