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

标签 css unity3d unity-webgl

一般来说,使用 Unity WebGL 构建时,默认模板如下所示
Unity default WebGL build
来自 documentation ,我们可以看到,当我们想在Unity中使用WebGL模板时,我们必须在Assets中创建一个名为的文件夹。 WebGL 模板 , 和一个名为 New Template(或任何你想要的名字)的文件夹并添加一个 index.html 那里。
Unity WebGL New Template
此外, 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>
然后,在播放器设置下,选择该模板
Unity WebGL Build new template
问题是,这并没有增加到全尺寸的选项。
Unity New Template without the button to increase size to fullscreen

最佳答案

您可以简单地在 index.html 模板中添加一个具有特定高度和宽度的 div,该 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>
这将输出以下内容
WebGL Unity fullscreen
并在游戏加载时单击绿色区域将使其全屏显示。

关于css - 在新的 Unity WebGL 模板中添加全屏显示方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63307533/

相关文章:

html - 将 DIV 置于其他 DIV 和图像之上

c# - 如何更改通过 PrefabUtility.InstantiatePrefab 实例化的 GameObject 的父对象?

c# - 保存每秒更改一次的数组中的数据

javascript - 如何在鼠标悬停事件上触发 Bootstrap 弹出窗口

css - 如何在 React Native 中对齐同一 Flex 行上的 Textinput 输入? (动态地)

unity3d - Unity WebGL 移动浏览器解决方法和键盘输入修复?

android - 在Unity中,如何构建和播放WebGL项目并在Android设备上播放?

unity3d - Unity WebGL 抛出错误 : "ReferenceError: Runtime is not defined"

CSS 网格 : fractions within fractions

c# - 统一导入 WWW 后如何更改 Sprite 的每单位像素?