Better Loading Indicator in WebGL

When developing for WebGL a huge set back is the lack of a loading indicator in the project. It is hard to tell if the project is loading or is just stuck. To make things easier, The Babilin Apps. Team has search the web for a solution. We came across ocias.com where he has created a tutorial on how to improve your loading indicator. It can been seen in action here

We realized how important this loading indicator is to our projects and are happy to share it with you.

https://www.dropbox.com/s/m9u5rvrvwnst6kx/CustomProgress.zip?dl=0

Once you download the folder navigate to your Unity folder in your program files and add it to your WebGL templates folder.

Example of Path:

C:\Program Files\Unity\Editor\Data\PlaybackEngines\webglsupport\BuildTools\WebGLTemplates

One you put it in your folder you will have the ability to export any Unity5 WebGL project with the custom loading indicator.


Features:

· Updates live time

· Give you an idea of how big the project is

· Tells you the steps of preparing the project


Happy WebGL development,

Babilin Applications Team

 

Thanks for sharing this!

 

Thanks

 

Nice, very nice

 

Wow! Awesome, Thank you so much! I ran across the same blog that shows how to create better progress bar, and thought "what a pain"! Now you have saved me some precious time, really appreciate it.

 

Thank for sharing.

 

Hey @BabilinApps great work!
I've been working myself on a preloader and I find very odd the downloaded files size. If I transform to MB it's a lot larger than the project (let alone it downloads only 1 small file : 25 mb instead of 6 mb). And Firefox shows different sizes than Chrome.
Have you noticed this?

 

I did not realize this. I will definitely take a look and see what might be happening. Thank you for catching that!

 

@Victor_Kallai @BabilinApps How do we update the preloader to display MB instead of bytes? Also is the MB still buggy, or is there a fix for it. Otherwise I guess I will just stick to the default setup. Let me know when you can. Thank you!

 

I love it. Thanks for sharing!

 

I think the loader is terrific, however for some reason the template forces my game to fill the entirety of the canvas it's in even though I've created it to work in a 5:4 square within said canvas. I've looked over the HTML but am unsure of just what I need to change in order to keep things looking the way I want them to (a 5:4 squarish screen on top of a background image). Any advice?

Update: My apologies. I was simply looking in the wrong place. It looks like a few adjustments to the style.CSS file should do the trick nicely. Thanks for a terrific loader!

 

Note that you should keep a backup of the template as this location is cleared when you install an update or patch.

 

For anyone else with same problem:

I didn't include a feature to be able to toggle that dynamically, however if you want to change it for a certain project it should be relatively simple. Attached is a new version of the CSS file

(WebGLTemplates\CustomProgress\TemplateData\style.css) that should clearly mark out the fullscreen portion of the CSS (just the two lines in the FULLSCREEN section) that could be commented out or removed to prevent the player from loading fullscreen. In addition to this, the "NOT FULLSCREEN" section should be uncommented to fix the centering.

If you'd like me to work on a solution for this to be able to be dynamically toggled I'll see what I can do.
https://www.dropbox.com/s/m6p6u145t08ydoc/style.css?dl=0

 

I've attached an untested modification that might work. (modification to /TemplateData/UnityProgress.js)

I'm not certain the math is correct though, since there's a lot of confusion in code as to what a "megabyte"/"megabit" actually is due to an unfortunate change several years ago in how international standardization groups define it.

If this change doesn't work it doesn't seem like the fix will be very straightforward.
https://www.dropbox.com/s/29ok47cs23eu3va/UnityProgress.js?dl=0

Buying our assets : https://www.assetstore.unity3d.com/en/#!/publisher/10925/page/1/sortby/popularity
Really helps us out for college. If you like this project and would like more cool things like this, buy our assets and send suggestions to us! We are Unity nerds that are building our portfolio for college

 

Thanks, that's very kind of you!

 

Thanks for taking the time to look into this! I'll give it a try, and report the results!

 

I have also made a set of templates with better loading indicator for my own use as well to share.
I have just added the animated gif for the preparing state.
You can see and download it as unitypackage from my page: http://virtualplayground.d2.pl/?p=959 and then import into the project assets folder.
I wanted also make the php templates for passing some _post data into webgl builds, but the unity editor doesn't seem to accept index.php files in spite of what the documentation says.

 

Since Untiy 5.3 all the files get packed into jsgz files and the progress bars doesn't work anymore, just moves in one big chunck from 0.0 of 1.0 to preparing. I saw on your website (http://babilinapps.com/portfolio/webgl-event-room/) that you use Unity 5.3 as well and your progress bar seems to work just fine. Could you tell me how you fixed that ? I though couldn't see if you use the compressed js files. Thanks in advance !

 

I believe that it is something in player settings or the size of the project. I have seen the same issue but only on a few projects. check if this one does the same things: https://www.dropbox.com/s/29ok47cs23eu3va/UnityProgress.js?dl=0 . We are currently really busy working on projects but I will make sure our web developer takes a look at it. Thank you for letting me know.

If you can, send a screen grab of the loading bar of the same project using unity 5.2 and 5.3

 

very interested in this too...but 404 on that dropbox link.

 

Sorry about that. Here is the new link https://www.dropbox.com/s/29ok47cs23eu3va/UnityProgress.js?dl=0

 

Thanks for this. CodePen also have great examples for progress bars if someone is interested in more customizations.
Check this one:
http://codepen.io/simeydotme/pen/IrGqz

 

Would you like to see that in a unity template?

 

yes I would!

 

It's not that hard, i already made couple for games i made. But you can make it, i believe u will have customers.

 

I figured out that it works just fine when you unzip the jsgz files and put the data, js and mem files in the same folder. Also for me unpacking the files on the client takes longer than just downloading the uncompressed version of the files, so I think I'll stick to the unpacked version. We don't have an Ajax Server so it's not possible for me to make the browser have a look at the .htaccess, so this could also be the cause of not showing the progress bar when I use the compressed files. The setStatus function comming from the UnityLoader gives me the status of the progress that is analysed in your UnityProgress.js. Using the compressed version the setStatus is only called twice, once starting the download and once when its finished. Maybe someone has a solution to redirect the browser to use the jsgz files.

 

The BabilinApps template is great, but only seems to work in Firefox (not IE or Chrome). Am I doing something wrong? Thanks.

 

What errors are you getting?

 

As soon as I have time I will publish it.

 

I will look into it

 

Oops, my mistake. I couldn't get it to run in Chrome on my localhost, but later found out that was for security reasons. Got it going by using the Build and Run option in Unity. Had to remove the .htaccess file from my IIS server to get it to run there. Also have the same problem as prinzwurstbrot (progress bar isn't working; I'm also using 5.3). But good work and thanks!

 

I'm also having the same problem prinzwurstbrot I tried changing the UnityProgress.js file to the one you linked in the reply but it won't let me save over it. Does the one you linked in the reply work? please i'm making a game for a jam and I would like a template that updates live not just going from 0 to done can anyone link me one?

 

Would I need to make my game a development build to see that?

 

i want to print total percentage of game loaded and also according to this progressbar should work...any one have a solution?

 

thanks.
It helped me a lot and i could change it for my own needs with the full screen button and a background image

is there any way to have the loading bar without needing some stuff loaded from an other website (the tween thing)

I try to be the less dependent as possible on external stuff

 

I agree. I think you can download the script from an other page and make it local to your website.

 

Thanks a lot for sharing.

Has anyone added a "play" button? I'm using this template in a iFrame like an embedded youtube video and would like to make the download manual so the user have a choice.

 

An error occured running the Unity content on this page. See your browser's JavaScript console for more info. The error was:
uncaught exception: unknown compression method
cant see your example in action with this error

 

Your download example works great, but for my project, the progress bar updates only twice in big jumps. Maybe this is due to my way-too-large project, which is over 100 mb. What I see is "downloading 1/8" for a very long time but no further update (like 2/8, 3/8 etc). Then it jumps from "downloading 1/8" to "processing" and then to the first scene. This is from a server - not local.

Just curious why no progress during the download? Because of my large file size maybe?? Thanks for any insight.

-- Kevin

 

That's down to server configuration (though I don't know what the 'fix' is). For my game, on Kongregate the downloading numbers appear, on itch.io they don't.

 

So this progress bar seems to work in 5.3, but not 5.4. Does something in the JavaScript need updated, or is this a bug in 5.4? Here are WebGL builds of a sample project I got from the Asset Store, demonstrating the problem. The 5.4 bar never updates during the data download; it stays at 0.0/1:

5.3: http://mtsi-studio.com/TimTesting/Sample_5_3/
5.4: http://mtsi-studio.com/TimTesting/Sample_5_4/

 

Thanks Alex, adding the .htaccess did indeed fix the problem. Will there be a server configuration section in the docs soon, as you mentioned in that other thread?

 

Up to this point I could solve everything by learning from great contributors of this forum. This time I cannot. I downloaded the files from the template from first post of this page, those gave me an error. So then a few posts later the same people from “BabilinApps” placed a link to the new “UnityProgress.js”. Then I tried it with no good results. Later the great "alexsuvorov" placed a link to a page with instructions to create the “.htaccess”, so I followed it with no good results either.

At this point I'm really confused after reading this same page a thousand times. All the other links take me to pages I don't know how to use. I’m pretty sure a lot of beginner coders like me will be stuck here.

So Can I good soul that has effectively solved this problem on unity 5.4 be nice to place the final working steps to make it work on any “normal” host provider default settings like goddady's or other popular sites?

 

Hello Alex:
1) Yes It works without .htaccess
2) I need a recommended place to start learning about server configuration. I thought I had understand that post the first time I read it but I think I don't.
3) Js file weights 36kb and datagz 18.320kb
4) I've never modified configurations on server, don't even now if it works with Apache, IIS etc or where to look for that. I've seen some tutorials about that subject since you mentioned it , but seem fairly advanced, and not specific about those seemingly obvious topics....

I don't know if it's better just give up on this one, and just wait for the next solid release and documentation.