unity升级2022后，打包web的index.html有变动，这里做个记录
unity升级2022后，打包web的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>WebGL Player | {{{ PRODUCT_NAME }}}</title>
<img id="progressImg" src="TemplateData/progressFull.Light.png">
<img id="splashImg" src="TemplateData/progressLogo.Light.png">
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} tabindex="-1"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
#splashImg
{
margin: 0 auto;
width: 100%;
height: 100%;
}
#progressImg{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 80px;
max-width: 50%;
max-height: 3%;
}
}
</style>
<script src="Build/{{{ LOADER_FILENAME }}}"></script>
<script src="mqtt.min.js"></script>
<script>
var splash = document.querySelector("#splashImg");
var progressImage = document.querySelector("#progressImg");
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
#if SHOW_DIAGNOSTICS
var diagnostics_icon = document.getElementById("diagnostics-icon");
#endif
var buildUrl = "Build";
var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
var config = {
dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
#if USE_THREADS
workerUrl: buildUrl + "/{{{ WORKER_FILENAME }}}",
#endif
#if USE_WASM
codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#endif
#if MEMORY_FILENAME
memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endif
streamingAssetsUrl: "StreamingAssets",
companyName: {{{ JSON.stringify(COMPANY_NAME) }}},
productName: {{{ JSON.stringify(PRODUCT_NAME) }}},
productVersion: {{{ JSON.stringify(PRODUCT_VERSION) }}},
};
// By default, Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
canvas.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
#if SHOW_DIAGNOSTICS
// position the diagnostics icon in the corner on the canvas
diagnostics_icon.style.position = "fixed";
diagnostics_icon.style.bottom = "10px";
diagnostics_icon.style.right = "0px";
canvas.after(diagnostics_icon);
#endif
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
canvas.style.width="100%";
canvas.style.height="100%";
container.style.width="100%";
container.style.height="100%";
}
#if BACKGROUND_FILENAME
canvas.style.background = "url('" + buildUrl + "/{{{ BACKGROUND_FILENAME.replace(/'/g, '%27') }}}') center / cover";
#endif
loadingBar.style.display = "block";
function hideSplash()
{
splash.style.display = "none";
progressImage.style.display = "none";
}
var script = document.createElement("script");
script.src = loaderUrl;
var unityInstance;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((gameInstance) => {
unityInstance = gameInstance;
setTimeout(hideSplash,2500);
loadingBar.style.display = "none";
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
function SettingDebug(content)//设置是否显示debug信息，0=显示，1=不显示
{
unityInstance.SendMessage("WebToUnity", "SetDebugModel", content);
}
function JsToUnityString(content) {
//console.log(content);
unityInstance.SendMessage("WebToUnity", "JsToUnity", content);
}
window.addEventListener("message", (e) => {
//console.log(e.data);
JsToUnityString(e.data);
});
function GetBackgroundConfig()
{
return window.localStorage.getItem("app_theme-color");
}
var mqttClient;
//var wsUrl = 'ws://127.0.0.1:8083';
function MQTTConnect(wsOption) {
var jsOption=JSON.parse(wsOption);
const options = {
clean: true, // true: 清除会话, false: 保留会话
connectTimeout: 4000, // 超时时间
// 认证信息
//clientId: 'test', //客户端ID
username: jsOption.username,//'admin', //连接用户名
password: jsOption.password,//'password',//连接密码，有的密码默认为public
// 心跳时间
keepalive: 60,
//Qos: 2,
}
mqttClient = mqtt.connect(jsOption.wsUrl, options);
mqttClient.on('connect', function () {
//console.log('Connected Succeed')
unityInstance.SendMessage("WebToUnity", "MQTTConnectSucceed");
})
//失败重连
mqttClient.on('reconnect', (error) => {
//console.log('正在重连:', error)
unityInstance.SendMessage("WebToUnity", "MQTTReConnect");
})
//连接失败
mqttClient.on('error', (error) => {
console.log('连接失败:', error)
unityInstance.SendMessage("WebToUnity", "MQTTConnectFail");
})
//接受消息
mqttClient.on('message', function (topic, message) {
// message is Buffer
//console.log("subNmae=" + topic.toString())
//console.log("msg=" + message.toString())
//mqttClient.end()
var jsData={
"topic":topic,
"message":message.toString(),
}
unityInstance.SendMessage("WebToUnity", "MQTTWebToUnity", JSON.stringify(jsData));
})
}
function MQTTSubscribe(subNameReceive) {
mqttClient.subscribe(subNameReceive, function (err,granted) {
var jsData={
"topic":granted,
"err":err,
}
unityInstance.SendMessage("WebToUnity", "MQTTSubscribeResult", JSON.stringify(jsData));
})
}
function MQTTUnSubscribe(subNameReceive) {
mqttClient.unsubscribe(subNameReceive, function (err,granted) {
var jsData={
"topic":granted,
"err":err,
}
unityInstance.SendMessage("WebToUnity", "MQTTUnSubscribeResult", JSON.stringify(jsData));
})
}
function MQTTPublish(subNameSend,content) {
mqttClient.publish(subNameSend, content,function(err,granted){
var jsData={
"topic":granted,
"err":err,
}
unityInstance.SendMessage("WebToUnity", "MQTTPublishResult", JSON.stringify(jsData));
});
}
function MQTTClosed() {
mqttClient.end();
}
function SetDebug() {
return 1//设置是否显示debug信息，0=显示，1=不显示
}
</script>
</head>
<body>
<div class="webgl-content"style="width: 100%; height: 100%; margin: auto;">
<div id="unityContainer"style="width: 100%; height: 100%; margin: auto;"></div>
</div>
</body>
</html>