Is Unity WebGL loading? A simple loader

22 September 2016 By 5 Comments

F = (When you publish your Unity application or prototype in WebGL a problem that your testers or players may have is that while the browser is loading the application, no progress bar appears and so they may be tempted to reload the page again and so… F() ).

A simple fix to reassure them is to paste this script at the bottom of the index.html file that Unity produces at build:

<script>
  /**
   * Created by
   * Matteo Bicocchi @pupunzi
   * Pietro Polsinelli @ppolsinelli
   * Follow us as we are creating a game on #football 
   * with a story: "Football Voodoom" :-)
   * */

  var appName = "<b>" + Module.codeUrl.replace("Release/", "").replace(".js","") + "</b> ";
  var canvas = document.getElementsByTagName("canvas")[0];
  var canvasRect = canvas.getBoundingClientRect();

  var loader = document.createElement("div");
  loader.id = "loader";

  var loaderWidth = canvas.offsetWidth;
  var loaderHeight = canvas.offsetHeight;

  document.body.appendChild(loader);

  loader.style.position = "absolute";

  loader.style.top = 0;
  loader.style.bottom = 0;
  loader.style.left = 0;
  loader.style.right = 0;
  loader.style.margin = "auto";
  loader.style.width = loaderWidth + "px";
  loader.style.height = loaderHeight + "px";
  loader.style.background = "transparent";
  loader.style.color = "#fff";
  loader.style.opacity = 0.8;
  loader.style.fontSize = "16px";
  loader.style.letterSpacing = "3px";
  loader.style.fontWeight = "100";
  loader.style.textAlign = "left";
  loader.style.padding =  "30px";
  loader.style.boxSizing = "border-box";

  var dotCount = 0;
  var checkDisplay = setInterval(function(){

    if(Module.progress.progress > 0) {
      loader.style.display="none";
      clearInterval(checkDisplay);
    } else {

      loader.innerHTML = "Loading " + appName;

      for (var x = 0; x<dotCount; x++){
        loader.innerHTML+= ".";
      }
      
      dotCount = dotCount >= 40 ? 0 : ++dotCount;
    }
  },100)
</script>

This will show immediately “Loading…” and will animate it until the app loader appears. See it here:

Unity WebGL custom loader

Cool no? The JavaScript is really basic and should work wherever WebGL does.

 

 

 

Social Share Toolbar
Filed Under: Tools Tagged With: , ,

Tips For The Pragmatic Unity Developer

07 September 2016 By Leave a Comment

In the video below I’ve presented several productivity tips / hacks for the great Unity3d developer, that cultivates his / her essential qualities (impatience laziness hubris):

 

Sources & References

The three most essential plugins are DOTween, Text Mesh Pro and Console Pro.

Jet Brains IDE for C# preview here.

The “auto-save on play” script is here, The “no more hot reload script” is here, both by the same cool guy.

The scene object enable and disable script is this:

public class TheScene : MonoBehaviour
    {
        public GameObject[] activateOnStartup, deactivateOnStartup;
        
        void Start()
        {
            foreach (GameObject go in activateOnStartup)
            {
                go.SetActive(true);
                if (go.GetComponent<CanvasGroup>() != null)
                    go.GetComponent<CanvasGroup>().alpha = 1;
            }
            foreach (GameObject go in deactivateOnStartup)
            {
                go.SetActive(false);
                if (go.GetComponent<CanvasGroup>() != null)
                    go.GetComponent<CanvasGroup>().alpha = 0;
            }
        }
    }

Follow me on Twitter where I post about game design, game development, Unity3d 2D, HTML5, applied / serious games.

Social Share Toolbar
Filed Under: Tools Tagged With: , , , , ,