WebGL Build – Custom Loading Effect

An article by mgear    2 Comments

Webgl build progress meter seems stuck at the end sometimes,
so it would be nice to have some “loading/uncompressing” effect there..

WebGL example:
http://unitycoder.com/upload/demos/CustomWebGLLoader/ *its copy of my LudumDare32 entry

– Caching seems to cause some problems though, effect starts too early or too late?
– Probably need to use some background worker, as it hangs on the final step..? (or use CSS animations, they are in separate thread?)
– Could make it as a ready template, so no need to edit code after publish
– Using animated gif as background instead would be better, no need javascript timers

Steps for adding the effect to webgl build: (^or check source of that webgl page)

// OPEN FILE
index.html

// FIND LINES
<p class=”footer”>&laquo; created with <a href=”http://unity3d.com/” title=”Go to unity3d.com”>Unity</a> &raquo;</p>
<script type=’text/javascript’>

// INSERT AFTER THOSE LINES
var bgTimer=null;
var originalBgColor = document.getElementsByTagName(“body”)[0].style.backgroundColor;
function LoaderEffect() {
document.getElementsByTagName(“body”)[0].style.backgroundColor = “#” + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
function StopLoaderEffect()
{
window.clearInterval(bgTimer);
document.getElementsByTagName(“body”)[0].style.backgroundColor = originalBgColor;
}

// FIND LINE
return function(text) {

// INSERT AFTER THAT LINE
if (text.indexOf(“Creating OpenGLES2.0 graphics device”)>-1) StopLoaderEffect();

// FIND LINE
printErr: function(text) {

// INSERT AFTER THAT LINE
if (text == “run() called, but dependencies remain, so not running”)  bgTimer = window.setInterval(“LoaderEffect()”,100);

—

References: (for javascript)
– http://www.w3schools.com/jsref/met_win_setinterval.asp
– http://www.w3schools.com/jsref/met_win_clearinterval.asp
– http://www.w3schools.com/jsref/prop_style_backgroundcolor.asp
– http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript