Search Unity

Question Customise WebGL Template

Discussion in 'Web' 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