WeGL button to turn full screen before game start

Unity Engine
1

im thinking of making a button before the actual game that when pressed it will load the main menu scene and together with that make the screen go full screen on both desktop and mobile. i used this one but that only works on desktop for some reason. any ideas as to how i can use that in mobile?

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class StartGame : MonoBehaviour
{
    void Start()
    {
        Screen.fullScreen = true;
    }

    public void PlayGame()
    {
        SceneManager.LoadScene("Menu");
    }
}
2

I think you make a custom hook in the HTML to receive the fullscreen ping from your class and invoke the right stuff, but I haven’t done it personally. Google around a bit more, I’m pretty sure it’s possible but requires some WebGL-specific stuff to happen in your Unity build.

This is what I see in my WebGL HTML wrapper:

<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>

I think that produces the little button and then the Javascript function called is gameInstance.SetFullscreen(1);

3

Perhaps something like this works… tell me if it does.

private void Start()
    {
        Resolution[] supportedResolutions = Screen.resolutions;
        Resolution biggestResolution = supportedResolutions[supportedResolutions.Length - 1];

        Screen.SetResolution(biggestResolution.width, biggestResolution.height, FullScreenMode.FullScreenWindow, biggestResolution.refreshRate);
    }
4

You can do it for both Mobile and Desktop directly within Unity by subclassing Button and overriding OnPointerDown. You can’t do it automatically - it must be in response to user input - and it won’t work with click because that’s handled later than what’s considered by the browser to be a direct response to input.

5

Example:

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class FullscreenToggle : Button
{
  public override void OnPointerDown(PointerEventData eventData)
  {
    Screen.fullScreen = !Screen.fullScreen;
    base.OnPointerDown(eventData);
  }
}

Add a normal Button to the canvas. Select that button and look at the Inspector - switch to Debug view (in top right corner dropdown), change script from Button to your FullscreenToggle. Switch back to Normal view. Now you have an integrated fullscreen toggle for WebGL.

Edit: Added related using statements

1 Like
6

can i use this one with a play button? actually to imitate somewhat the itch.io’s play game button that turns the game full screen on mobile i made a starting page for the game with just a button (play game) and added your script. without any input it doenst do anything so i tried the onclick event and the pointerdown event but the game bypasses the into scene and goes straight into the mai menu. In the starting page i have an empty object with a public void loadscene (menu) but as soon as i play start on the editor it skips it and goes straight to the main menu

7

ok thank you much made it work! but if you could help me a bit with another issue i have! i have also inside the game a mobile keyboard input which changes some things in the index html and with using your way the keyboard wont work anymore.

<!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 | Sint2019Downgrade</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 unityInstance = UnityLoader.instantiate("unityContainer", "Build/TestinBuilds.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div id="webgl-content" class="webgl-content" style="width: 960px; height: 600px">
      <div id="unityContainer" style="width: 100%; height: 100%x"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
      <div class="fullscreen" onclick="document.getElementById('webgl-content').requestFullscreen();"></div>
        <div class="title">Sint2019Downgrade</div>
      </div>
    </div>
  </body>
</html>

as you can see i have changed the script and the onclick event to make the input field work in mobiles so my guess is that something from inside the togglefull screen script messes it up?

this is the mobile keyboard script i used
https://github.com/kou-yeung/WebGLInput

edit: so the keyboard works if i use the unity fullscreen button but not using the one i made!

8

The only way I know of to get keyboard input on Mobile WebGL to work (even while in fullscreen) is to prompt for it via Javascript. However, this kicks the person out of fullscreen, blocks the main thread while it’s open and shows a popup that lets the user enter text into that. It works on everything, but it’s not pretty. I don’t think that’s what you want, since you’ve already got a mobile solution in place… so I’ll let someone else answer who maybe does know how. If nobody else has a better way (and I’m hoping someone does, because I’d like to know), I can post how to get text from the user with a Javascript prompt …but from a designer’s point of view and for a smooth experience, the drawbacks to that approach are unacceptable. I only suggest it because that’s the only way I know for Fullscreen Mobile WebGL… and again, do note that it forces the user back to windowed mode when it opens the prompt.

9

well this package uses the actual keyboard which is cool but the drawback was that when i fullscreen it didn’t work so the one who made it used that script i have and the button prompt to squeeze the game view to accommodate the keyboard but for some reason, it only works with the default unity button

10

I’m not familiar with the package you mentioned - maybe ask the person who wrote it? I’m not aware of any way to get text entry in Mobile WebGL while in fullscreen mode to work. That doesn’t mean it can’t be done, just that I don’t personally know how.

11

You could write your own on-screen keyboard, if nothing else works - and that would work in fullscreen mode. But it wouldn’t be the same as a native input dialog, you’d have to provide your own choice of characters and do your own layout.