Stick Battle Strategy Game in WebGL and JavaScript

11 0 Games mzierenberg1 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Stick Battle Strategy Game in WebGL and JavaScript

</head>

// For YT it is strongly encouraged that all warnings / errors show in
    // console and banners should be in game as needed to not confuse users.
    // 
    // If needed please uncomment section below to show a temporary message 
    // banner/ribbon for a few seconds, or a permanent error message on top 
    // of the canvas if type=='error'.
    function unityShowBanner(msg, type) {
      // function updateBannerVisibility() {
      //   warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      // }
      // var div = document.createElement('div');
      // div.innerHTML = msg;
      // warningBanner.appendChild(div);
      // if (type == 'error') div.style = 'background: red; padding: 10px;';
      // else {
      //   if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
      //   setTimeout(function() {
      //     warningBanner.removeChild(div);
      //     updateBannerVisibility();
      //   }, 5000);
      // }
      // updateBannerVisibility();
    }

var buildUrl = "Build";
    var loaderUrl = buildUrl + "/WebGL.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL.data",
      frameworkUrl: buildUrl + "/WebGL.framework.js",
        codeUrl: buildUrl + "/WebGL.wasm",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "Stick Page",
      productName: "Stick War: Legacy",
      productVersion: "2025.1.143",
      showBanner: unityShowBanner,
    };

// By default, Unity keeps WebGL canvas render target size matched with
    // the DOM size of the canvas element (scaled by window.devicePixelRatio)
    // Set this to false if you want to decouple this synchronization from
    // happening inside the engine, and you would instead like to size up
    // the canvas DOM size and WebGL render target sizes yourself.
    // config.matchWebGLToCanvasSize = false;

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      // Mobile device style: fill the whole browser client area with the game canvas:

var meta = document.createElement('meta');
      meta.name = 'viewport';
      meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
      document.getElementsByTagName('head')[0].appendChild(meta);
      container.className = "unity-mobile";
      canvas.className = "unity-mobile";

// Set devicePixelRatio for crisp rendering on high-DPI displays
      // Cap at 2x to balance quality vs performance (4x = 16x slower)
      config.devicePixelRatio = Math.min(window.devicePixelRatio || 1, 2);

} else {
      // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
      canvas.style.width = "100%";
      canvas.style.height = "100%";
      // Also apply devicePixelRatio for desktop high-DPI displays
      config.devicePixelRatio = Math.min(window.devicePixelRatio || 1, 2);
    }

loadingBar.style.display = "block";

if (shouldDecompress)
      {
        var blobTypeData = GetBlobType(dataUrl);
        DecompressFile(dataUrl, blobTypeData, (file) => {
          config.dataUrl = file;
          LoadWASM(callback);
        });
      }
      else
      {
        LoadWASM(callback);
      }
    }

// Fetch/Load a file then call our callback 
    loadZipData = (url, callback) => {
      fetch(url)
        .then(response => response.blob())
        .then(blob => {
          callback(blob);
        });
    }

function LoadWASM(callback)
    {
      // After Data file is checked decompress and check WASM file, followed by our callback
      var codeUrl = config.codeUrl;
      var shouldDecompress = true;

// check if .zip already exists in the URL, if it doesnt check if a .zip file exists
      if (!codeUrl.includes(subZipStr)) {
        if (UrlExists(codeUrl + subZipStr)) {
          codeUrl = codeUrl + subZipStr;
        } else {
          shouldDecompress = false;
        }
      }

// decompress if using a zip file, otherwise just load regular wasm file
      if (shouldDecompress) {
        // Decompress the file based on the type, WASM, JS, etc.
        // if you need more types please add a const above and modify the type logic below.
        var blobTypeWASM = GetBlobType(codeUrl);
        DecompressFile(codeUrl, blobTypeWASM, (file) => {
          config.codeUrl = file;
          callback();
        });
      } else {
        callback();
      }
    }

// Check if URL / File exists
    function UrlExists(urlToCheck)
    {
        var httpReq = new XMLHttpRequest();
        httpReq.open('HEAD', urlToCheck, false);
        httpReq.send();
        return httpReq.status!=404;
    }

// decompress files and call callback
    // TODO: test and potentially switch to Compression Streams API
    function DecompressFile(file, blobMimeType, callback) {
      let decompressedFile;

loadZipData(file, (f) => {
        Unarchiver.open(f).then(async function (archive) {
          for (let entry of archive.entries) {
            if (entry.is_file) {
              let entryRead = await entry.read();
              let entryData = await entryRead.arrayBuffer();
              let dataBlob = new Blob([new Uint8Array(entryData)], { type: blobMimeType });
              decompressedFile = window.URL.createObjectURL(dataBlob);
            }
          }
          callback(decompressedFile);
        });
      });
    }

document.body.appendChild(script);
    }

// Path 1: Use this path if no decompression of your .wasm, .data, .js files are needed
    // InitUnitySection();  // Path 1: Direct loading (disabled)

// Path 2: Use this path to Load resources (.wasm, .data) that are Zipped and need to be decompressed
    // if you dont use compresseion its best to comment out Path 1 and uncomment Path 2.
    loadResources(InitUnitySection);  // Path 2: Load and decompress zipped files
  </script>

</body>
</html>

CSS

Comments 0

…

Stick Battle Strategy Game in WebGL and JavaScript

Recommended

Comments 0