How to scale A Unity-WebGL game to browser window

问题

I've built a Unity game for web, setting the default resolution to 1152 x 648 for testing. The output html file had the following code:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | MyGame</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>  
    <script src="Build/UnityLoader.js"></script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/chaChingWeb.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 1152px; height: 648px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">MyGame</div>
      </div>
    </div>
  </body>
</html>

I found out that with resolutions below that (such as 1024 x 768), it doesn't scale at all, and the player would need to scroll to see the rest of the content.

So I added the following code:

<script type="text/javascript">
  function resizeGame() {
    var winSize = {w:1152, h:648};
    var fill1Div = document.getElementById('gameContainer');
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var scaleWidth = width / winSize.w;
    var scaleHeight = height / winSize.h;
    var bgScale = scaleWidth < scaleHeight ? scaleWidth : scaleHeight;
    bgScale = bgScale >= 1 ? 1 : bgScale;
    var bgTransformScale = "scale(" + bgScale + ")";
    fill1Div.style.transform = bgTransformScale;
    fill1Div.style.webkitTransform = bgTransformScale;
    fill1Div.style.MozTransform = bgTransformScale;
    fill1Div.style.msTransform = bgTransformScale;
    fill1Div.style.OTransform = bgTransformScale;
  }
  window.addEventListener("resize", resizeGame);
  window.addEventListener("orientationchange", resizeGame);
  resizeGame();
</script>

While this does the job nicely, unfortunately it screws up the game itself: for example, in the picture below, I need to click on the "X" to dismiss a pop-up. But when scaled (as with the lower picture), to dismiss the pop-up, I need to click on where the "X" button would have been if it weren't.

This becomes worse the smaller it is.

It's like the game scales, but the actual colliders do not.

I can't set the initial resolution to be too small, as that would force the players with larger screens to use the Full-screen mode.

Is there anything else I can try? Thanks.

来源：https://stackoverflow.com/questions/48457369/how-to-scale-a-unity-webgl-game-to-browser-window

标签

javascript

unity3d

unity-webgl