Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

Templates

Discussion in 'WebGL' started by DreamEnder, Jan 18, 2016.

  1. DreamEnder

    DreamEnder

    Joined:
    Apr 12, 2011
    Posts:
    191
    I've searched Google for any examples of WebGL Templates to change the loading screen with more information (how much data still needs to be downloaded) and I've tried to make my own template. However I've been unable to create a decent working loading screen with my limited css and html knowledge.

    Would any one be willing to share their templates or even sell them?
     
  2. lloydsummers

    lloydsummers

    Joined:
    May 17, 2013
    Posts:
    343
    What do you want it to do? I've modified mine a fair amount to get it fitting nicely with Wordpress.

    http://www.redironlabs.com/about/

    If you check the link above and wait for the loader, you'll see a webgl inclusion
     
    theANMATOR2b likes this.
  3. DreamEnder

    DreamEnder

    Joined:
    Apr 12, 2011
    Posts:
    191
    I just want to display a proper loading bar with text saying X MB out of Total MB downloaded. Plus the logo of our company.
     
  4. lloydsummers

    lloydsummers

    Joined:
    May 17, 2013
    Posts:
    343
    Can't help you with text... I've only been using the progress bar.

    But the company logo is super easy - if you want to do it really fast... overwrite the generic Unity logo in the templatesData folder with your own (and make sure your proportions are the same).
     
  5. DreamEnder

    DreamEnder

    Joined:
    Apr 12, 2011
    Posts:
    191
    Cool thanks for your help. I'll try that.
     
  6. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    327
    Open the /TemplateData/UnityProgress.js, find the SetProgress function and replace the line
    Code (JavaScript):
    1. this.messageArea.style.display = "none";
    with for example
    Code (JavaScript):
    1. this.messageArea.style.color = "yellow";
    that will give you a yellow message 'Downloading data... (X/total)' during the launch.

    You can also replace the line (at the very end of the file)
    Code (JavaScript):
    1. this.messageArea.innerHTML = this.message;
    with for example
    Code (JavaScript):
    1. this.messageArea.innerHTML = 'Downloading: ' + ((this.progress * 100 + 0.5) | 0) + '%';
    that will give you 'Downloading X%' during the launch.

    This should give you an idea of how to tweak the progress bar.
     
    Last edited: Jan 19, 2016
    lloydsummers likes this.
  7. lloydsummers

    lloydsummers

    Joined:
    May 17, 2013
    Posts:
    343
    Just wanted to add, the above worked for me. Just make sure to add

    Code (csharp):
    1. this.messageArea.style.display = "none";
    To the Clear function, otherwise the text will remain forever :)