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

Question

一般来说，使用 Unity WebGL 构建时，默认模板如下所示

从documentation可以看出，当我们想在Unity中使用WebGL模板时，我们必须在Assets中创建一个名为WebGLTemplates的文件夹，以及一个文件夹命名为新模板（或您想要的任何名称）并在其中添加一个 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>

然后，在播放器设置下，select那个模板

事实是，这并没有增加到 full-size 的选项。

Answer 1

您可以简单地在 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 之上 canvas

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

这将输出以下内容

并在游戏加载时单击绿色区域将全屏显示。

Answer 2

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

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

-> 将以下代码复制到正文中

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

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

Add way to go full screen in new Unity WebGL template

css

unity3d

unity-webgl