5

Generally speaking, when working with Unity WebGL builds, the default template looks like this

Unity default WebGL build

From the documentation, we can see that when we want to use WebGL templates in Unity we have to create a folder in Assets named WebGLTemplates, and a folder named New Template (or whatever name you will) and add an index.html there.

Unity WebGL New Template

Also, the index.html should have a code similar to this

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

Then, under Player settings, select that template

Unity WebGL Build new template

Thing is, this doesn't come with the option to increase to full-size.

Unity New Template without the button to increase size to fullscreen

Tiago Martins Peres
  • 14,289
  • 18
  • 86
  • 145

2 Answers2

3

You can simply add in the index.html template a div with a specific height and width that has the onclick event unityInstance.SetFullscreen(1), like

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

So, change the code to (i decided to put it above the 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>

And this will output the following

WebGL Unity fullscreen

and clicking the green area when the game is loaded will make it go fullscreen.

Tiago Martins Peres
  • 14,289
  • 18
  • 86
  • 145
  • Is there any way we can avoid clicking green area and make it automatically full screen? – Oxygen Apr 01 '21 at 12:37
  • @Oxygen in this case I really wanted the option. You'll want the `unityInstance.SetFullscreen(1)` set just in a different time than when `onClick` – Tiago Martins Peres Apr 01 '21 at 12:42
  • I tried calling unityInstance.SetFullscreen(1) on document.ready but it is not working for me. However it works on button click. – Oxygen Apr 01 '21 at 12:59
  • @Oxygen it's best if you ask another question. If you will to reference this one, it might help those trying to help – Tiago Martins Peres Apr 01 '21 at 13:00
  • 1
    Great. Created one. [here](https://stackoverflow.com/questions/66905305/how-to-display-unity-webgl-template-in-full-screen-after-loaded) – Oxygen Apr 01 '21 at 13:25
0

By default, will come full screen without a footer in WebGL build.

-> Open the index.html file to edit

-> Copy the following code inside the body 

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