Hunter731/Unity3D-RTS

1<!DOCTYPE html>2<html lang="en-us">3  <head>4    <meta charset="utf-8">5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">6    <title>Unity WebGL Player | RTS</title>7    <link rel="shortcut icon" href="TemplateData/favicon.ico">8    <link rel="stylesheet" href="TemplateData/style.css">9  </head>10  <body>11    <div id="unity-container" class="unity-desktop">12      <canvas id="unity-canvas" width=1650 height=700></canvas>13      <div id="unity-loading-bar">14        <div id="unity-logo"></div>15        <div id="unity-progress-bar-empty">16          <div id="unity-progress-bar-full"></div>17        </div>18      </div>19      <div id="unity-warning"> </div>20      <div id="unity-footer">21        <div id="unity-webgl-logo"></div>22        <div id="unity-fullscreen-button"></div>23        <div id="unity-build-title">RTS</div>24      </div>25    </div>26    <script>27      var container = document.querySelector("#unity-container");28      var canvas = document.querySelector("#unity-canvas");29      var loadingBar = document.querySelector("#unity-loading-bar");30      var progressBarFull = document.querySelector("#unity-progress-bar-full");31      var fullscreenButton = document.querySelector("#unity-fullscreen-button");32      var warningBanner = document.querySelector("#unity-warning");33 34      // Shows a temporary message banner/ribbon for a few seconds, or35      // a permanent error message on top of the canvas if type=='error'.36      // If type=='warning', a yellow highlight color is used.37      // Modify or remove this function to customize the visually presented38      // way that non-critical warnings and error messages are presented to the39      // user.40      function unityShowBanner(msg, type) {41        function updateBannerVisibility() {42          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';43        }44        var div = document.createElement('div');45        div.innerHTML = msg;46        warningBanner.appendChild(div);47        if (type == 'error') div.style = 'background: red; padding: 10px;';48        else {49          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';50          setTimeout(function() {51            warningBanner.removeChild(div);52            updateBannerVisibility();53          }, 5000);54        }55        updateBannerVisibility();56      }57 58      var buildUrl = "Build";59      var loaderUrl = buildUrl + "/output.loader.js";60      var config = {61        dataUrl: buildUrl + "/output.data",62        frameworkUrl: buildUrl + "/output.framework.js",63        codeUrl: buildUrl + "/output.wasm",64        streamingAssetsUrl: "StreamingAssets",65        companyName: "DefaultCompany",66        productName: "RTS",67        productVersion: "1.0",68        showBanner: unityShowBanner,69      };70 71      // By default Unity keeps WebGL canvas render target size matched with72      // the DOM size of the canvas element (scaled by window.devicePixelRatio)73      // Set this to false if you want to decouple this synchronization from74      // happening inside the engine, and you would instead like to size up75      // the canvas DOM size and WebGL render target sizes yourself.76      // config.matchWebGLToCanvasSize = false;77 78      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {79        // Mobile device style: fill the whole browser client area with the game canvas:80 81        var meta = document.createElement('meta');82        meta.name = 'viewport';83        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';84        document.getElementsByTagName('head')[0].appendChild(meta);85        container.className = "unity-mobile";86        canvas.className = "unity-mobile";87 88        // To lower canvas resolution on mobile devices to gain some89        // performance, uncomment the following line:90        // config.devicePixelRatio = 1;91 92        unityShowBanner('WebGL builds are not supported on mobile devices.');93      } else {94        // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:95 96        canvas.style.width = "1650px";97        canvas.style.height = "700px";98      }99 100      loadingBar.style.display = "block";101 102      var script = document.createElement("script");103      script.src = loaderUrl;104      script.onload = () => {105        createUnityInstance(canvas, config, (progress) => {106          progressBarFull.style.width = 100 * progress + "%";107        }).then((unityInstance) => {108          loadingBar.style.display = "none";109          fullscreenButton.onclick = () => {110            unityInstance.SetFullscreen(1);111          };112        }).catch((message) => {113          alert(message);114        });115      };116      document.body.appendChild(script);117    </script>118  </body>119</html>120