Is Unity WebGL loading? A simple loader

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

Tips For The Pragmatic Unity Developer

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

Games Need Depth: My Research on Football

I’ve just published a post on Gamasutra with some reflections and sources on creating depth in games via narrative research, and how I am trying to do that on Football Voodoom.

Social Share Toolbar

First Trailer for Football VooDoom: Will To Comeback

A first trailer for an idea for a game on football that is taking shape both in design and in development – see the dedicated page for info and the trailer.

2016-08-08 22_44_59-Informazioni data e ora

Social Share Toolbar

(Mis)Understanding Applied Game Design: Vaccine!

Working with a no longer minuscule set of customers on applied games of a really wide spectrum of themes I’ve noticed in the early phases some misunderstanding that recur. In order to help both parties (game designers and field experts) to reach a common ground, I’ve set the misunderstandings in extreme and simplified form so you may use them as vaccine :-)

Also get the PDF here.

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

 

Social Share Toolbar

A Circular Range Control for Unity UI

I needed a circular range control to be for a project using Unity UI, and there seemed not to be one built-in, I created one. I wanted it to work on both desktop and mobile (touch). In building it I found out that to make it usable it requires quite a bit of tuning. [Read more…]

Social Share Toolbar

Untangling GameObject State in Unity

In this short post and video I try to discuss and clarify a few points about GameObject state in Unity with respect to game, scene and “runtime” scope. It is a bit more complex than one may understand initially, so bear with me a little.

When you start developing scenes in Unity, it won’t take long before you start asking questions like:

How can I get the same GameObject in different scenes?

Why do static properties sometimes get reset across scenes?

Why when I reload a scene I get duplicated objects which are meant to be singletons?

How can I comply with the (highly practical) principle “Make the game runnable from every scene” when I have global instances from other scenes?

Here are some answers.

Here is the full schema I refer to:

GameObject State in Unity

While MonoBehaviour’s  life-cycle is quite well documented e.g. both directly in Unity docs here and also by third parties e.g. here, how to handle GameObject’s persistence in and across scenes may be more obscure.

So here are written (partial) answers to the questions above:

How can I get the same GameObject in different scenes?
Would be probably better to reword this as “how can I persist and share data across scenes” – and there are many ways to do that :-)

Why do static properties sometimes get reset across scenes?
Only static properties which are GameObjects present in the scene will get reset (typically singletons). Other static properties will be preserved across the virtual machine.

Why when I reload a scene I get duplicated objects which are meant to be singletons?
That is because you marked those objects with DontDestroyOnLoad and created them (also) in other scenes. Create them via code (not in hierarchy) checking before their existence.

How can I comply with the (highly practical) principle “Make the game runnable from every scene” when I have global instances from other scenes?
This is best done just as explained above: create the global objects in every scene via code if they don’t already exist.

 

Unity Execution Order

Unity Execution Order – from Unity documentation.

If you are in need of learning some good patterns in software game development, a really nice book is Game Programming Patterns. Here are also 50 Tips for Working with Unity (Best Practices) which I reread from time to time, understanding progressively more and more of them (but still not all :D).

Thanks to Daniele Giardini for some feedback on the state scheme above.

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

Social Share Toolbar

Varieties of Game Applications

Can you use the pervasive media “videogame”  and this field’s design techniques for communicating effectively with people? Can games be used for what you have in mind? How can a field specialist work effectively with a game development team to communicate know how more effectively? [Read more…]

Social Share Toolbar

A little Unity project to explore a math puzzle

This math puzzle was proposed on The Guardian:

puzle

How to fill up the slots with the numbers from 1 to 9 and make the result 66? I proposed it to my kids, who are actually still too young to appreciate the algebraic solution. So I created a simple “brute force” explorer of the problem – here – and used to explore the possible solutions.

Brute force problem resolution

Here is the complete Unity project. Play with it!

Social Share Toolbar

How To Teach Fractions Making It Fun?

In my frequent survey of games and research concerning learning through games, I’ve stumbled upon this cute post: Teacher Uses LEGOs To Explain Math To Schoolchildren, which actually is extracted from Using LEGO to Build Math Concepts. [Read more…]

Social Share Toolbar