Hello Unity,
I’m trying to get a WebGL Build of a unity project up and running on kongregate, but I’ve got an issue: All that appears when I run it on the site is a black screen I have scrollbars for. The build works fine if I run it on a private server or open it in a browser from file inspector, but for some reason Kongregate is being uncooperative. Whenever the build plays it displays the same error of “ReferenceError: UnityLoader.js is not defined” even though UnityLoader.js is specifically referenced in the index.html. I have tried asking the Kongregate forums for a solution, but they have been silent, if anybody here has a solution let me know. Below is the code for index.html and the errors for when I run the game on kongregate.
<!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 | VistaLights</title>
<style>
* {
margin: 0;
padding: 0;
}
#gameContainer canvas {
display:block;
}
div#webgl-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
div#loadingBox {
width: 100%;
height: 0px;
position: absolute;
top: 50%;
margin-top: 137px;
text-align: center;
}
div#icon {
width: 300px;
height: 310px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -185px;
margin-left: -150px;
background-image: url("Template/anthill.png");
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #141414;
}
div#box {
width: 328px;
height: 367px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -199px;
margin-left: -164px;
background: #222;
box-shadow: 1px 1px 5px #000;
}
div#bgBar {
display: none;
position: absolute;
width: 300px;
margin-left: -150px;
left: 50%;
height: 18px;
background-color: #882121;
box-shadow: 1px 1px 5px #111;
}
div#progressBar {
display: none;
left: 50%;
position: absolute;
margin-left: -150px;
width: 0px;
height: 18px;
background-color: #dc4241;
}
p#loadingInfo {
color: #fff;
letter-spacing: 1px;
position: absolute;
width: 100%;
font-family: sans-serif;
text-align: center;
top: 50%;
font-size: 11px;
font-weight: 500;
margin-top: 140px;
text-shadow: 0px 0px 5px #000;
}
div#spinner {
position: absolute;
height: 18px;
left: 50%;
margin-left: -150px;
width: 300px;
position: relative;
overflow: hidden;
background-color: #882121;
box-shadow: 1px 1px 5px #111;
}
div#spinner:before {
display: block;
position: absolute;
content: "";
width: 150%;
margin-left: -10px;
height: 10px;
background-color: #e85352;
transform: rotate(-5deg);
animation: loading 1s linear infinite;
}
@keyframes loading {
from {
top: -185%
}
to {
top: 225%
}
}
</style>
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'>
</script>
<script src="Build/UnityLoader.js"></script>
<script>
function UnityProgress(gameInstance, progress) {
var container = document.getElementById('gameContainer');
if (container) document.body.style.background = container.style.background;
if (!gameInstance.Module) {
return;
} else if (progress === "complete") {
document.getElementById("loadingBox").style.display = "none";
document.getElementById("icon").style.display = "none";
document.getElementById("loadingInfo").style.display = "none";
document.getElementById("box").style.display = "none";
return;
} else if (progress == 1) {
document.getElementById("loadingInfo").innerHTML = "PROCESSING...";
document.getElementById("spinner").style.display = "inherit";
document.getElementById("bgBar").style.display = "none";
document.getElementById("progressBar").style.display = "none";
} else if (progress > 0) {
document.getElementById("progressBar").style.width = 300 * progress + "px"
document.getElementById("loadingInfo").innerHTML = Math.round(progress * 100) + "%";
document.getElementById("spinner").style.display = "none";
document.getElementById("bgBar").style.display = "block";
document.getElementById("progressBar").style.display = "inherit";
}
}
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/VistaBuild.json", {
onProgress: UnityProgress,
Module: {
onRuntimeInitialized: function() { UnityProgress(gameInstance, "complete") }
}
});
</script>
</head>
<body>
<div id="webgl-content" style="width: 960px; height: 540px">
<div id="gameContainer" style="width: 960px; height: 540px"></div>
</div>
<div id="box"></div>
<div id="loadingBox">
<div id="spinner"></div>
<div id="bgBar"></div>
<div id="progressBar"></div>
</div>
<a target="_blank" href="http://www.kongregate.com"> <div id="icon"></div> </a>
<p id="loadingInfo"></p>
</body>
</html>
- List item