Блог

Я импортировал свою игру Unity в WebGL, но окно игры продолжает центрироваться по высоте страницы, изменяя ее расположение и перекрывая другие части страницы, и я не могу понять, почему. Я не уверен, является ли это настройкой по умолчанию или что-то, что я случайно включил, но любая помощь будет оценена, спасибо. Это код для игры на указанной странице:

 <div id="unity-container" class="unity-desktop">
          <canvas id="unity-canvas"></canvas>
          <div id="unity-loading-bar">
            <div id="unity-logo"></div>
            <div id="unity-progress-bar-empty">
              <div id="unity-progress-bar-full"></div>
            </div>
          </div>
        </div>
        <script>
          var buildUrl = "Build";
          var loaderUrl = buildUrl   "/TEST.loader.js";
          var config = {
            dataUrl: buildUrl   "/TEST.data.gz",
            frameworkUrl: buildUrl   "/TEST.framework.js.gz",
            codeUrl: buildUrl   "/TEST.wasm.gz",
            streamingAssetsUrl: "StreamingAssets",
            companyName: "Sam and Jake",
            productName: "Space Terminal Zero",
            productVersion: "0.99",
          };

          var container = document.querySelector("#unity-container");
          var canvas = document.querySelector("#unity-canvas");
          var loadingBar = document.querySelector("#unity-loading-bar");
          var progressBarFull = document.querySelector("#unity-progress-bar-full");
          var fullscreenButton = document.querySelector("#unity-fullscreen-button");

          if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
            container.className = "unity-mobile";
            config.devicePixelRatio = 1;
          } else {
            canvas.style.width = "960px";
            canvas.style.height = "600px";
          }
          loadingBar.style.display = "block";

          var script = document.createElement("script");
          script.src = loaderUrl;
          script.onload = () => {
            createUnityInstance(canvas, config, (progress) => {
              progressBarFull.style.width = 100 * progress   "%";
            }).then((unityInstance) => {
              loadingBar.style.display = "none";
              fullscreenButton.onclick = () => {
                unityInstance.SetFullscreen(1);
              };
            }).catch((message) => {
              alert(message);
            });
          };
          document.body.appendChild(script);
        </script>
  

И это CSS, который я добавил вручную:

 .unity-desktop {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    margin-top: 325px;
    border: 1px solid black;
    box-shadow: 5px 5px 50px 0px rgba(0,0,0,0.75);
}   
  

Опять же, любая помощь будет принята с благодарностью, спасибо!