CODEWITHSUNDEEP
htmlcssunity-game-enginestylesunity-webgl
pkingio.com
pkingio.com

Reputation: 1

Unity3D WebGL Canvas Resizing Issue

I am having problems with my game - it resizes right on some computers but not others can anyone help see what's wrong? it's at http://pking.io

here's the issue on Chrome: pking.io loading issue but it works fine on firefox on Mac OS or when I right after I resize the window on chrome on Max OS it works correctly, and when I try it on Windows I have the same issue on Firefox as well like in the screenshot

CSS:

body { padding: 0; margin: 0px; width: 100%; height: 100% }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 0; top: 0; bottom: 0; }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: url('background.jpg'); background-    size:cover; no-repeat }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 154px; background: url('logo.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-light.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-light.png') no-repeat center }    #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }

HTML:

<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 type="fb3e0aeb9b24d32156234654-text/javascript">
  var buildUrl = "Build";
  var loaderUrl = buildUrl + "/minimal.loader.js";
  var config = {
    dataUrl: buildUrl + "/minimal.data",
    frameworkUrl: buildUrl + "/minimal.framework.js",
    codeUrl: buildUrl + "/minimal.wasm",
    streamingAssetsUrl: "StreamingAssets",
    companyName: "K Corporation",
    productName: "PKing.io",
    productVersion: "0.4a",
  };

  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 oldContainerWidth = container.style.width;
  var oldContainerHeight = container.style.height;

  container.style.width = "100%";
  container.style.height = "100%";

  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    container.className = "unity-mobile";
    config.devicePixelRatio = 1;
  } else {
    canvas.style.width = "100%";
    canvas.style.height = "100%";
  }
  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);
      // };

      container.style.width = oldContainerWidth;
      container.style.height = oldContainerHeight;

    }).catch((message) => {
      alert(message);
    });
  };
  document.body.appendChild(script);
</script>

Upvotes: 0

Views: 3605

Answers (1)

enveal
enveal

Reputation: 11

You can adjust the else part here for the customize size if possible in the latest unity build.

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    container.className = "unity-mobile";
    config.devicePixelRatio = 1;
} else {
    canvas.style.width = "100%";   // here it can be adjusted in px 
    canvas.style.height = "100%";  // in my case i used 1305px * 350px
}
loadingBar.style.display = "block";

For the older versions use

var myGame = UnityLoader.instantiate(gameContainer, "http://mydomain/myfolder/Build/mygame.json", {width: 800, height: 600});

Upvotes: 1

Related Questions