Unity WebGL Mobile browser workaround and keyboard input fix?

Question

Hey everyone so I read that unity doesn't really support mobile browsers for WebGL games. im using 2020.1.4.And sure enough, the game gets a bit distorted by not being scaled properly. it's like the camera is bigger so it shows on the screen that blue color. I tried some things, setting width and height to auto or removing config.devicePixelRatio = 1; as suggested by a friend but nope! still looks horrible! And if that wasn't enough the keyboard doesn't show up when clicking on form fields. i tried this one https://github.com/eforerog/keyboardMobileWebGLUnity which displayed an error when pressed on and this one https://github.com/dantasulisses/WebMobileInputFix which just didn't even compile!

Any ideas, please?

Answer 1

I also need to enable mobile virtual keyboard for running webgl on mobile device. I've tried the code from your mentioned url. It gives you some idea on how to do it, but the code are totally buggy and unusable. Now I am trying to implement it by myself.

Answer 2

I did my research and tried every plugin I could find. I used Unity 2020.3.28f1 and tested both on Android-phone and iPhone.Here is my report.

These plugins don't work:

https://unitylist.com/p/f58/Unity-webgl-inputfield
https://github.com/eforerog/keyboardMobileWebGLUnity
https://github.com/dantasulisses/WebMobileInputFix

This plugin works, but you should use different settings for IOS and Android on same input field game object. If you use "prompt", it works for IOS only, and "overlay" works for Android only. Look for documentation in page:

https://github.com/unity3d-jp/WebGLNativeInputField

And this plugin works best at the moment. Yes, it is a bit ugly though, but it works.

https://github.com/kou-yeung/WebGLInput

And there is a fix for Unity 2021 for it:

https://github.com/kou-yeung/WebGLInput/releases/tag/1.0

Answer 3

I made this project that simply recreates a keyboard using buttons in unity. I implemented it in a WebGL build successfully.

https://github.com/thetimeste/WebGL-Build-Keyboard-Unity.git

Answer 4

There's a keyboard that overlays, when using it you just need to tap the notification to access it and then click the "back" button to hide it https://play.google.com/store/apps/details?id=com.fishstix.gameboard

Answer 5

I would recommend using the native js window.prompt() fields as of writing. They have great cross-platform support, allow for extra features like special characters, emojis, copy and paste etc. and are pretty easy to set up. Once (or honestly if ever) Unity adds their own reliable implementation you can easily remove this lightweight implementation.

1. Create a .jslib file that has a function opening a window.prompt(description, currentText)
2. Return the result at the end of that function back to a unity object with a recipient script
3. Make a derivation from Unity's event system overwriting the OnApplicationFocus(bool focus) function (leaving it empty), to fix a sneaky Chrome Android bug.

That's it. The result should look something like in this demo: https://pop.demo.neoludic.games

If you want to save some development time on a feature that really should just be native in Unity, you can also check out my plugin based on the method above. https://neoludic-games.itch.io/pop-input

Answer 6

I was able to solve this problem by using additional scripts.

index.html

        <!-- Keyboard Input System -->
        <input id="keyboardInput" type="text" style="position:fixed; z-index: -100;">
        <script>
            const keyboardInput = document.getElementById('keyboardInput');
            const unityCanvas = document.getElementById('unity-canvas');
        
            window.showKeyboard = false;
            let firstClick = false;
            unityCanvas.addEventListener('click', async function acceptFirstClick() {

              if(firstClick) return;

              firstClick = true;

              while(true)
              {
                if(window.showKeyboard)
                {
                  window.showKeyboard = false;

                  keyboardInput.focus(); // calling mobile keyboard
                }

                await new Promise(r=>setTimeout(r,400));
              }

              
            });

            document.body.addEventListener('input', e => {
              if (e.inputType == "deleteContentBackward" || (e.inputType == 'insertCompositionText' && e.data == null)) {
                window.unityInstance.SendMessage('InputReceiver', 'Backspace');
              }
              else if (e.data == null) {
                return;               
              }
              else if (e.data.length > 0) {
                window.unityInstance.SendMessage('InputReceiver', 'AcceptInput', e.data[e.data.length - 1]);
              }
            });
            
            
        </script>

external.jslib

// ...

ShowMobileKeyboard: function() {
    window.showKeyboard = true;
  },
  
// ...

ExternalInputReceiver.cs

public class ExternalInputReceiver : MonoBehaviour
{
    TMPro.TMP_InputField GetCurrentInputField()
    {
        EventSystem system = EventSystem.current;
        GameObject currentobj = system.currentSelectedGameObject;

        if (currentobj == null) return null;

        var inputField = currentobj.GetComponent<TMPro.TMP_InputField>();

        return inputField;
    }

    public void AcceptInput(string textInput)
    {
        var inputField = GetCurrentInputField();

        if (inputField != null)
            inputField.text += textInput;
    }

    public void Backspace()
    {
        var inputField = GetCurrentInputField();

        if (inputField != null)
            if (inputField.text.Length > 0)
                inputField.text = "";
    }


    public void InvokeMobileKeyboard() {

        if (GetCurrentInputField() == null) return;

        ShowMobileKeyboard();
    }

    [DllImport("__Internal")]
    private static extern void ShowMobileKeyboard();

}

Important: to call the keyboard when the Unity element receives focus, it is necessary for each 'InputField' component to add an 'ExternalInputReceiver.InvokeMobileKeyboard' handler to the 'onSelect' event in the editor.

Disadvantage: 'Backspace' removes all user input. I did this for cross-platform, since some devices generate data from the previous input at the backspace input event.

Explanation: The solution is to create an invisible field that catches the focus when the internal input catches the focus. Since calling the 'focus()' function on an element works in the case of a user action, we add an asychrony to our handler to be able to call the mobile keyboard at any time. I tested it on several devices. It also works correctly on the desktop. Improvements are possible.