在新的Unity WebGL模板中添加全屏显示方式

Question

在新的Unity WebGL模板中添加全屏显示方式

6

一般来说，在使用Unity WebGL构建时，其默认模板如下：

根据文档，我们可以看到，在Unity中使用WebGL模板时，需要在Assets中创建一个名为WebGLTemplates的文件夹，然后在其中添加一个名为“New Template”（或其他你想要的名字）的文件夹，并在其中添加一个index.html。

同时，index.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 | %UNITY_WEB_NAME%</title>
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
    var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%");
    </script>
  </head>
  
  <body>
    <div id="unityContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
  </body>
  
</html>

然后，在玩家设置下，选择该模板

问题是，这个选项不带有将其增大到全屏的选项。

- Tiago Martins Peres

2个回答

0

默认情况下，在WebGL构建中将全屏显示，没有页脚。

-> 打开index.html文件进行编辑

-> 将以下代码复制到body内

    <body>
    <div class="webgl-content">
      <div id="unityContainer" style="width: 100vw; height: 100vh;"></div>
    </div>
  </body>

- Rajesh Kalavakunta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tiago Martins Peres · Accepted Answer

您可以在index.html模板中添加一个具有特定高度和宽度的div，并带有onclick事件unityInstance.SetFullscreen(1)，如下：

<div style="height:20px; width: 960px; background: green;" onclick="unityInstance.SetFullscreen(1)"><b>Click here to make it full screen.</b></div>

所以，将代码更改为以下内容（我决定将其放在Unity画布上方）：

<!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 | %UNITY_WEB_NAME%</title>
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
    var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%");
    </script>
  </head>

  <body>
    <div style="height:20px; width: %UNITY_WIDTH%px; background: green;" onclick="unityInstance.SetFullscreen(1)"><b>Click here to make it full screen.</b></div>
    <div id="unityContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
  </body>

</html>

下面的代码将会输出如下内容：

当游戏加载完毕后，点击绿色区域即可使其全屏。