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.
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.
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?
@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 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!
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.
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.
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: Full browser WebGL templates with CSS | virtualPlayground 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
