Search Unity

  1. Unity 2020.1 has been released.
    Dismiss Notice
  2. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

Better Loading Indicator in WebGL

Discussion in 'WebGL' started by BabilinApps, Jun 22, 2015.

  1. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
    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
     
    Last edited: Apr 6, 2016
    _Radagan, Marceta, nomadic and 6 others like this.
  2. Blarp

    Blarp

    Joined:
    May 13, 2014
    Posts:
    207
    Thanks for sharing this!
     
  3. Andrejus

    Andrejus

    Joined:
    Mar 2, 2015
    Posts:
    10
    Thanks
     
  4. Andrejus

    Andrejus

    Joined:
    Mar 2, 2015
    Posts:
    10
    Nice, very nice
     
  5. jonmalave

    jonmalave

    Joined:
    Aug 19, 2012
    Posts:
    1,670
    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.
     
  6. roka

    roka

    Joined:
    Sep 12, 2010
    Posts:
    477
    Thank for sharing.
     
  7. Victor_Kallai

    Victor_Kallai

    Joined:
    Mar 5, 2014
    Posts:
    123
    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?
     
  8. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
    I did not realize this. I will definitely take a look and see what might be happening. Thank you for catching that!
     
  9. jonmalave

    jonmalave

    Joined:
    Aug 19, 2012
    Posts:
    1,670
    @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! :)
     
  10. OminStyle

    OminStyle

    Joined:
    Mar 18, 2013
    Posts:
    15
    I love it. Thanks for sharing!
     
  11. krougeau

    krougeau

    Joined:
    Jul 1, 2012
    Posts:
    449
    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! :)
     
    Last edited: Aug 12, 2015
  12. Arowx

    Arowx

    Joined:
    Nov 12, 2009
    Posts:
    7,482
    Note that you should keep a backup of the template as this location is cleared when you install an update or patch.
     
    krougeau likes this.
  13. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
    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
     
    krougeau likes this.
  14. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
    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 :)
     
  15. krougeau

    krougeau

    Joined:
    Jul 1, 2012
    Posts:
    449
    Thanks, that's very kind of you! :)
     
  16. jonmalave

    jonmalave

    Joined:
    Aug 19, 2012
    Posts:
    1,670

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

    tomekkie2

    Joined:
    Jul 6, 2012
    Posts:
    577
    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.
     
    krougeau likes this.
  18. prinzwurstbrot

    prinzwurstbrot

    Joined:
    Jul 28, 2015
    Posts:
    7
    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 !
     
  19. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
    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 :)
     
  20. gecko

    gecko

    Joined:
    Aug 10, 2006
    Posts:
    2,093
    very interested in this too...but 404 on that dropbox link.
     
  21. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
  22. Marceta

    Marceta

    Joined:
    Aug 5, 2013
    Posts:
    176
    Last edited: Jan 27, 2016
  23. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
    Would you like to see that in a unity template?
     
  24. gecko

    gecko

    Joined:
    Aug 10, 2006
    Posts:
    2,093
    yes I would! :)
     
  25. Marceta

    Marceta

    Joined:
    Aug 5, 2013
    Posts:
    176
    It's not that hard, i already made couple for games i made. But you can make it, i believe u will have customers.
     
  26. prinzwurstbrot

    prinzwurstbrot

    Joined:
    Jul 28, 2015
    Posts:
    7
    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.
     
  27. dle5751

    dle5751

    Joined:
    Jul 25, 2012
    Posts:
    8
    The BabilinApps template is great, but only seems to work in Firefox (not IE or Chrome). Am I doing something wrong? Thanks.
     
  28. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
    What errors are you getting?
     
  29. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
    As soon as I have time I will publish it.
     
  30. BabilinApps

    BabilinApps

    Joined:
    Dec 28, 2014
    Posts:
    40
    I will look into it :)
     
  31. dle5751

    dle5751

    Joined:
    Jul 25, 2012
    Posts:
    8
    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!
     
    Last edited: Feb 3, 2016
  32. IAMBATMAN

    IAMBATMAN

    Joined:
    Aug 14, 2015
    Posts:
    272
    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?
     
    Last edited: Mar 17, 2016
  33. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    327
    Hello IAMBATMAN.

    Please note that currently the progress bar does not get updated correctly if the loader falls back to direct downloading of the compressed file (in which case you will see the corresponding message in the console: Decompressed Release/mygame.datagz in 108ms. You can remove this delay if you configure your web server to host files using gzip compression.)
    If the Content-Encoding: gzip response headers are set by the server appropriately, then the loading progress bar should work as expected. You can check if this applies to your case.
     
  34. IAMBATMAN

    IAMBATMAN

    Joined:
    Aug 14, 2015
    Posts:
    272
    Would I need to make my game a development build to see that?
     
  35. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    327
    No need, you can just open the browser console. If you see there in the very beginning a 404 error for a .js file and information about decompression, that would mean that the loader uses fallback.
     
  36. Milan-Sadariya

    Milan-Sadariya

    Joined:
    Jan 12, 2016
    Posts:
    7
    i want to print total percentage of game loaded and also according to this progressbar should work...any one have a solution?
     
  37. coolraiman

    coolraiman

    Joined:
    Oct 20, 2013
    Posts:
    9
    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
     
  38. Marc-Saubion

    Marc-Saubion

    Joined:
    Jul 6, 2011
    Posts:
    346
    I agree. I think you can download the script from an other page and make it local to your website.
     
  39. Marc-Saubion

    Marc-Saubion

    Joined:
    Jul 6, 2011
    Posts:
    346
  40. Pencilaz

    Pencilaz

    Joined:
    May 10, 2014
    Posts:
    11
    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
     
  41. PawleyBoboli

    PawleyBoboli

    Joined:
    Jan 27, 2015
    Posts:
    10
    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
     
  42. Aurigan

    Aurigan

    Joined:
    Jun 30, 2013
    Posts:
    228
    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.
     
  43. mtsi_tims

    mtsi_tims

    Joined:
    Nov 6, 2015
    Posts:
    2
    YarnballSoftware likes this.
  44. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    327
    Hello mtsi_tims.

    The Unity loader does not display the loading progress for JavaScript compression fallback. Try to configure your server for serving the *gz files in the same way it was done in 5.3, then the progress should be displayed correctly. The default .htaccess has been removed from 5.4 builds and will soon appear in the documentation instead. The reasoning behind this and directions how to configure your server are described in details in the following thread (nginx might require minor adjustments): http://forum.unity3d.com/threads/why-was-htaccess-removed-in-5-4.424025/#post-2744442
     
  45. mtsi_tims

    mtsi_tims

    Joined:
    Nov 6, 2015
    Posts:
    2
    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?
     
  46. ivabibliocad

    ivabibliocad

    Joined:
    Jan 11, 2014
    Posts:
    71
    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?
     
    Last edited: Sep 19, 2016
  47. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    327
    Hello mtsi_tims.

    Yes, it is already on the way.
     
  48. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    327
    Hello ivabibliocad.

    Could you describe your problem in more details?
    1) Does your (unmodified) build work well without .htaccess?
    2) Does your (unmodified) build work well (i.e. you no longer see the "You can remove this delay ..." warning) when using server configuration described in the following post?
    http://forum.unity3d.com/threads/why-was-htaccess-removed-in-5-4.424025/#post-2744442
    3) if your answer is yes for the both questions above, but the loading indicator still does not work, then check whether your server provides Content-Length header, and whether your .js file is significantly larger than your .data file (in which case progress might be displayed incorrectly, i.e. showing 100% while the .js file is still being downloaded)

    There does not seem to be a universal solution for this. Not only because there are different types of servers (Apache, IIS etc.), but also because the particular configuration file itself might depend on the server configuration (i.e. in case of IIS, configuration file depends on whether the URL Rewrite module is installed or not).
     
    Last edited: Sep 21, 2016
  49. ivabibliocad

    ivabibliocad

    Joined:
    Jan 11, 2014
    Posts:
    71
    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.
     
  50. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    327
    The server setup depends on a particular hosting provider and on a particular server type (Apache, IIS, etc.). Some simple servers or public drives do not support any configuration at all, so there will always be cases where advanced server configuration does not apply. Still there is nothing really complicated about the configuration.

    Taking into account that your build does work well and you haven't configured anything yourself, you are most probably on Apache server (because IIS server would not even serve files without associated MIME types).

    Copy the following .htaccess file into your Release subfolder on the server (the full path of the file will be something like .../YourGame/Release/.htaccess):
    Code (config):
    1. Options +SymLinksIfOwnerMatch
    2. <IfModule mod_rewrite.c>
    3.   <IfModule mod_mime.c>
    4.     RewriteEngine on
    5.     RewriteCond %{HTTP:Accept-encoding} gzip
    6.     RewriteCond %{REQUEST_FILENAME}gz -f
    7.     RewriteRule ^(.*)\.(js|data|mem|unity3d)$ $1.$2gz [L]
    8.  
    9.     AddEncoding gzip .jsgz
    10.     AddEncoding gzip .datagz
    11.     AddEncoding gzip .memgz
    12.     AddEncoding gzip .unity3dgz
    13.   </IfModule>
    14. </IfModule>
    That's it. The result can be the following:

    a) The build works well and the progress bar is displayed correctly.

    b) The build stopped working (this means that the server configuration is not default and the issue should be resolved individually)

    c) The build works well but the progress bar is displayed incorrectly. The reasons might be the following:
    - this is not Apache server
    - the server does not have mod_rewrite or mod_mime extensions enabled or the server does not allow configuration
    - you are using Data caching option in your build settings, in which case the .data file is loaded from the indexedDB when you revisit the page and therefore the download progress is not displayed
     
    Last edited: Sep 23, 2016
unityunity