Question

我为网络构建了一款Unity游戏，将默认分辨率设置为1152 x 648进行测试。输出html文件具有以下代码：

<!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>

我发现如果分辨率低于（例如1024 x 768），它根本不会缩放，玩家需要滚动才能看到剩余的内容。

所以我添加了以下代码：

<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>

虽然这很好地完成了工作，但不幸的是它搞砸了游戏本身：例如，在下图中，我需要点击＆＃34; X＆＃34;解雇弹出窗口。但是当缩放时（如下图所示），要关闭弹出窗口，我需要点击＆＃34; X＆＃34;如果它没有按钮就会出现。

越小越好。

它类似于游戏规模，但实际的碰撞者没有。

我无法将初始分辨率设置得太小，因为这会迫使拥有更大屏幕的玩家使用全屏模式。

还有什么我可以尝试的吗？感谢。

如何将Unity-WebGL游戏扩展到浏览器窗口

0 个答案: