|
<!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 | モクモクラン</title> |
|
<link rel="shortcut icon" href="TemplateData/favicon.ico"> |
|
<link rel="stylesheet" href="TemplateData/style.css"> |
|
</head> |
|
<body> |
|
<div id="unity-container" class="unity-desktop"> |
|
<canvas id="unity-canvas" width=900 height=600></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 id="unity-warning"> </div> |
|
|
|
<div id="TextInputRoot" style="display:none;"> |
|
<div style="width:100%;height:100%;position:fixed;top:0%;z-index:2147483647;"> |
|
<script> |
|
function setActiveValue(){ |
|
document.getElementById("MokuranFreeTextInputActive").value = 1; |
|
} |
|
function setDeactiveValue(){ |
|
document.getElementById("MokuranFreeTextInputActive").value = 0; |
|
document.getElementById("TextInputRoot" ).style.display = "none"; |
|
} |
|
function sendMessage(e){ |
|
if (e.keyCode == 13){ |
|
document.getElementById("MokuranFreeTextInputIsSendAble").value = 1; |
|
console.log("send message is called.") |
|
} |
|
} |
|
</script> |
|
<div style="position:relative;top:88%;left:14px;" align="center" vertical-align="middle"> |
|
<div> |
|
<input type="text" id="MokuranFreeTextInput" onclick="setActiveValue()" onfocusout="setDeactiveValue()" onkeydown="sendMessage(event)" size="50" |
|
style=" |
|
width:400px; |
|
height:28px; |
|
border: 2px solid #171717; |
|
border-radius: 4px; |
|
background-color: #515151; |
|
color: #FFFFFF;"> |
|
<input type="hidden" id="MokuranFreeTextInputActive" value=0 style="position:relative;top:60%;left:100px;"> |
|
<input type="hidden" id="MokuranFreeTextInputIsSendAble" value=0 style="position:relative;top:60%;left:100px;"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<script> |
|
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"); |
|
var fullscreenButton = document.querySelector("#unity-fullscreen-button"); |
|
var warningBanner = document.querySelector("#unity-warning"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function unityShowBanner(msg, type) { |
|
function updateBannerVisibility() { |
|
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; |
|
} |
|
var div = document.createElement('div'); |
|
div.innerHTML = msg; |
|
warningBanner.appendChild(div); |
|
if (type == 'error') div.style = 'background: red; padding: 10px;'; |
|
else { |
|
if (type == 'warning') div.style = 'background: yellow; padding: 10px;'; |
|
setTimeout(function() { |
|
warningBanner.removeChild(div); |
|
updateBannerVisibility(); |
|
}, 5000); |
|
} |
|
updateBannerVisibility(); |
|
} |
|
|
|
var buildUrl = "Build"; |
|
var loaderUrl = buildUrl + "/webgl3.loader.js"; |
|
var config = { |
|
dataUrl: buildUrl + "/webgl3.data", |
|
frameworkUrl: buildUrl + "/webgl3.framework.js", |
|
codeUrl: buildUrl + "/webgl3.wasm", |
|
streamingAssetsUrl: "StreamingAssets", |
|
companyName: "Lycoris", |
|
productName: "モクモクラン", |
|
productVersion: "0.01", |
|
showBanner: unityShowBanner, |
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { |
|
|
|
|
|
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"; |
|
|
|
|
|
|
|
|
|
|
|
unityShowBanner('WebGL builds are not supported on mobile devices.'); |
|
} else { |
|
|
|
|
|
canvas.style.width = "900px"; |
|
canvas.style.height = "600px"; |
|
} |
|
|
|
loadingBar.style.display = "block"; |
|
|
|
var script = document.createElement("script"); |
|
script.src = loaderUrl; |
|
script.onload = () => { |
|
createUnityInstance(canvas, config, (progress) => { |
|
progressBarFull.style.width = 100 * progress + "%"; |
|
}).then((unityInstance) => { |
|
loadingBar.style.display = "none"; |
|
}).catch((message) => { |
|
alert(message); |
|
}); |
|
}; |
|
document.body.appendChild(script); |
|
</script> |
|
</body> |
|
</html> |
|
|
