Unity webgl custom startup progress bar animation

More or less saw the introduction of Template customization in the webgl template of the unity official website, and today I will share a super practical one.

There are two ways to add custom templates:

1. In your -----unity installation location\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates

Create custom templates in this directory

2. Create the WebGLTemplates folder directly under Unity’s Assets and then create your own files in it (the name of this folder must not be wrong)

Then playersettings->Resolution and presentation->webgl Template can see your customized template

Create an index.html file and a logo image you need under this file

Look directly at the h5 code:

Unity comes with:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>  
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">%UNITY_WEB_NAME%</div>
      </div>
    </div>
  </body>
</html>

Customized:

<!DOCTYPE html>
<html lang="en-us">
 
  <head>
    <meta charset="utf-8">
    <title>%UNITY_WEB_NAME%</title>
    <style>
      html {
        box-sizing: border-box;
      }
      *, *:before, *:after {
        box-sizing: inherit;
      }
      body {
        margin: 0;
        background: #444;
      }
      #gameContainer {
        width: 100vw;
        height: 100vh;
      }
      canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
 
      .logo {
          display: block;
          width: max-width: 80vw;
          height: max-height: 60vh;
      }
 
      .progress {
          margin: 1.5em;
          border: 1px solid white;
          width: 50vw;
          display: none;
      }
      .progress .full {
          margin: 2px;
          background: white;
          height: 1em;
          transform-origin: top left;
      }
 
      #loader {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
 
      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 5em;
        height: 5em;
      }
      .spinner {
        margin: 10px;
        font-size: 10px;
        position: relative;
        text-indent: -9999em;
        border-top: 1.1em solid rgba(255, 255, 255, 0.2);
        border-right: 1.1em solid rgba(255, 255, 255, 0.2);
        border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
        border-left: 1.1em solid #ffffff;
        transform: translateZ(0);
        animation: spinner-spin 1.1s infinite linear;
      }
      @keyframes spinner-spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
 
    </style>
  </head>
 
  <body>
    <div id="gameContainer"></div>
    <div id="loader">
      <img class="logo" src="logo.png">
      <div class="spinner"></div>
      <div class="progress"><div class="full"></div></div>
    </div>
  </body>
 
  <script src="%UNITY_WEBGL_LOADER_URL%"></script>
  <script>
  var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress});
  function UnityProgress(gameInstance, progress) {
    if (!gameInstance.Module) {
      return;
    }
    const loader = document.querySelector("#loader");
    if (!gameInstance.progress) {
      const progress = document.querySelector("#loader .progress");
      progress.style.display = "block";
      gameInstance.progress = progress.querySelector(".full");
      loader.querySelector(".spinner").style.display = "none";
    }
    gameInstance.progress.style.transform = `scaleX(${progress})`;
    if (progress === 1 && !gameInstance.removeTimeout) {
      gameInstance.removeTimeout = setTimeout(function() {
          loader.style.display = "none";
      }, 2000);
    }
  }
  </script>
 
</html>

See the effect:

Corresponding to the h5 code in the default template to modify, it can be seen from the comparison that I have adapted to the screen, so let’s try it

%UNITY_WEB_NAME% - product name defined under unity settings
%UNITY_HEIGHT% - from WebGL resolution and height of demo in unity settings
%UNITY_WIDTH% - from WebGL resolution and width of presentation in unity settings
%UNITY_WEBGL_LOADER_GLUE% - Loads the built code, usually before the end-of-body tag.

Unity webgl custom startup progress bar animation

Guess you like