Responsive WebGL Game Loader in HTML and JavaScript

38 33lukmengland

<html lang="en-us">
<base href="https://cdn.jsdelivr.net/gh/Stinkalistic/UGS@main/UNITY/sniper/">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>game :D</title>
  <style>
    html, body {
      background: #000;
      width: 100%;
      height: 100%;
      overflow: visible;
      padding: 0;
      margin: 0;
    }

#gameContainer {
      background: transparent !important;
      position: absolute;
    }

#gameContainer canvas {
      position: absolute;
    }

#gameContainer canvas[data-pixel-art="true"] {
      image-rendering: optimizeSpeed;
      image-rendering: -webkit-crisp-edges;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: crisp-edges;
      image-rendering: pixelated;
      -ms-interpolation-mode: nearest-neighbor;
    }

#loading-text {
      color: white;
      font-family: sans-serif;
      text-align: center;
      margin-top: 1em;
    }
  </style>
</head>

<body>
  <div id="gameContainer">
    <canvas id="unity-canvas" data-pixel-art></canvas>
    <div id="loading-text">LOADING...</div>
  </div>

const loadingText = document.querySelector("#loading-text");
    let totalBytes = 0;
    let loadedBytes = 0;

function formatSize(bytes) {
      if (bytes > 1024 * 1024 * 1024) return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GB";
      if (bytes > 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(2) + " MB";
      if (bytes > 1024) return (bytes / 1024).toFixed(2) + " KB";
      return bytes + " B";
    }

async function getSize(url) {
      try {
        const res = await fetch(url, { method: "HEAD" });
        return parseInt(res.headers.get("Content-Length") || "0", 10);
      } catch {
        return 0;
      }
    }

async function fetchPart(url) {
      const response = await fetch(url);
      if (!response.body) {
        const ab = await response.arrayBuffer();
        loadedBytes += ab.byteLength;
        loadingText.textContent = `LOADING... ${formatSize(loadedBytes)} / ${formatSize(totalBytes)}`;
        return new Uint8Array(ab);
      }
      const reader = response.body.getReader();
      const chunks = [];
      let received = 0;
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        received += value.length;
        loadedBytes += value.length;
        chunks.push(value);
        const percent = totalBytes > 0 ? ((loadedBytes / totalBytes) * 100).toFixed(1) : "?";
        loadingText.textContent = `LOADING... ${formatSize(loadedBytes)} / ${formatSize(totalBytes)} (${percent}%)`;
      }
      const full = new Uint8Array(received);
      let offset = 0;
      for (let chunk of chunks) {
        full.set(chunk, offset);
        offset += chunk.length;
      }
      return full;
    }

async function mergeParts(parts, mimeType) {
      const buffers = await Promise.all(parts.map(fetchPart));
      const totalLen = buffers.reduce((s, b) => s + b.length, 0);
      const concatenated = new Uint8Array(totalLen);
      let off = 0;
      for (let b of buffers) {
        concatenated.set(b, off);
        off += b.length;
      }
      return URL.createObjectURL(new Blob([concatenated], { type: mimeType || undefined }));
    }

function getParts(file, count) {
      const parts = [];
      for (let i = 1; i <= count; i++) parts.push(file + ".part" + i);
      return parts;
    }

(async () => {
      try {
        const dataParts = getParts("Build/New folder (2).data", 7);
        const wasmParts = getParts("Build/New folder (2).wasm", 2);
        const allParts = [...dataParts, ...wasmParts, "Build/framework.js"];
        const sizes = await Promise.all(allParts.map(getSize));
        totalBytes = sizes.reduce((a, b) => a + b, 0);

const [dataUrl, wasmUrl, frameworkUrl] = await Promise.all([
          mergeParts(dataParts),
          mergeParts(wasmParts),
          mergeParts(["Build/framework.js"], 'application/javascript')
        ]);

const canvas = document.querySelector("#unity-canvas");
        let scaleToFit = true;

// Wait until Unity loader is available
        await (async function waitForLoader() {
          if (typeof createUnityInstance === 'function') return;
          await new Promise(resolve => {
            const check = setInterval(() => {
              if (typeof createUnityInstance === 'function') {
                clearInterval(check);
                resolve();
              }
            }, 50);
          });
        })();

const config = {
          dataUrl: dataUrl,
          frameworkUrl: frameworkUrl,
          codeUrl: wasmUrl,
          streamingAssetsUrl: "https://cdn.jsdelivr.net/gh/Stinkalistic/UGS@main/UNITY/sniper/StreamingAssets",
          companyName: "",
          productName: "",
          productVersion: ""
        };

createUnityInstance(canvas, config, (progress) => {
          const percent = Math.round(progress * 100);
          loadingText.textContent = `LOADING... ${percent}%`;
        }).then((unityInstance) => {
          loadingText.remove();
        }).catch((message) => {
          loadingText.textContent = 'Failed to start Unity: ' + message;
          console.error(message);
        });
      } catch (err) {
        loadingText.textContent = 'ERROR: ' + (err.message || err);
        console.error(err);
      }
    })();
  </script>
</body>
</html>

CSS

Responsive WebGL Game Loader in HTML and JavaScript

Recommended