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. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Unite 2023 Registrations are now LIVE!

Question Customise WebGL Template

Discussion in 'WebGL' started by Deathtreak, Jun 2, 2023.

  1. Deathtreak

    Deathtreak

    Joined:
    Nov 19, 2017
    Posts:
    17
    Hi !

    I'm trying to edit the base WebGL template to customise the loading screen visual at the beginning when we open the page webpage

    Changing this one :


    I'm trying to replace the logo, the loading bar, add texts..
    For that, i have a file UnityProgress.js wich handle all of this
    And i plugged it into the index.html

    But i don't understand why, the result i get is this :


    So here is my code
    Index is mainly the same as the default one


    Code (JavaScript):
    1. <!DOCTYPE html>
    2. <html lang="en-us">
    3. <script type="text/javascript" src="TemplateData/xmlhttprequest-length-computable.min.js"></script>
    4.   <head>
    5.     <meta charset="utf-8">
    6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    7.     <title>Unity WebGL Player | {{{ PRODUCT_NAME }}}</title>
    8.     <link rel="shortcut icon" href="TemplateData/favicon.ico">
    9.     <link rel="stylesheet" href="TemplateData/style.css">
    10.     <script src="TemplateData/UnityProgress.js"></script>
    11.   </head>
    12.   <body>
    13.     <div id="unity-container" class="unity-desktop">
    14.       <canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}}></canvas>
    15.       <div id="unity-loading-bar">
    16.         <div id="unity-logo"></div>
    17.         <div id="unity-progress-bar-empty">
    18.           <div id="unity-progress-bar-full"></div>
    19.         </div>
    20.       </div>
    21.       <div id="unity-mobile-warning">
    22.         WebGL builds are not supported on mobile devices.
    23.       </div>
    24.       <div id="unity-footer">
    25.         <div id="unity-webgl-logo"></div>
    26.         <div id="unity-fullscreen-button"></div>
    27.         <div id="unity-build-title">{{{ PRODUCT_NAME }}}</div>
    28.       </div>
    29.     </div>
    30.     <script>
    31.       var buildUrl = "Build";
    32.       var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
    33.       var config = {
    34.         dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
    35.         frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
    36.         codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
    37. #if MEMORY_FILENAME
    38.         memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
    39. #endif
    40. #if SYMBOLS_FILENAME
    41.         symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
    42. #endif
    43.         streamingAssetsUrl: "StreamingAssets",
    44.         companyName: "{{{ COMPANY_NAME }}}",
    45.         productName: "{{{ PRODUCT_NAME }}}",
    46.         productVersion: "{{{ PRODUCT_VERSION }}}",
    47.       };
    48.  
    49.       var container = document.querySelector("#unity-container");
    50.       var canvas = document.querySelector("#unity-canvas");
    51.       var loadingBar = document.querySelector("#unity-loading-bar");
    52.       var progressBarFull = document.querySelector("#unity-progress-bar-full");
    53.       var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    54.       var mobileWarning = document.querySelector("#unity-mobile-warning");
    55.  
    56.       // By default Unity keeps WebGL canvas render target size matched with
    57.       // the DOM size of the canvas element (scaled by window.devicePixelRatio)
    58.       // Set this to false if you want to decouple this synchronization from
    59.       // happening inside the engine, and you would instead like to size up
    60.       // the canvas DOM size and WebGL render target sizes yourself.
    61.       // config.matchWebGLToCanvasSize = false;
    62.  
    63.       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    64.         container.className = "unity-mobile";
    65.         // Avoid draining fillrate performance on mobile devices,
    66.         // and default/override low DPI mode on mobile browsers.
    67.         config.devicePixelRatio = 1;
    68.         mobileWarning.style.display = "block";
    69.         setTimeout(() => {
    70.           mobileWarning.style.display = "none";
    71.         }, 5000);
    72.       } else {
    73.         canvas.style.width = "{{{ WIDTH }}}px";
    74.         canvas.style.height = "{{{ HEIGHT }}}px";
    75.       }
    76. #if BACKGROUND_FILENAME
    77.       canvas.style.background = "url('" + buildUrl + "/{{{ BACKGROUND_FILENAME.replace(/'/g, '%27') }}}') center / cover";
    78. #endif
    79.       loadingBar.style.display = "block";
    80.  
    81.       var script = document.createElement("script");
    82.       script.src = loaderUrl;
    83.       script.onload = () => {
    84.         createUnityInstance(canvas, config, (progress) => {
    85.           UnityProgress(canvas,progress);  
    86.           progressBarFull.style.width = 100 * progress + "%";        
    87.         }).then((unityInstance) => {
    88.           loadingBar.style.display = "none";
    89.           fullscreenButton.onclick = () => {
    90.             unityInstance.SetFullscreen(1);
    91.           };
    92.         }).catch((message) => {
    93.           alert(message);
    94.         });
    95.       };
    96.       document.body.appendChild(script);
    97.     </script>
    98.   </body>
    99. </html>
    And here is my UnityProgress.js code :

    Code (JavaScript):
    1. function UnityProgress(unityInstance, progress) {
    2.  
    3.   if (!unityInstance.progress) {
    4.  
    5.     unityInstance.progress = document.createElement("div");
    6.  
    7.     unityInstance.progress.style.backgroundColor = "white";
    8.  
    9.     unityInstance.progress.loadingbar = document.createElement("div");
    10.     unityInstance.progress.loadingbar.id = "unity-loading-bar";
    11.     unityInstance.progress.appendChild(unityInstance.progress.loadingbar);
    12.  
    13.     unityInstance.progress.loadingbar.logo = document.createElement("img");
    14.     unityInstance.progress.loadingbar.logo.id = "unity-logo";
    15.     unityInstance.progress.loadingbar.logo.src = "TemplateData/logo.png";
    16.     unityInstance.progress.loadingbar.appendChild(unityInstance.progress.loadingbar.logo);
    17.  
    18.     unityInstance.progress.loadingbar.txtA = document.createElement("h2");
    19.     unityInstance.progress.loadingbar.txtA.textContent = "Bienvenue dans l'application virtuelle";
    20.     unityInstance.progress.loadingbar.appendChild(unityInstance.progress.loadingbar.txtA);
    21.  
    22.     unityInstance.progress.loadingbar.txtB = document.createElement("h3");
    23.     unityInstance.progress.loadingbar.txtB.textContent = "Chargement en cours";
    24.     unityInstance.progress.loadingbar.appendChild(unityInstance.progress.loadingbar.txtB);
    25.  
    26.     unityInstance.progress.loadingbar.empty = document.createElement("div");
    27.     unityInstance.progress.loadingbar.empty.id = "unity-progress-bar-empty";
    28.     unityInstance.progress.loadingbar.appendChild(unityInstance.progress.loadingbar.empty);
    29.  
    30.     unityInstance.progress.loadingbar.full = document.createElement("div");
    31.     unityInstance.progress.loadingbar.full.id = "unity-progress-bar-full";
    32.     unityInstance.progress.loadingbar.empty.appendChild(unityInstance.progress.loadingbar.full);
    33.  
    34.  
    35.     unityInstance.progress.loadingbar.txtC = document.createElement("p");
    36.     unityInstance.progress.loadingbar.txtC.id = "nb";
    37.     unityInstance.progress.loadingbar.txtC.textContent = "NB : Selon votre vitesse de connexion, le chargement peut prendre quelques minutes";
    38.     unityInstance.progress.loadingbar.appendChild(unityInstance.progress.loadingbar.txtC);
    39.  
    40.     unityInstance.appendChild(unityInstance.progress);
    41.  
    42.   }
    43.  
    44.   unityInstance.progress.loadingbar.full.style.width = (100 * progress) + "%";
    45.  
    46.   if(progress == 1){
    47.       unityInstance.progress.style.display = "none";
    48.   }
    49.      
    50. }
    51.  
    I dont understand where all my content gone ?
     
    Deathtreak, Jun 2, 2023
    #1