Chargeur WebGL Tattletail Unity avec barre de progression

406 IDK

Ouvrir dans l'éditeur Publiez votre code

Chargeur WebGL Tattletail Unity avec barre de progression

Recommandé

28 July 2023

Animation de couleur de texte CSS

28 August 2024

Effet de survol de navigation des images

31 August 2024

Page de connexion

HTML

<!DOCTYPE html>
<html lang="en-us">
  <head>
        <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@latest/tattletail/">
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tattletail</title>
    <script src="Build/UnityLoader.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: black;
      }

#gameContainer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
      }

canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
    </style>
  </head>

<body>
    <div
      id="loading-text"
      style="
        color: white;
        font-size: 48px;
        font-family: cursive;
        text-align: center;
        margin-top: 20px;
      "
    >
      LOADING...
    </div>
    <div id="gameContainer" hidden></div>
    <script>
      const loadingText = document.querySelector("#loading-text");
      let totalBytes = 64246251.52;
      let loadedBytes = 0;

function formatSize(bytes) {
        if (bytes > 1024 * 1024 * 1024) {
          return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GB";
        } else if (bytes > 1024 * 1024) {
          return (bytes / (1024 * 1024)).toFixed(2) + " MB";
        } else if (bytes > 1024) {
          return (bytes / 1024).toFixed(2) + " KB";
        } else {
          return bytes + " B";
        }
      }
      async function fetchWithProgress(url) {
        const response = await fetch(url);
        const reader = response.body.getReader();
        let 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 doneText = formatSize(loadedBytes);
          const totalText = formatSize(totalBytes);
          const percent =
            totalBytes > 0
              ? ((loadedBytes / totalBytes) * 100).toFixed(1)
              : "?";
          loadingText.textContent = `LOADING... ${doneText} / ${totalText} (${percent}%)`;
        }
        let fullBuffer = new Uint8Array(received);
        let offset = 0;
        for (let chunk of chunks) {
          fullBuffer.set(chunk, offset);
          offset += chunk.length;
        }
        return fullBuffer.buffer;
      }
      async function mergeFiles(parts) {
        const buffers = await Promise.all(parts.map(fetchWithProgress));
        return URL.createObjectURL(new Blob(buffers));
      }

function getParts(file, count) {
        let parts = [];
        for (let i = 1; i <= count; i++) {
          parts.push(file + ".part" + i);
        }
        return parts;
      }
      function resizeUnityContainer() {
        var container = document.getElementById("gameContainer");
        container.style.width = window.innerWidth + "px";
        container.style.height = window.innerHeight + "px";
      }
      (async () => {
        const dataParts = getParts("Build/WebGL.data.unityweb", 4);
        const allParts = [...dataParts];
        const [dataUrl] = await Promise.all([mergeFiles(dataParts)]);
        var json = {
          companyName: "Waygetter Electronics",
          productName: "Tattletail",
          dataUrl: dataUrl,
          wasmCodeUrl: "WebGL.wasm.code.unityweb",
          wasmFrameworkUrl: "WebGL.wasm.framework.unityweb",
          TOTAL_MEMORY: 251658240,
          graphicsAPI: ["WebGL 2.0", "WebGL 1.0"],
          webglContextAttributes: { preserveDrawingBuffer: false },
          splashScreenStyle: "Dark",
          backgroundColor: "#000000",
        };
        let blob = new Blob([JSON.stringify(json)], {
          type: "application/json",
        });
        let blobUrl = URL.createObjectURL(blob);
        document.querySelector("#gameContainer").hidden = false;
        var gameInstance = UnityLoader.instantiate("gameContainer", json, {
          url: blobUrl,
          Module: {
            onRuntimeInitialized: function () {
              resizeUnityContainer();
              window.onresize = function () {
                resizeUnityContainer();
              };
              document.querySelector("#loading-text").remove();
            },
          },
        });
      })();
    </script>
  </body>
</html>

CSS

JS