"ReferenceError: UnityLoader.js is not defined" on Kongregate

Question

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>

alt text `

List item

Answer 1

Best Answer

Answer by barrett-and · Aug 15, 2017 at 09:08 PM

Fixed it. I didn't realize that you have to have an extra level of folder in the script reference (i.e. "ZipFolderName/Build/UnityLoader.js") because the site treats the index.html and zip as seperate entities on the same file level.

Add comment · Show 2 · Share

Nuclear_Developer · May 12, 2018 at 04:22 PM 0

Share

Hey! I have tried to publish my game on $$anonymous$$ongregate, but i get the same error you got. Can you explain o me how you fixed it?

KeithT · May 17, 2018 at 08:41 AM 0

Share

I second the request for more info how you solved this, have similar issues.

"ReferenceError: UnityLoader.js is not defined" on Kongregate

1 Reply

Your answer

Follow this Question

Related Questions