When making a browser-based game, you’re asking players to be generous with their time and wait patiently while your content downloads. This means how you indicate download progress in your preloader is super important. A Unity webGL custom progress bar is essential.<\/p>\n
<\/p>\n
The default Unity webGL progress bar is a awful.<\/p>\n
A terrible user experience, meaning most potential players will drop off before your game even loads. Let’s look at how we can improve this.<\/p>\n
Here’s an example of a Unity webGL game with a preloader that fixes these issues<\/a>. This is what we’re going to make.<\/p>\n It’s best to start by basing a new template off the default one (I wrote a guide on how to set up templates here<\/a>).<\/p>\n By default, the code that affects how our preloader works is located in TemplateData\/unityProgress.js. Looking through this file you’ll see that it’s adding all the html elements to display the progress bar\u00a0programmatically. This is a bit difficult to work with\u00a0(and not really the way Javascript is intended to be used), so the first thing to do is move all the html into our index.html file instead.<\/p>\n Strip all the display code from unity progress.js until you’re left with:<\/p>\n Next we make the\u00a0html + css progress display. The things I find pretty necessary are:<\/p>\n All wrapped in its own div in index.html, just after the canvas:<\/p>\n Add some styling (inline or in the header or linked in a separate file).\u00a0I’ll go with a style that fits into\u00a0a full browser window template<\/a>. First we centre the whole box:<\/p>\n Then sort out the sizing, colouring and positioning of the loading bars:<\/p>\n And just style up the loading progress text a tiny bit too:<\/p>\n Once the loading information displays the way you want it to, we just need to connect it up to the loading data in unity progress.js.<\/p>\n Hide everything when loading is complete in SetProgress() and Clear(), and connect up the progress to your CSS and loading message in Update():<\/p>\n Now we’ve got our own tidy progress bar and update text,\u00a0but it still moves in big chunks instead of smoothly growing, and doesn’t feel like it’s making progress after the download completes. Let’s fix the jumps using TweenJS<\/a>, and we’ll display a spinner gif after the download reaches 100% to keep some motion on screen.<\/p>\n Download the TweenJS<\/a> package and copy over the CSSPlugin.js, then attach it to your index.html:<\/p>\nSetting Up a Basic Unity WebGL Custom Progress Bar<\/h2>\n
function UnityProgress (dom) {\n this.progress = 0.0;\n this.message = \"\";\n this.dom = dom;\n\n var parent = dom.parentNode;\n\n this.SetProgress = function (progress) { \n if (this.progress < progress)\n this.progress = progress;\n\n this.Update();\n }\n\n this.SetMessage = function (message) { \n this.message = message; \n this.Update();\n }\n\n this.Clear = function() {\n\n }\n\n this.Update = function() {\n\n }\n\n this.Update ();\n}<\/pre>\n\n
<div id=\"loadingBox\">\n <div id=\"bgBar\"><\/div>\n <div id=\"progressBar\"><\/div>\n <p id=\"loadingInfo\">Loading...<\/p>\n<\/div><\/pre>\n
div#loadingBox {\n width: 100%;\n height: 20px;\n position: absolute;\n top: 50%;\n margin-top: -10px;\n text-align: center;\n}<\/pre>\ndiv#bgBar {\n position: absolute;\n width: 200px;\n margin-left: -100px;\n left: 50%;\n height: 2px;\n display: block;\n background-color: #333;\n}\n\ndiv#progressBar {\n left: 50%;\n position: absolute;\n margin-left: -100px;\n width: 0px;\n height: 2px;\n background-color: white;\n border-radius: 2px;\n}\n\ndiv#bgBar {\n border-radius: 2px;\n}<\/pre>\np#loadingInfo {\n color: #666;\n letter-spacing: 1px;\n position: absolute;\n width: 100%;\n font-family: \"Monaco\", sans-serif;\n text-transform: uppercase;\n text-align: center;\n font-size: 8px;\n margin-top: 10px;\n}<\/pre>\nfunction UnityProgress (dom) {\n this.progress = 0.0;\n this.message = \"\";\n this.dom = dom;\n\n var parent = dom.parentNode;\n \n this.SetProgress = function (progress) { \n if (this.progress < progress)\n this.progress = progress; \n\n if (progress == 1) {\n this.SetMessage(\"Preparing...\");\n document.getElementById(\"bgBar\").style.display = \"none\";\n document.getElementById(\"progressBar\").style.display = \"none\";\n } \n this.Update();\n }\n\n this.SetMessage = function (message) { \n this.message = message; \n this.Update();\n }\n\n this.Clear = function() {\n document.getElementById(\"loadingBox\").style.display = \"none\";\n }\n\n this.Update = function() {\n var length = 200 * Math.min(this.progress, 1);\n bar = document.getElementById(\"progressBar\")\n bar.style.width = length + \"px\";\n document.getElementById(\"loadingInfo\").innerHTML = this.message;\n }\n\n this.Update ();\n}<\/pre>\nAdvanced Preloader Features<\/h2>\n
<script type=\"text\/javascript\" src=\"https:\/\/code.createjs.com\/tweenjs-0.6.0.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"TemplateData\/CSSPlugin.js\"><\/script><\/pre>\n